fix(core): DropdownHover fix dropdown closing after child transition (

#5532)
taiga-family · Oct 9, 2023 · a759118 · a759118
1 parent 9f727c2
commit a759118
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 15 deletions.
diff --git a/projects/cdk/directives/hovered/hovered.service.ts b/projects/cdk/directives/hovered/hovered.service.ts
@@ -27,13 +27,6 @@ export class TuiHoveredService extends Observable<boolean> {
             filter(movedOut),
             map(ALWAYS_FALSE_HANDLER),
         ),
-        /**
-         * NOTE: onmouseout events don't trigger when objects move under mouse in Safari
-         * https://bugs.webkit.org/show_bug.cgi?id=4117
-         */
-        tuiTypedFromEvent(this.el.nativeElement, `transitionend`).pipe(
-            map(() => this.el.nativeElement.matches(`:hover`)),
-        ),
     ).pipe(distinctUntilChanged(), tuiZoneOptimized(this.zone));
 
     constructor(

diff --git a/projects/core/directives/dropdown/dropdown-hover.directive.ts b/projects/core/directives/dropdown/dropdown-hover.directive.ts
@@ -48,10 +48,7 @@ export class TuiDropdownHoverDirective extends TuiDriver {
     }
 
     toggle(visible: boolean): void {
-        if (this.parentHover) {
-            this.parentHover.toggle(visible);
-        }
-
+        this.parentHover?.toggle(visible);
         this.toggle$.next(visible);
     }
 }
diff --git a/projects/core/directives/hint/hint-hover.directive.ts b/projects/core/directives/hint/hint-hover.directive.ts
@@ -1,9 +1,9 @@
 /* eslint-disable rxjs/no-unsafe-takeuntil */
 import {Directive, ElementRef, Inject, Input} from '@angular/core';
-import {TuiHoveredService} from '@taiga-ui/cdk';
+import {tuiGetElementObscures, TuiHoveredService} from '@taiga-ui/cdk';
 import {tuiAsDriver, TuiDriver} from '@taiga-ui/core/abstract';
 import {merge, Observable, of, Subject} from 'rxjs';
-import {delay, filter, repeat, switchMap, takeUntil, tap} from 'rxjs/operators';
+import {delay, filter, map, repeat, switchMap, takeUntil, tap} from 'rxjs/operators';
 
 import {TUI_HINT_OPTIONS, TuiHintOptions} from './hint-options.directive';
 
@@ -30,6 +30,7 @@ export class TuiHintHoverDirective extends TuiDriver {
         ),
     ).pipe(
         filter(() => this.enabled),
+        map(value => value && !tuiGetElementObscures(this.el.nativeElement)?.length),
         tap(visible => {
             this.visible = visible;
         }),

diff --git a/projects/core/directives/hint/hint.component.ts b/projects/core/directives/hint/hint.component.ts
@@ -14,6 +14,7 @@ import {
     tuiClamp,
     TuiContextWithImplicit,
     TuiDestroyService,
+    tuiGetElementObscures,
     TuiHoveredService,
     tuiPure,
     tuiPx,
@@ -108,8 +109,9 @@ export class TuiHintComponent<C = any> {
     @HostListener('document:click', ['$event.target'])
     onClick(target: HTMLElement): void {
         if (
-            !this.el.nativeElement.contains(target) &&
-            !this.hover.el.nativeElement.contains(target)
+            (!this.el.nativeElement.contains(target) &&
+                !this.hover.el.nativeElement.contains(target)) ||
+            tuiGetElementObscures(this.hover.el.nativeElement)?.length
         ) {
             this.hover.toggle(false);
         }