fix: prevent unwanted auto scrolling with Popover

In a previous commit for the Drawer `.scrollIntoView` was added, this
change allows one to override that behaviour

Author: chrisolsen

libs/web-components/src/components/focus-trap/FocusTrap.svelte

@@ -1,4 +1,14 @@
-<svelte:options customElement="goa-focus-trap" />
+<svelte:options
+  customElement={{
+    tag: "goa-focus-trap",
+    props: {
+      preventScrollIntoView: {
+        attribute: "prevent-scroll-into-view",
+        type: "Boolean",
+      },
+    },
+  }}
+/>
 
 <script lang="ts">
   import { onMount, tick } from "svelte";
@@ -7,6 +17,8 @@
   // allow for outside control of whether focus trap should re-focus the first element is open/closed (see Drawer)
   export let open: boolean = false;
 
+  export let preventScrollIntoView: boolean = false;
+
   // Private
 
   let rootEl: HTMLElement;
@@ -150,7 +162,11 @@
     // If the focus element is at the bottom, we want to automatically scroll down to the focused element (when user uses keyboard)
     const focusedElement = e?.target;
 
-    if (focusedElement && focusedElement instanceof HTMLElement) {
+    if (
+      !preventScrollIntoView &&
+      focusedElement &&
+      focusedElement instanceof HTMLElement
+    ) {
       focusedElement.scrollIntoView({ behavior: "smooth", block: "center" });
     }
   }

libs/web-components/src/components/menu-button/MenuButton.svelte

@@ -131,6 +131,7 @@
   on:_open={open}
   padded="false"
   tabindex="-1"
+  prevent-scroll-into-view={true}
 >
   <goa-button
     bind:this={_targetEl}

libs/web-components/src/components/popover/Popover.svelte

@@ -8,6 +8,10 @@
         type: "Boolean",
         attribute: "disable-global-close-popover",
       },
+      preventScrollIntoView: {
+        attribute: "prevent-scroll-into-view",
+        type: "Boolean",
+      },
     },
   }}
 />
@@ -35,6 +39,9 @@
   export let width: string = "";
   export let height: "full" | "wrap-content" = "wrap-content";
 
+  // flag passed to the FocusTrap that will prevent unwanted scrolling
+  export let preventScrollIntoView: boolean = false;
+
   // allows to override the default padding when content needs to be flush with boundries
   export let padded: string = "true";
 
@@ -401,7 +408,7 @@
         style("padding", _padded ? "var(--goa-space-m)" : "0"),
       )}
     >
-      <goa-focus-trap open="true">
+      <goa-focus-trap open="true" prevent-scroll-into-view={preventScrollIntoView || undefined}>
         <div bind:this={_focusTrapEl}>
           <slot />
         </div>