fix(multi-select): auto focus first element on open (#1177)

* fix(multi-select): auto focus first element on open * fix(multi-select): focus first option on open * fix(multi-select): focus first option on open
allianz · Apr 30, 2024 · c771eba · c771eba
1 parent 9d1e8c1
commit c771eba
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 9 deletions.
diff --git a/projects/ng-aquila/src/dropdown/multi-select/multi-select.component.ts b/projects/ng-aquila/src/dropdown/multi-select/multi-select.component.ts
@@ -187,6 +187,7 @@ export class NxMultiSelectComponent<S, T> implements ControlValueAccessor, NxFor
     }
 
     @ViewChildren('selectAllCheckbox,option') private _options!: QueryList<NxMultiSelectAllComponent<T> | NxMultiSelectOptionComponent<T>>;
+    @ViewChild('selectAllCheckbox') private _selectAll!: NxMultiSelectAllComponent<T>;
 
     /** Event emitted when the select panel has been toggled. */
     @Output() readonly openedChange = new EventEmitter<boolean>();
@@ -425,6 +426,7 @@ export class NxMultiSelectComponent<S, T> implements ControlValueAccessor, NxFor
         this.listItems = this.options.slice().sort(this.sortSelectedToTop);
         this._divider = this.selectedItems.size - 1;
         this._openedBy = origin;
+
         this._cdr.markForCheck();
     }
 
@@ -542,10 +544,12 @@ export class NxMultiSelectComponent<S, T> implements ControlValueAccessor, NxFor
             this._filterInput?.nativeElement.focus();
             this._panelContent?.nativeElement.focus();
 
-            if (this._openedBy === 'keyboard') {
+            if (this._selectAll && this.selectedItems.size > 0) {
                 this._keyManager.setActiveItem(1);
-                this._scrollActiveOptionIntoView();
+            } else {
+                this._keyManager.setFirstItemActive();
             }
+            this._scrollActiveOptionIntoView();
             this.openedChange.emit(true);
             this._cdr.markForCheck();
         });

diff --git a/projects/ng-aquila/src/dropdown/multi-select/multi-select.spec.ts b/projects/ng-aquila/src/dropdown/multi-select/multi-select.spec.ts
@@ -523,14 +523,14 @@ describe('NxMultiSelectComponent', () => {
 
                 it('sets the first option active', async () => {
                     const options = await multiSelectHarness.getOptions();
-                    expect(await options[0].isActive()).toBeTrue();
+                    expect(await options[1].isActive()).toBeTrue();
                 });
 
                 it('sets the aria activedecenant', async () => {
                     const panel = (await multiSelectHarness.getPanel()) as TestElement;
                     const options = await multiSelectHarness.getOptions();
                     const ariaActivedescendant = await panel.getAttribute('aria-activedescendant');
-                    const expectedId = await options[0].getId();
+                    const expectedId = await options[1].getId();
 
                     expect(ariaActivedescendant).toBe(expectedId);
                 });
@@ -540,16 +540,16 @@ describe('NxMultiSelectComponent', () => {
                         await multiSelectHarness.pressKey('ArrowDown', DOWN_ARROW);
                     });
 
-                    it('sets the second option active', async () => {
+                    it('sets the third option active', async () => {
                         const options = await multiSelectHarness.getOptions();
-                        expect(await options[1].isActive()).toBeTrue();
+                        expect(await options[2].isActive()).toBeTrue();
                     });
 
                     it('sets the aria activedecenant', async () => {
                         const panel = (await multiSelectHarness.getPanel()) as TestElement;
                         const options = await multiSelectHarness.getOptions();
                         const ariaActivedescendant = await panel.getAttribute('aria-activedescendant');
-                        const expectedId = await options[1].getId();
+                        const expectedId = await options[2].getId();
 
                         expect(ariaActivedescendant).toBe(expectedId);
                     });
@@ -559,9 +559,9 @@ describe('NxMultiSelectComponent', () => {
                             await multiSelectHarness.pressKey('ArrowUp', UP_ARROW);
                         });
 
-                        it('sets the first option active', async () => {
+                        it('sets the second option active', async () => {
                             const options = await multiSelectHarness.getOptions();
-                            expect(await options[0].isActive()).toBeTrue();
+                            expect(await options[1].isActive()).toBeTrue();
                         });
                     });
                 });