fix(dropdown): close dropdown when focus leaves menu (#3625)

Fixes #3140
ng-bootstrap · Jun 11, 2020 · dc7990f · dc7990f
1 parent 24d232f
commit dc7990f
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 3 deletions.
diff --git a/e2e-app/src/app/dropdown/focus/dropdown-focus.e2e-spec.ts b/e2e-app/src/app/dropdown/focus/dropdown-focus.e2e-spec.ts
@@ -117,6 +117,32 @@ describe(`Dropdown focus`, () => {
         expect(await page.isOpened(dropdown)).toBeFalsy(`Dropdown should be closed on 'Escape' press`);
         await expectFocused($('body'), `Nothing should be focused after dropdown is closed`);
       });
+
+      it(`should focus dropdown first item with Tab when dropdown is opened (toggle was focused)`, async() => {
+        await page.open(dropdown);
+        await expectFocused(toggle, `Toggling element should be focused`);
+
+        // Tab -> first
+        await sendKey(Key.TAB);
+        await expectFocused(page.getDropdownItem(1), `first dropdown item should be focused`);
+      });
+
+      it(`should close dropdown with 'Tab' when focus is moved to another element`, async() => {
+        await page.open(dropdown);
+        await expectFocused(toggle, `Toggling element should be focused`);
+
+        // Down -> first
+        await sendKey(Key.ARROW_DOWN);
+        await expectFocused(page.getDropdownItem(1), `first dropdown item should be focused`);
+
+        // Home -> last
+        await sendKey(Key.END);
+        await expectFocused(page.getDropdownItem(2), `second dropdown item should be focused`);
+
+        // Tab -> another element
+        await sendKey(Key.TAB);
+        expect(await page.isOpened(dropdown)).toBeFalsy(`Dropdown should be closed`);
+      });
     });
   });
 

diff --git a/src/dropdown/dropdown.ts b/src/dropdown/dropdown.ts
@@ -67,7 +67,9 @@ export class NgbDropdownItem {
     '(keydown.Home)': 'dropdown.onKeyDown($event)',
     '(keydown.End)': 'dropdown.onKeyDown($event)',
     '(keydown.Enter)': 'dropdown.onKeyDown($event)',
-    '(keydown.Space)': 'dropdown.onKeyDown($event)'
+    '(keydown.Space)': 'dropdown.onKeyDown($event)',
+    '(keydown.Tab)': 'dropdown.onKeyDown($event)',
+    '(keydown.Shift.Tab)': 'dropdown.onKeyDown($event)'
   }
 })
 export class NgbDropdownMenu {
@@ -117,7 +119,9 @@ export class NgbDropdownAnchor {
     '(keydown.ArrowUp)': 'dropdown.onKeyDown($event)',
     '(keydown.ArrowDown)': 'dropdown.onKeyDown($event)',
     '(keydown.Home)': 'dropdown.onKeyDown($event)',
-    '(keydown.End)': 'dropdown.onKeyDown($event)'
+    '(keydown.End)': 'dropdown.onKeyDown($event)',
+    '(keydown.Tab)': 'dropdown.onKeyDown($event)',
+    '(keydown.Shift.Tab)': 'dropdown.onKeyDown($event)'
   },
   providers: [{provide: NgbDropdownAnchor, useExisting: forwardRef(() => NgbDropdownToggle)}]
 })
@@ -134,7 +138,6 @@ export class NgbDropdownToggle extends NgbDropdownAnchor {
 export class NgbDropdown implements AfterContentInit, OnDestroy {
   static ngAcceptInputType_autoClose: boolean | string;
   static ngAcceptInputType_display: string;
-
   private _closed$ = new Subject<void>();
   private _zoneSubscription: Subscription;
   private _bodyContainer: HTMLElement | null = null;
@@ -319,6 +322,23 @@ export class NgbDropdown implements AfterContentInit, OnDestroy {
       return;
     }
 
+    if (key === Key.Tab) {
+      if (event.target && this.isOpen() && this.autoClose) {
+        if (this.container === 'body' && this._anchor.anchorEl === event.target && !event.shiftKey) {
+          itemElements[0].focus();
+          event.preventDefault();
+        } else if (this.container === 'body' && event.shiftKey && position === 0) {
+          this._anchor.anchorEl.focus();
+          event.preventDefault();
+        } else {
+          fromEvent(event.target as HTMLElement, 'focusout')
+              .pipe(take(1))
+              .subscribe((e) => this._onFocusOut(e as FocusEvent));
+        }
+      }
+      return;
+    }
+
     // opening / navigating
     if (isEventFromToggle || itemElement) {
       this.open();
@@ -348,6 +368,19 @@ export class NgbDropdown implements AfterContentInit, OnDestroy {
     }
   }
 
+  private _onFocusOut(event: FocusEvent) {
+    let prevFocusedElement = event.relatedTarget as HTMLElement;
+    if (this.container === 'body') {
+      if (!this._menuElement.nativeElement.contains(prevFocusedElement)) {
+        this.close();
+      }
+    } else {
+      if (!this._elementRef.nativeElement.contains(prevFocusedElement)) {
+        this.close();
+      }
+    }
+  }
+
   private _isDropup(): boolean { return this._elementRef.nativeElement.classList.contains('dropup'); }
 
   private _isEventFromToggle(event: KeyboardEvent) {