REVERT ME: testing example

mgadewoll · mgadewoll · commit 43de14eebf75 · 2025-05-27T14:24:18.000+02:00
diff --git a/packages/eui/src/components/flyout/flyout.stories.tsx b/packages/eui/src/components/flyout/flyout.stories.tsx
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
@@ -56,10 +56,17 @@ const onClose = action('onClose');
 
 const StatefulFlyout = (props: Partial<EuiFlyoutProps>) => {
   const [isOpen, setIsOpen] = useState(true);
+  const manualTriggerRef = useRef<HTMLButtonElement>(null);
+
   return (
     <>
-      <EuiButton size="s" onClick={() => setIsOpen(!isOpen)}>
-        Toggle flyout
+      {!isOpen && (
+        <EuiButton size="s" onClick={() => setIsOpen(!isOpen)}>
+          Toggle flyout
+        </EuiButton>
+      )}
+      <EuiButton size="s" id="foobar" buttonRef={manualTriggerRef}>
+        Another button
       </EuiButton>
       {isOpen && (
         <EuiFlyout
@@ -68,6 +75,16 @@ const StatefulFlyout = (props: Partial<EuiFlyoutProps>) => {
             setIsOpen(false);
             onClose(...args);
           }}
+          focusTrapProps={{
+            returnFocus: (triggerElement: Element) => {
+              if (!triggerElement || triggerElement === document.body) {
+                manualTriggerRef.current?.focus();
+                return false;
+              }
+
+              return true;
+            },
+          }}
         />
       )}
     </>
