fix(dropdown): only show focus when interact by keyboard (#1209)

allianz · Jun 18, 2024 · e8ee8af · e8ee8af
1 parent bbec6d5
commit e8ee8af
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 3 deletions.
diff --git a/projects/ng-aquila/src/dropdown/dropdown.html b/projects/ng-aquila/src/dropdown/dropdown.html
@@ -61,6 +61,7 @@
             tabindex="-1"
             role="listbox"
             [id]="modalId"
+            [class.keyboard-focused]="openedByKeyboard"
             #panelBody
             [attr.aria-activedescendant]="_getAriaActiveDescendant()"
             [attr.aria-multiselectable]="isMultiSelect"

diff --git a/projects/ng-aquila/src/dropdown/dropdown.spec.ts b/projects/ng-aquila/src/dropdown/dropdown.spec.ts
@@ -181,6 +181,9 @@ describe('NxDropdownComponent', () => {
         it('should open the dropdown by click and close it by click on the backdrop', fakeAsync(() => {
             createTestComponent(SimpleDropdownComponent);
             openDropdownByClick();
+            const panelBody = getDropdown()?.querySelector('.nx-dropdown__panel-body');
+            expect(panelBody).not.toHaveClass('keyboard-focused');
+
             expectDropdownOpen();
             clickOnBackdrop();
             expectDropdownClose();
@@ -1455,6 +1458,10 @@ describe('NxDropdownComponent', () => {
             openDropdownByKeyboard();
             fixture.detectChanges();
             tick();
+
+            const panelBody = getDropdown()?.querySelector('.nx-dropdown__panel-body');
+            expect(panelBody).toHaveClass('keyboard-focused');
+
             expectDropdownOpen();
         }));
 

diff --git a/projects/ng-aquila/src/dropdown/dropdown.ts b/projects/ng-aquila/src/dropdown/dropdown.ts
@@ -151,7 +151,7 @@ const _defaultValueFormatterFn: NxDropdownValueFormatterFn = value => (value ==
         '(keydown)': '_handleKeydown($event)',
         '(focus)': '_onFocus()',
         '(blur)': '_onBlur()',
-        '(click)': 'openPanel($event)',
+        '(click)': 'openedByKeyboard = false; openPanel($event)',
     },
 })
 export class NxDropdownComponent
@@ -689,6 +689,8 @@ export class NxDropdownComponent
         });
     }
 
+    openedByKeyboard = true;
+
     private _initActiveItem() {
         if (!this.isMultiSelect && this._selectionModel.selected[0]) {
             const option = this.dropdownItems.find(o => o.value === this._selectionModel.selected[0].value);
@@ -1073,6 +1075,7 @@ export class NxDropdownComponent
     /** End ControlValueAccessor */
 
     _handleKeydown(event: KeyboardEvent) {
+        this.openedByKeyboard = true;
         this.panelOpen ? this._handleOpenKeydown(event) : this._handleClosedKeydown(event);
     }
 

diff --git a/projects/ng-aquila/src/dropdown/item/dropdown-item.scss b/projects/ng-aquila/src/dropdown/item/dropdown-item.scss
@@ -72,15 +72,16 @@ nx-checkbox {
         margin-left: nx-spacer(2xs);
     }
 }
-
 // focus style
 /* clean-css ignore:start */
-:host(.nx-dropdown-item--active) {
+
+:host-context(.keyboard-focused) :host(.nx-dropdown-item--active) {
     .nx-dropdown-results__option .nx-dropdown-results__option-label {
         border-radius: nx-border-radius(s);
         @include focus-style;
     }
 }
+
 /* clean-css ignore:end */
 
 // focus style - multiselect dropdown item