fix(dropdown): focus lost on click, add close on tabOut

Author: xidedix

projects/coreui-angular/src/lib/dropdown/dropdown/dropdown.component.scss

@@ -1,7 +1,8 @@
-// todo: find better soulution
+// todo: find better solution
 
 :host-context(.dropdown, .dropup):not(.btn-group) {
   display: block;
+  min-width: fit-content;
 }
 
 :host-context(.dropstart, .dropend):not(.btn-group) {

projects/coreui-angular/src/lib/dropdown/dropdown/dropdown.component.ts

@@ -21,7 +21,6 @@ import {
 } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
-import { FocusMonitor } from '@angular/cdk/a11y';
 import { Subscription } from 'rxjs';
 
 import { createPopper, Instance, Options, Placement } from '@popperjs/core';
@@ -118,6 +117,15 @@ export class DropdownComponent implements AfterContentInit, OnDestroy, OnInit {
   static ngAcceptInputType_dark: BooleanInput;
   static ngAcceptInputType_visible: BooleanInput;
 
+  constructor(
+    @Inject(DOCUMENT) private document: Document,
+    private elementRef: ElementRef,
+    private renderer: Renderer2,
+    private ngZone: NgZone,
+    private changeDetectorRef: ChangeDetectorRef,
+    public dropdownService: DropdownService
+  ) {}
+
   /**
    * Set alignment of dropdown menu.
    * @type {'start' | 'end' | { xs: 'start' | 'end' } | { sm: 'start' | 'end' } | { md: 'start' | 'end' } | { lg: 'start' | 'end' } | { xl: 'start' | 'end'} | { xxl: 'start' | 'end'}}
@@ -246,23 +254,14 @@ export class DropdownComponent implements AfterContentInit, OnDestroy, OnInit {
   dropdownContext = { $implicit: this.visible };
   @ContentChild(DropdownToggleDirective) _toggler!: DropdownToggleDirective;
   @ContentChild(DropdownMenuDirective) _menu!: DropdownMenuDirective;
+  @ContentChild(DropdownMenuDirective, { read: ElementRef }) _menuElementRef!: ElementRef;
 
   public activeTrap = false;
 
   private dropdownStateSubscription!: Subscription;
   private popperInstance!: Instance | undefined;
   private listeners: (() => void)[] = [];
 
-  constructor(
-    @Inject(DOCUMENT) private document: Document,
-    private elementRef: ElementRef,
-    private renderer: Renderer2,
-    private ngZone: NgZone,
-    private changeDetectorRef: ChangeDetectorRef,
-    private focusMonitor: FocusMonitor,
-    public dropdownService: DropdownService
-  ) {}
-
   @HostBinding('class')
   get hostClasses(): any {
     return {
@@ -320,14 +319,6 @@ export class DropdownComponent implements AfterContentInit, OnDestroy, OnInit {
     if (this.variant === 'nav-item') {
       this.renderer.addClass(this._toggler.elementRef.nativeElement, 'nav-link');
     }
-    this.focusMonitor.monitor(this.elementRef, true).subscribe(origin => {
-      this.ngZone.run(() => {
-        if ((!origin) && (this.autoClose === true || this.autoClose === 'outside')) {
-          this.setVisibleState(false);
-          this.changeDetectorRef.markForCheck();
-        }
-      });
-    });
   }
 
   ngOnInit(): void {
@@ -336,7 +327,6 @@ export class DropdownComponent implements AfterContentInit, OnDestroy, OnInit {
   }
 
   ngOnDestroy(): void {
-    this.focusMonitor?.stopMonitoring(this.elementRef);
     this.clearListeners();
     this.dropdownStateSubscribe(false);
     this.destroyPopperInstance();
@@ -380,6 +370,9 @@ export class DropdownComponent implements AfterContentInit, OnDestroy, OnInit {
     this.listeners.push(
       this.renderer.listen(this.document, 'click', (event) => {
         const target = event.target as HTMLElement;
+        if (this._menuElementRef?.nativeElement.contains(event.target)) {
+          this.clickedTarget = target;
+        }
         if (this._toggler?.elementRef.nativeElement.contains(event.target)) {
           return;
         }
@@ -406,6 +399,14 @@ export class DropdownComponent implements AfterContentInit, OnDestroy, OnInit {
         }
       })
     );
+    this.listeners.push(
+      this.renderer.listen(this.document, 'keyup', (event) => {
+        if (event.key === 'Tab' && this.autoClose !== false && !this.elementRef.nativeElement.contains(event.target)) {
+          this.setVisibleState(false);
+          return;
+        }
+      })
+    );
   }
 
   private clearListeners(): void {