fix(kit): LineClamp fix unexpected closing (#5630)

taiga-family · Oct 13, 2023 · d6751cd · d6751cd
1 parent 70e00b5
commit d6751cd
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 5 deletions.
diff --git a/projects/core/directives/hint/hint-hover.directive.ts b/projects/core/directives/hint/hint-hover.directive.ts
@@ -1,7 +1,8 @@
 /* eslint-disable rxjs/no-unsafe-takeuntil */
 import {Directive, ElementRef, Inject, Input} from '@angular/core';
-import {tuiGetElementObscures, TuiHoveredService} from '@taiga-ui/cdk';
+import {TuiHoveredService} from '@taiga-ui/cdk';
 import {tuiAsDriver, TuiDriver} from '@taiga-ui/core/abstract';
+import {tuiIsObscured} from '@taiga-ui/core/utils';
 import {merge, Observable, of, Subject} from 'rxjs';
 import {delay, filter, map, repeat, switchMap, takeUntil, tap} from 'rxjs/operators';
 
@@ -30,7 +31,7 @@ export class TuiHintHoverDirective extends TuiDriver {
         ),
     ).pipe(
         filter(() => this.enabled),
-        map(value => value && !tuiGetElementObscures(this.el.nativeElement)?.length),
+        map(value => value && !tuiIsObscured(this.el.nativeElement)),
         tap(visible => {
             this.visible = visible;
         }),

diff --git a/projects/core/directives/hint/hint.component.ts b/projects/core/directives/hint/hint.component.ts
@@ -14,7 +14,6 @@ import {
     tuiClamp,
     TuiContextWithImplicit,
     TuiDestroyService,
-    tuiGetElementObscures,
     TuiHoveredService,
     tuiPure,
     tuiPx,
@@ -30,11 +29,11 @@ import {TuiPortalItem} from '@taiga-ui/core/interfaces';
 import {TuiPositionService, TuiVisualViewportService} from '@taiga-ui/core/services';
 import {TUI_ANIMATION_OPTIONS, TUI_VIEWPORT} from '@taiga-ui/core/tokens';
 import {TuiPoint} from '@taiga-ui/core/types';
+import {tuiIsObscured} from '@taiga-ui/core/utils';
 import {POLYMORPHEUS_CONTEXT, PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 import {Observable} from 'rxjs';
 import {map, takeUntil} from 'rxjs/operators';
 
-// eslint-disable-next-line import/no-cycle
 import {TuiHintDirective} from './hint.directive';
 import {TuiHintHoverDirective} from './hint-hover.directive';
 import {TuiHintPointerDirective} from './hint-pointer.directive';
@@ -111,7 +110,7 @@ export class TuiHintComponent<C = any> {
         if (
             (!this.el.nativeElement.contains(target) &&
                 !this.hover.el.nativeElement.contains(target)) ||
-            tuiGetElementObscures(this.hover.el.nativeElement)?.length
+            tuiIsObscured(this.hover.el.nativeElement)
         ) {
             this.hover.toggle(false);
         }

diff --git a/projects/core/utils/miscellaneous/index.ts b/projects/core/utils/miscellaneous/index.ts
@@ -1,6 +1,7 @@
 export * from './get-border';
 export * from './icons-path-factory';
 export * from './is-editing-key';
+export * from './is-obscured';
 export * from './is-presumed-html-string';
 export * from './override-options';
 export * from './size-bigger';
diff --git a/projects/core/utils/miscellaneous/is-obscured.ts b/projects/core/utils/miscellaneous/is-obscured.ts
@@ -0,0 +1,11 @@
+import {tuiGetElementObscures} from '@taiga-ui/cdk';
+
+/**
+ * @internal
+ */
+export function tuiIsObscured(
+    el: HTMLElement,
+    exceptSelector = `tui-hints-host`,
+): boolean {
+    return !!tuiGetElementObscures(el)?.some(el => !el.closest(exceptSelector));
+}
diff --git a/projects/demo-cypress/cypress/tests/kit/line-clamp/line-clamp.cy.ts b/projects/demo-cypress/cypress/tests/kit/line-clamp/line-clamp.cy.ts
@@ -64,4 +64,19 @@ describe(`LineClamp`, () => {
             });
         }
     });
+
+    describe(`Hovered`, () => {
+        const basicText = `Lorem ipsum Gaudeamus igiturCarpe diem Veni, vidi, vici`;
+
+        it(`linesLimit=2 hovered`, () => {
+            cy.tuiVisit(`/components/line-clamp/API?content=${basicText}&linesLimit=2`);
+
+            cy.get(`#demo-content tui-line-clamp`).realHover();
+
+            cy.get(`tui-line-clamp-box`)
+                .should(`be.visible`)
+                .tuiWaitBeforeScreenshot()
+                .matchImageSnapshot(`02-[linesLimit=2]-basicText-hover`);
+        });
+    });
 });