APP-18235 returnFocusToTrigger prop for popover (#450)

getflip · Nov 13, 2023 · 89726d7 · 89726d7
1 parent 8d4ce24
commit 89726d7
Show file tree

Hide file tree

Showing 8 changed files with 30 additions and 158 deletions.
diff --git a/.changeset/spotty-ducks-drop.md b/.changeset/spotty-ducks-drop.md
@@ -0,0 +1,7 @@
+---
+"@getflip/swirl-components": minor
+"@getflip/swirl-components-angular": minor
+"@getflip/swirl-components-react": minor
+---
+
+Add "returnFocusToTrigger" prop to swirl-popover
diff --git a/packages/swirl-components/package.json b/packages/swirl-components/package.json
@@ -107,7 +107,7 @@
     "remark-gfm": "^3.0.1",
     "storybook": "^7.4.0",
     "storybook-addon-themes": "^6.1.0",
-    "storybook-design-token": "^3.0.0-beta.3",
+    "storybook-design-token": "^3.0.0-beta.7",
     "svgo": "^2.8.0",
     "typescript": "^4.7.4",
     "vite": "^3.2.7"

diff --git a/packages/swirl-components/src/components.d.ts b/packages/swirl-components/src/components.d.ts
@@ -1276,6 +1276,7 @@ export namespace Components {
         "open": (triggerEl?: HTMLElement) => Promise<void>;
         "placement"?: Placement;
         "popoverId"?: string;
+        "returnFocusToTrigger"?: boolean;
         "trigger"?: string | HTMLElement;
         "triggerContainer"?: HTMLElement;
         "useContainerWidth"?: boolean | string;
@@ -5148,6 +5149,7 @@ declare namespace LocalJSX {
         "onPopoverOpen"?: (event: SwirlPopoverCustomEvent<{ position: ComputePositionReturn }>) => void;
         "placement"?: Placement;
         "popoverId"?: string;
+        "returnFocusToTrigger"?: boolean;
         "trigger"?: string | HTMLElement;
         "triggerContainer"?: HTMLElement;
         "useContainerWidth"?: boolean | string;

diff --git a/packages/swirl-components/src/components/swirl-popover/swirl-popover.stories.ts b/packages/swirl-components/src/components/swirl-popover/swirl-popover.stories.ts
@@ -15,6 +15,10 @@ export default {
         type: "number",
       },
     },
+    returnFocusToTrigger: {
+      description:
+        "By default, the focus is returned to the trigger element when the popover is closed. Pass false to disable this behavior.",
+    },
     trigger: {
       description:
         "**Deprecated! Please use the swirl-popover-trigger component instead.** ID of the trigger element or the trigger DOM element.",

diff --git a/packages/swirl-components/src/components/swirl-popover/swirl-popover.tsx b/packages/swirl-components/src/components/swirl-popover/swirl-popover.tsx
@@ -49,6 +49,7 @@ export class SwirlPopover {
   @Prop() offset?: number | number[] = 8;
   @Prop() popoverId?: string;
   @Prop() placement?: Placement = "bottom-start";
+  @Prop() returnFocusToTrigger?: boolean = true;
   @Prop() trigger?: string | HTMLElement;
   @Prop() triggerContainer?: HTMLElement;
   @Prop() useContainerWidth?: boolean | string;
@@ -164,7 +165,10 @@ export class SwirlPopover {
     }, 150);
 
     this.unlockBodyScroll();
-    this.getNativeTriggerElement()?.focus();
+
+    if (this.returnFocusToTrigger) {
+      this.getNativeTriggerElement()?.focus();
+    }
   }
 
   /**

diff --git a/...rl-components/src/components/swirl-resource-list-item/swirl-resource-list-item.stories.ts b/...rl-components/src/components/swirl-resource-list-item/swirl-resource-list-item.stories.ts
@@ -61,6 +61,7 @@ const Template = (args) => {
   popover.animation = "scale-in-y";
   popover.label = "Options";
   popover.placement = "bottom-end";
+  popover.returnFocusToTrigger = false;
 
   popover.innerHTML = `
     <swirl-action-list>

diff --git a/packages/swirl-components/vscode-data.json b/packages/swirl-components/vscode-data.json
@@ -5022,6 +5022,10 @@
           "name": "popover-id",
           "description": ""
         },
+        {
+          "name": "return-focus-to-trigger",
+          "description": ""
+        },
         {
           "name": "trigger",
           "description": ""

diff --git a/yarn.lock b/yarn.lock