feat(experimental): add autoClose when another element is focused, hi…

…de actions on non-touch devices (#6801)
taiga-family · Feb 16, 2024 · 447baca · 447baca
1 parent 069a650
commit 447baca
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 12 deletions.
diff --git a/projects/demo/src/modules/experimental/swipe-action/examples/5/index.less b/projects/demo/src/modules/experimental/swipe-action/examples/5/index.less
@@ -5,10 +5,6 @@
     width: 20rem;
 }
 
-tui-swipe-actions {
-    overflow: hidden;
-}
-
 .fallback {
     .center-top();
     right: 2rem;
@@ -26,8 +22,4 @@ button[tuiSwipeAction] {
     .fallback {
         display: none;
     }
-
-    tui-swipe-actions {
-        overflow-x: scroll;
-    }
 }
diff --git a/projects/experimental/components/swipe-action/swipe-actions-auto-close.directive.ts b/projects/experimental/components/swipe-action/swipe-actions-auto-close.directive.ts
@@ -4,19 +4,20 @@ import {tuiGetActualTarget} from '@taiga-ui/cdk';
 @Directive({
     selector: 'tui-swipe-actions[autoClose]',
     host: {
-        '(document:pointerdown.silent)': 'onPointer($event)',
+        '(document:pointerdown.silent)': 'handleEvent($event)',
+        '(document:focusin.silent)': 'handleEvent($event)',
     },
 })
 export class TuiSwipeActionsAutoCloseDirective {
     @Input()
-    autoClose = true;
+    autoClose: boolean | string = true;
 
     constructor(@Inject(ElementRef) private readonly el: ElementRef<HTMLElement>) {}
 
-    onPointer(event: PointerEvent): void {
+    handleEvent(event: Event): void {
         const target = tuiGetActualTarget(event);
 
-        if (this.autoClose && !this.el.nativeElement.contains(target)) {
+        if (this.autoClose !== false && !this.el.nativeElement.contains(target)) {
             this.close();
         }
     }

diff --git a/projects/experimental/components/swipe-action/swipe-actions.style.less b/projects/experimental/components/swipe-action/swipe-actions.style.less
@@ -37,6 +37,10 @@
     ::ng-deep & > * {
         .loop(6);
     }
+
+    @media (hover: hover) and (pointer: fine) {
+        display: none;
+    }
 }
 
 .loop (@i) when (@i > 1) {