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

taiga-family · Feb 15, 2024 · c1f3ff8 · c1f3ff8
1 parent ab0aba6
commit c1f3ff8
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
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) {