From 93b1445862b976470ddaad59a23019b4a5f44163 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Mon, 2 May 2022 14:05:55 -0500
Subject: [PATCH 01/19] enable shards; add default button shard for collapsible
 nav

---
 src/components/collapsible_nav/collapsible_nav.tsx | 7 +++++++
 src/components/flyout/flyout.tsx                   | 8 +++++++-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/collapsible_nav/collapsible_nav.tsx b/src/components/collapsible_nav/collapsible_nav.tsx
index 2531f2a5021..96a05f76af5 100644
--- a/src/components/collapsible_nav/collapsible_nav.tsx
+++ b/src/components/collapsible_nav/collapsible_nav.tsx
@@ -12,6 +12,7 @@ import React, {
   ReactElement,
   ReactNode,
   useEffect,
+  useRef,
   useState,
 } from 'react';
 import classNames from 'classnames';
@@ -19,6 +20,7 @@ import {
   useGeneratedHtmlId,
   isWithinMinBreakpoint,
   throttle,
+  useCombinedRefs,
 } from '../../services';
 import { EuiFlyout, EuiFlyoutProps } from '../flyout';
 
@@ -71,12 +73,15 @@ export const EuiCollapsibleNav: FunctionComponent<EuiCollapsibleNavProps> = ({
   outsideClickCloses = true,
   closeButtonPosition = 'outside',
   paddingSize = 'none',
+  shards = [],
   ...rest
 }) => {
   const flyoutID = useGeneratedHtmlId({
     conditionalId: id,
     suffix: 'euiCollapsibleNav',
   });
+  const buttonRef = useRef();
+  const combinedButtonRef = useCombinedRefs([button?.props.ref, buttonRef]);
 
   /**
    * Setting the initial state of pushed based on the `type` prop
@@ -136,6 +141,7 @@ export const EuiCollapsibleNav: FunctionComponent<EuiCollapsibleNavProps> = ({
           onMouseUpCapture: (e: React.MouseEvent<HTMLElement>) => {
             e.nativeEvent.stopImmediatePropagation();
           },
+          ref: combinedButtonRef,
         });
 
   const flyout = (
@@ -151,6 +157,7 @@ export const EuiCollapsibleNav: FunctionComponent<EuiCollapsibleNavProps> = ({
       outsideClickCloses={outsideClickCloses}
       closeButtonPosition={closeButtonPosition}
       paddingSize={paddingSize}
+      shards={[buttonRef, ...shards]}
       {...rest}
       // Props dependent on internal docked status
       type={navIsDocked ? 'push' : 'overlay'}
diff --git a/src/components/flyout/flyout.tsx b/src/components/flyout/flyout.tsx
index 79aaa35ad0d..7d64d40a3ed 100644
--- a/src/components/flyout/flyout.tsx
+++ b/src/components/flyout/flyout.tsx
@@ -30,7 +30,7 @@ import {
 } from '../../services';
 
 import { CommonProps, keysOf, PropsOfElement } from '../common';
-import { EuiFocusTrap } from '../focus_trap';
+import { EuiFocusTrap, EuiFocusTrapProps } from '../focus_trap';
 import { EuiOverlayMask, EuiOverlayMaskProps } from '../overlay_mask';
 import { EuiButtonIcon, EuiButtonIconPropsForButton } from '../button';
 import { EuiI18n } from '../i18n';
@@ -151,6 +151,10 @@ interface _EuiFlyoutProps {
    */
   pushMinBreakpoint?: EuiBreakpointSize | number;
   style?: CSSProperties;
+  /**
+   * Elements to consider part of the flyout and will not close the flyout when clicked (depends on your configuration)
+   */
+  shards?: EuiFocusTrapProps['shards'];
 }
 
 const defaultElement = 'div';
@@ -189,6 +193,7 @@ export const EuiFlyout = forwardRef(
       outsideClickCloses,
       role = 'dialog',
       pushMinBreakpoint = 'l',
+      shards,
       ...rest
     }: EuiFlyoutProps<T>,
     ref:
@@ -362,6 +367,7 @@ export const EuiFlyout = forwardRef(
         disabled={isPushed}
         clickOutsideDisables={!ownFocus}
         onClickOutside={onClickOutside}
+        shards={shards}
       >
         <Element
           {...(rest as ComponentPropsWithRef<T>)}

From 251f4bbf3eb9df4076c12eac77996840b784252b Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Mon, 2 May 2022 14:06:41 -0500
Subject: [PATCH 02/19] elastic pattern spec

---
 .../collapsible_nav/collapsible_nav.spec.tsx  | 108 ++++++++++++++++++
 1 file changed, 108 insertions(+)
 create mode 100644 src/components/collapsible_nav/collapsible_nav.spec.tsx

diff --git a/src/components/collapsible_nav/collapsible_nav.spec.tsx b/src/components/collapsible_nav/collapsible_nav.spec.tsx
new file mode 100644
index 00000000000..a67152f426a
--- /dev/null
+++ b/src/components/collapsible_nav/collapsible_nav.spec.tsx
@@ -0,0 +1,108 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+/// <reference types="../../../cypress/support"/>
+
+import React, { useState } from 'react';
+
+import { EuiCollapsibleNav } from './collapsible_nav';
+import { EuiHeader, EuiHeaderSectionItemButton } from '../header';
+import { EuiIcon } from '../icon';
+
+const childrenDefault = (
+  <>
+    <button data-test-subj="itemA">Item A</button>
+    <button data-test-subj="itemB">Item B</button>
+    <button data-test-subj="itemC">Item C</button>
+    <input data-test-subj="itemD" />
+  </>
+);
+
+const Nav = ({ children = childrenDefault }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <EuiHeader
+      style={{ zIndex: 1001 }}
+      position="fixed"
+      sections={[
+        {
+          items: [
+            <EuiCollapsibleNav
+              style={{ top: 48 }}
+              id="navSpec"
+              isOpen={isOpen}
+              button={
+                <EuiHeaderSectionItemButton
+                  data-test-subj="navSpecButton"
+                  aria-label="Toggle main navigation"
+                  onClick={() => setIsOpen(!isOpen)}
+                >
+                  <EuiIcon type={'menu'} size="m" aria-hidden="true" />
+                </EuiHeaderSectionItemButton>
+              }
+              onClose={() => setIsOpen(false)}
+            >
+              {children}
+            </EuiCollapsibleNav>,
+          ],
+        },
+      ]}
+    />
+  );
+};
+
+describe('EuiCollapsibleNav', () => {
+  describe('Elastic pattern', () => {
+    describe('Toggle button behavior', () => {
+      it('opens and closes nav when the main button is clicked', () => {
+        cy.mount(<Nav />);
+        cy.wait(400);
+        cy.get('[data-test-subj="navSpecButton"]')
+          .realClick()
+          .then(() => {
+            expect(cy.get('#navSpec').should('exist'));
+
+            cy.get('[data-test-subj="navSpecButton"]')
+              .realClick()
+              .then(() => {
+                expect(cy.get('#navSpec').should('not.exist'));
+              });
+          });
+      });
+
+      it('closes the nav when the overlay mask is clicked', () => {
+        cy.mount(<Nav />);
+        cy.wait(400);
+        cy.get('[data-test-subj="navSpecButton"]')
+          .realClick()
+          .then(() => {
+            cy.get('.euiOverlayMask')
+              .realClick()
+              .then(() => {
+                expect(cy.get('#navSpec').should('not.exist'));
+              });
+          });
+      });
+
+      it('closes the nav when the close button is clicked', () => {
+        cy.mount(<Nav />);
+        cy.wait(400);
+        cy.get('[data-test-subj="navSpecButton"]')
+          .realClick()
+          .then(() => {
+            cy.get('[data-test-subj="euiFlyoutCloseButton"]')
+              .realClick()
+              .then(() => {
+                expect(cy.get('#navSpec').should('not.exist'));
+              });
+          });
+      });
+    });
+  });
+});

From 389e0172adaa3d776217b22b11801ebcb024e19b Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Mon, 2 May 2022 14:15:36 -0500
Subject: [PATCH 03/19] update comment

---
 src/components/flyout/flyout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/flyout/flyout.tsx b/src/components/flyout/flyout.tsx
index 7d64d40a3ed..e4010cbe08d 100644
--- a/src/components/flyout/flyout.tsx
+++ b/src/components/flyout/flyout.tsx
@@ -152,7 +152,7 @@ interface _EuiFlyoutProps {
   pushMinBreakpoint?: EuiBreakpointSize | number;
   style?: CSSProperties;
   /**
-   * Elements to consider part of the flyout and will not close the flyout when clicked (depends on your configuration)
+   * Elements to consider part of the flyout and when clicked will not automatically close the flyout (depends on your configuration)
    */
   shards?: EuiFocusTrapProps['shards'];
 }

From ae1acc21b8a89b0240c245f182bff9336c2a8fa5 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Mon, 2 May 2022 14:18:23 -0500
Subject: [PATCH 04/19] CL

---
 upcoming_changelogs/5860.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 upcoming_changelogs/5860.md

diff --git a/upcoming_changelogs/5860.md b/upcoming_changelogs/5860.md
new file mode 100644
index 00000000000..5260dfda4c3
--- /dev/null
+++ b/upcoming_changelogs/5860.md
@@ -0,0 +1,6 @@
+- Added the `shards` prop to `EuiFlyout` and `EuiCollapsibleNav` to aid outside click detection
+
+**Bug fixes**
+
+- Fixed `EuiCollapsibleNav` failing to close when the button is clicked
+

From 83c38dc0c5ff9431d9aaf6a8ec380461ef2c904f Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Mon, 2 May 2022 16:03:13 -0500
Subject: [PATCH 05/19] closeOnMouseup to delay close

---
 src/components/flyout/flyout.tsx         |  1 +
 src/components/focus_trap/focus_trap.tsx | 27 ++++++++++++++++++++++--
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/components/flyout/flyout.tsx b/src/components/flyout/flyout.tsx
index e4010cbe08d..23d1c964136 100644
--- a/src/components/flyout/flyout.tsx
+++ b/src/components/flyout/flyout.tsx
@@ -367,6 +367,7 @@ export const EuiFlyout = forwardRef(
         disabled={isPushed}
         clickOutsideDisables={!ownFocus}
         onClickOutside={onClickOutside}
+        closeOnMouseup={true}
         shards={shards}
       >
         <Element
diff --git a/src/components/focus_trap/focus_trap.tsx b/src/components/focus_trap/focus_trap.tsx
index fc67ba70f2b..9a179fa957a 100644
--- a/src/components/focus_trap/focus_trap.tsx
+++ b/src/components/focus_trap/focus_trap.tsx
@@ -16,6 +16,10 @@ import { findElementBySelectorOrRef, ElementTarget } from '../../services';
 export type FocusTarget = ElementTarget;
 
 interface EuiFocusTrapInterface {
+  /**
+   * Whether `onClickOutside` should be called on mouseup instead of mousedown
+   */
+  closeOnMouseup?: boolean;
   /**
    * Clicking outside the trap area will disable the trap
    */
@@ -64,6 +68,10 @@ export class EuiFocusTrap extends Component<EuiFocusTrapProps, State> {
     }
   }
 
+  componentWillUnmount() {
+    this.removeCloseListener();
+  }
+
   // Programmatically sets focus on a nested DOM node; optional
   setInitialFocus = (initialFocus?: FocusTarget) => {
     const node = findElementBySelectorOrRef(initialFocus);
@@ -72,14 +80,29 @@ export class EuiFocusTrap extends Component<EuiFocusTrapProps, State> {
     node.setAttribute('data-autofocus', 'true');
   };
 
+  onClickOutside = (e: MouseEvent | TouchEvent) => {
+    this.props.onClickOutside && this.props.onClickOutside(e);
+    this.removeCloseListener();
+  };
+
+  addCloseListener = () => {
+    document.addEventListener('mouseup', this.onClickOutside);
+    document.addEventListener('touchend', this.onClickOutside);
+  };
+
+  removeCloseListener = () => {
+    document.removeEventListener('mouseup', this.onClickOutside);
+    document.removeEventListener('touchend', this.onClickOutside);
+  };
+
   handleOutsideClick: ReactFocusOnProps['onClickOutside'] = (...args) => {
-    const { onClickOutside, clickOutsideDisables } = this.props;
+    const { onClickOutside, clickOutsideDisables, closeOnMouseup } = this.props;
     if (clickOutsideDisables) {
       this.setState({ hasBeenDisabledByClick: true });
     }
 
     if (onClickOutside) {
-      onClickOutside(...args);
+      closeOnMouseup ? this.addCloseListener() : onClickOutside(...args);
     }
   };
 

From e16f22d59ce6ee343386ecf49f28aab1049f0823 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Mon, 2 May 2022 16:05:25 -0500
Subject: [PATCH 06/19] TEMP: remove shard from collapsible

---
 src/components/collapsible_nav/collapsible_nav.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/collapsible_nav/collapsible_nav.tsx b/src/components/collapsible_nav/collapsible_nav.tsx
index 96a05f76af5..0d207363c2c 100644
--- a/src/components/collapsible_nav/collapsible_nav.tsx
+++ b/src/components/collapsible_nav/collapsible_nav.tsx
@@ -157,7 +157,7 @@ export const EuiCollapsibleNav: FunctionComponent<EuiCollapsibleNavProps> = ({
       outsideClickCloses={outsideClickCloses}
       closeButtonPosition={closeButtonPosition}
       paddingSize={paddingSize}
-      shards={[buttonRef, ...shards]}
+      shards={[...shards]}
       {...rest}
       // Props dependent on internal docked status
       type={navIsDocked ? 'push' : 'overlay'}

From a461586924f234b7c8763dbe4c378f647310df44 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Tue, 3 May 2022 10:34:20 -0500
Subject: [PATCH 07/19] focusTrapProps to match pattern in EuiPopover

---
 src/components/collapsible_nav/collapsible_nav.tsx | 2 --
 src/components/flyout/flyout.tsx                   | 8 ++++----
 src/components/focus_trap/focus_trap.tsx           | 4 +++-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/collapsible_nav/collapsible_nav.tsx b/src/components/collapsible_nav/collapsible_nav.tsx
index 0d207363c2c..0774446eb25 100644
--- a/src/components/collapsible_nav/collapsible_nav.tsx
+++ b/src/components/collapsible_nav/collapsible_nav.tsx
@@ -73,7 +73,6 @@ export const EuiCollapsibleNav: FunctionComponent<EuiCollapsibleNavProps> = ({
   outsideClickCloses = true,
   closeButtonPosition = 'outside',
   paddingSize = 'none',
-  shards = [],
   ...rest
 }) => {
   const flyoutID = useGeneratedHtmlId({
@@ -157,7 +156,6 @@ export const EuiCollapsibleNav: FunctionComponent<EuiCollapsibleNavProps> = ({
       outsideClickCloses={outsideClickCloses}
       closeButtonPosition={closeButtonPosition}
       paddingSize={paddingSize}
-      shards={[...shards]}
       {...rest}
       // Props dependent on internal docked status
       type={navIsDocked ? 'push' : 'overlay'}
diff --git a/src/components/flyout/flyout.tsx b/src/components/flyout/flyout.tsx
index 23d1c964136..082ba1b1d5c 100644
--- a/src/components/flyout/flyout.tsx
+++ b/src/components/flyout/flyout.tsx
@@ -152,9 +152,9 @@ interface _EuiFlyoutProps {
   pushMinBreakpoint?: EuiBreakpointSize | number;
   style?: CSSProperties;
   /**
-   * Elements to consider part of the flyout and when clicked will not automatically close the flyout (depends on your configuration)
+   * Object of props passed to EuiFocusTrap
    */
-  shards?: EuiFocusTrapProps['shards'];
+  focusTrapProps?: Pick<EuiFocusTrapProps, 'closeOnMouseup' | 'shards'>;
 }
 
 const defaultElement = 'div';
@@ -193,7 +193,7 @@ export const EuiFlyout = forwardRef(
       outsideClickCloses,
       role = 'dialog',
       pushMinBreakpoint = 'l',
-      shards,
+      focusTrapProps,
       ...rest
     }: EuiFlyoutProps<T>,
     ref:
@@ -368,7 +368,7 @@ export const EuiFlyout = forwardRef(
         clickOutsideDisables={!ownFocus}
         onClickOutside={onClickOutside}
         closeOnMouseup={true}
-        shards={shards}
+        {...focusTrapProps}
       >
         <Element
           {...(rest as ComponentPropsWithRef<T>)}
diff --git a/src/components/focus_trap/focus_trap.tsx b/src/components/focus_trap/focus_trap.tsx
index 9a179fa957a..0dbe0e82c79 100644
--- a/src/components/focus_trap/focus_trap.tsx
+++ b/src/components/focus_trap/focus_trap.tsx
@@ -81,8 +81,10 @@ export class EuiFocusTrap extends Component<EuiFocusTrapProps, State> {
   };
 
   onClickOutside = (e: MouseEvent | TouchEvent) => {
-    this.props.onClickOutside && this.props.onClickOutside(e);
     this.removeCloseListener();
+    // Timeout gives precedence to the consumer to initiate close if it has toggle behavior.
+    // Otherwise this event may occur first and the consumer toggle will reopen the flyout.
+    setTimeout(() => this.props.onClickOutside && this.props.onClickOutside(e));
   };
 
   addCloseListener = () => {

From 48536038a9a2c6d0a1fc300ad68b33396fc7d24f Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Tue, 3 May 2022 10:40:26 -0500
Subject: [PATCH 08/19] initial docs

---
 src-docs/src/views/flyout/flyout_example.js | 22 ++++++
 src-docs/src/views/flyout/flyout_shards.js  | 88 +++++++++++++++++++++
 2 files changed, 110 insertions(+)
 create mode 100644 src-docs/src/views/flyout/flyout_shards.js

diff --git a/src-docs/src/views/flyout/flyout_example.js b/src-docs/src/views/flyout/flyout_example.js
index c57729a21ae..ab476ef9062 100644
--- a/src-docs/src/views/flyout/flyout_example.js
+++ b/src-docs/src/views/flyout/flyout_example.js
@@ -36,6 +36,9 @@ const flyoutWithBannerSource = require('!!raw-loader!./flyout_banner');
 import FlyoutPush from './flyout_push';
 const flyoutPushSource = require('!!raw-loader!./flyout_push');
 
+import FlyoutShards from './flyout_shards';
+const flyoutShardsSource = require('!!raw-loader!./flyout_shards');
+
 const flyOutSnippet = `<EuiFlyout onClose={closeFlyout}>
   <EuiFlyoutHeader hasBorder aria-labelledby={flyoutHeadingId}>
     <EuiTitle>
@@ -335,6 +338,25 @@ export const FlyoutExample = {
       demo: <FlyoutPush />,
       props: { EuiFlyout },
     },
+    {
+      title: 'Shards & onMouseUp',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: flyoutShardsSource,
+        },
+      ],
+      text: (
+        <Fragment>
+          <p>
+            Another way to allow for continued interactions of the page content
+            while a flyout is visible, is to change the <EuiCode>type</EuiCode>{' '}
+            from <EuiCode>overlay</EuiCode> to <EuiCode>push</EuiCode>.
+          </p>
+        </Fragment>
+      ),
+      demo: <FlyoutShards />,
+    },
     {
       title: 'Understanding max-width',
       source: [
diff --git a/src-docs/src/views/flyout/flyout_shards.js b/src-docs/src/views/flyout/flyout_shards.js
new file mode 100644
index 00000000000..fa91f6c93f4
--- /dev/null
+++ b/src-docs/src/views/flyout/flyout_shards.js
@@ -0,0 +1,88 @@
+import React, { useState, useRef } from 'react';
+
+import {
+  EuiFlyout,
+  EuiFlyoutBody,
+  EuiFlyoutHeader,
+  EuiButton,
+  EuiTitle,
+  EuiFlyoutFooter,
+} from '../../../../src/components';
+import { useGeneratedHtmlId } from '../../../../src/services';
+
+export default () => {
+  const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
+  const [isFlyoutVisible2, setIsFlyoutVisible2] = useState(false);
+  const shardsFlyoutTitleId = useGeneratedHtmlId({
+    prefix: 'shardsFlyoutTitle',
+  });
+
+  const buttonRef = useRef();
+
+  let flyout;
+
+  if (isFlyoutVisible) {
+    flyout = (
+      <EuiFlyout
+        size="s"
+        onClose={() => setIsFlyoutVisible(false)}
+        aria-labelledby={shardsFlyoutTitleId}
+        ownFocus={false}
+        outsideClickCloses
+        focusTrapProps={{ shards: [buttonRef], closeOnMouseup: false }}
+      >
+        <EuiFlyoutHeader hasBorder>
+          <EuiTitle size="m">
+            <h2 id={shardsFlyoutTitleId}>focusTrapProps.shards</h2>
+          </EuiTitle>
+        </EuiFlyoutHeader>
+        <EuiFlyoutBody />
+        <EuiFlyoutFooter>
+          <EuiButton onClick={() => setIsFlyoutVisible(false)}>Close</EuiButton>
+        </EuiFlyoutFooter>
+      </EuiFlyout>
+    );
+  }
+
+  let flyout2;
+
+  if (isFlyoutVisible2) {
+    flyout = (
+      <EuiFlyout
+        size="s"
+        onClose={() => setIsFlyoutVisible2(false)}
+        aria-labelledby={shardsFlyoutTitleId}
+        ownFocus={false}
+        outsideClickCloses
+      >
+        <EuiFlyoutHeader hasBorder>
+          <EuiTitle size="m">
+            <h2 id={shardsFlyoutTitleId}>closeOnMouseup</h2>
+          </EuiTitle>
+        </EuiFlyoutHeader>
+        <EuiFlyoutBody />
+        <EuiFlyoutFooter>
+          <EuiButton onClick={() => setIsFlyoutVisible2(false)}>
+            Close
+          </EuiButton>
+        </EuiFlyoutFooter>
+      </EuiFlyout>
+    );
+  }
+
+  return (
+    <div>
+      <EuiButton
+        buttonRef={buttonRef}
+        onClick={() => setIsFlyoutVisible(!isFlyoutVisible)}
+      >
+        Toggle flyout with shards
+      </EuiButton>
+      {flyout}
+      <EuiButton onClick={() => setIsFlyoutVisible2(!isFlyoutVisible2)}>
+        Toggle flyout using closeOnMouseup
+      </EuiButton>
+      {flyout2}
+    </div>
+  );
+};

From 6ca7663537b1c1ef712e075ef7f04f4a98c840b0 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Tue, 3 May 2022 10:43:55 -0500
Subject: [PATCH 09/19] clean up

---
 src-docs/src/views/flyout/flyout_example.js | 4 +---
 upcoming_changelogs/5860.md                 | 2 +-
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src-docs/src/views/flyout/flyout_example.js b/src-docs/src/views/flyout/flyout_example.js
index ab476ef9062..ed04f47f9bb 100644
--- a/src-docs/src/views/flyout/flyout_example.js
+++ b/src-docs/src/views/flyout/flyout_example.js
@@ -349,9 +349,7 @@ export const FlyoutExample = {
       text: (
         <Fragment>
           <p>
-            Another way to allow for continued interactions of the page content
-            while a flyout is visible, is to change the <EuiCode>type</EuiCode>{' '}
-            from <EuiCode>overlay</EuiCode> to <EuiCode>push</EuiCode>.
+            <EuiCode>shards</EuiCode> and <EuiCode>closeOnMouseup</EuiCode>.
           </p>
         </Fragment>
       ),
diff --git a/upcoming_changelogs/5860.md b/upcoming_changelogs/5860.md
index 5260dfda4c3..172fbf6f29f 100644
--- a/upcoming_changelogs/5860.md
+++ b/upcoming_changelogs/5860.md
@@ -1,4 +1,4 @@
-- Added the `shards` prop to `EuiFlyout` and `EuiCollapsibleNav` to aid outside click detection
+- Added the `focusTrapProps` prop to `EuiFlyout` to aid outside click detection and closing event
 
 **Bug fixes**
 

From fdfea7df5ea1c54fb215852acd5ad550ea4f8c40 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Tue, 3 May 2022 11:02:57 -0500
Subject: [PATCH 10/19] use focusTrapProps in EuiCollapsibleNav

---
 src/components/collapsible_nav/collapsible_nav.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/components/collapsible_nav/collapsible_nav.tsx b/src/components/collapsible_nav/collapsible_nav.tsx
index 0774446eb25..cccd751b083 100644
--- a/src/components/collapsible_nav/collapsible_nav.tsx
+++ b/src/components/collapsible_nav/collapsible_nav.tsx
@@ -73,6 +73,7 @@ export const EuiCollapsibleNav: FunctionComponent<EuiCollapsibleNavProps> = ({
   outsideClickCloses = true,
   closeButtonPosition = 'outside',
   paddingSize = 'none',
+  focusTrapProps: _focusTrapProps = {},
   ...rest
 }) => {
   const flyoutID = useGeneratedHtmlId({
@@ -81,6 +82,11 @@ export const EuiCollapsibleNav: FunctionComponent<EuiCollapsibleNavProps> = ({
   });
   const buttonRef = useRef();
   const combinedButtonRef = useCombinedRefs([button?.props.ref, buttonRef]);
+  const focusTrapProps: EuiFlyoutProps['focusTrapProps'] = {
+    closeOnMouseup: false,
+    ..._focusTrapProps,
+    shards: [buttonRef, ...(_focusTrapProps.shards || [])],
+  };
 
   /**
    * Setting the initial state of pushed based on the `type` prop
@@ -156,6 +162,7 @@ export const EuiCollapsibleNav: FunctionComponent<EuiCollapsibleNavProps> = ({
       outsideClickCloses={outsideClickCloses}
       closeButtonPosition={closeButtonPosition}
       paddingSize={paddingSize}
+      focusTrapProps={focusTrapProps}
       {...rest}
       // Props dependent on internal docked status
       type={navIsDocked ? 'push' : 'overlay'}

From 8e1a91b28bc10cd4ff503cedf92917b1423a8316 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Tue, 3 May 2022 13:29:16 -0500
Subject: [PATCH 11/19] docs and tests

---
 src-docs/src/views/flyout/flyout_example.js | 14 ++++-
 src-docs/src/views/flyout/flyout_shards.js  | 32 ++++++++--
 src/components/flyout/flyout.spec.tsx       | 69 ++++++++++++++++++++-
 3 files changed, 106 insertions(+), 9 deletions(-)

diff --git a/src-docs/src/views/flyout/flyout_example.js b/src-docs/src/views/flyout/flyout_example.js
index ed04f47f9bb..f2856867747 100644
--- a/src-docs/src/views/flyout/flyout_example.js
+++ b/src-docs/src/views/flyout/flyout_example.js
@@ -339,7 +339,7 @@ export const FlyoutExample = {
       props: { EuiFlyout },
     },
     {
-      title: 'Shards & onMouseUp',
+      title: 'Passing options to EuiFocusTrap',
       source: [
         {
           type: GuideSectionTypes.JS,
@@ -349,7 +349,17 @@ export const FlyoutExample = {
       text: (
         <Fragment>
           <p>
-            <EuiCode>shards</EuiCode> and <EuiCode>closeOnMouseup</EuiCode>.
+            To configure certain options on the underlying{' '}
+            <EuiCode>EuiFocusTrap</EuiCode>, use the
+            <EuiCode>focusTrapProps</EuiCode> prop.
+          </p>
+          <p>
+            <EuiCode>shards</EuiCode> and <EuiCode>closeOnMouseup</EuiCode> each
+            affect how outside clicks will get handled.{' '}
+            <EuiCode>shards</EuiCode> specifies an array of elements that will
+            be considered part of the flyout, preventing close when clicked.
+            <EuiCode>closeOnMouseup</EuiCode> will delay the close callback,
+            allowing time for external toggle buttons to handle close behavior.
           </p>
         </Fragment>
       ),
diff --git a/src-docs/src/views/flyout/flyout_shards.js b/src-docs/src/views/flyout/flyout_shards.js
index fa91f6c93f4..f8be54023ee 100644
--- a/src-docs/src/views/flyout/flyout_shards.js
+++ b/src-docs/src/views/flyout/flyout_shards.js
@@ -7,6 +7,9 @@ import {
   EuiButton,
   EuiTitle,
   EuiFlyoutFooter,
+  EuiSpacer,
+  EuiText,
+  EuiCode,
 } from '../../../../src/components';
 import { useGeneratedHtmlId } from '../../../../src/services';
 
@@ -32,11 +35,17 @@ export default () => {
         focusTrapProps={{ shards: [buttonRef], closeOnMouseup: false }}
       >
         <EuiFlyoutHeader hasBorder>
-          <EuiTitle size="m">
-            <h2 id={shardsFlyoutTitleId}>focusTrapProps.shards</h2>
+          <EuiTitle size="s">
+            <h2 id={shardsFlyoutTitleId}>
+              <EuiCode>focusTrapProps.shards</EuiCode>
+            </h2>
           </EuiTitle>
         </EuiFlyoutHeader>
-        <EuiFlyoutBody />
+        <EuiFlyoutBody>
+          <EuiText>
+            <p>The toggle button is considered part of this flyout.</p>
+          </EuiText>
+        </EuiFlyoutBody>
         <EuiFlyoutFooter>
           <EuiButton onClick={() => setIsFlyoutVisible(false)}>Close</EuiButton>
         </EuiFlyoutFooter>
@@ -54,13 +63,23 @@ export default () => {
         aria-labelledby={shardsFlyoutTitleId}
         ownFocus={false}
         outsideClickCloses
+        focusTrapProps={{ closeOnMouseup: true }}
       >
         <EuiFlyoutHeader hasBorder>
-          <EuiTitle size="m">
-            <h2 id={shardsFlyoutTitleId}>closeOnMouseup</h2>
+          <EuiTitle size="s">
+            <h2 id={shardsFlyoutTitleId}>
+              <EuiCode>focusTrapProps.closeOnMouseup</EuiCode>
+            </h2>
           </EuiTitle>
         </EuiFlyoutHeader>
-        <EuiFlyoutBody />
+        <EuiFlyoutBody>
+          <EuiText>
+            <p>
+              The <EuiCode>onClose</EuiCode> callback will occur on mouseup for
+              outside clicks.
+            </p>
+          </EuiText>
+        </EuiFlyoutBody>
         <EuiFlyoutFooter>
           <EuiButton onClick={() => setIsFlyoutVisible2(false)}>
             Close
@@ -78,6 +97,7 @@ export default () => {
       >
         Toggle flyout with shards
       </EuiButton>
+      <EuiSpacer />
       {flyout}
       <EuiButton onClick={() => setIsFlyoutVisible2(!isFlyoutVisible2)}>
         Toggle flyout using closeOnMouseup
diff --git a/src/components/flyout/flyout.spec.tsx b/src/components/flyout/flyout.spec.tsx
index 930dc65f706..c2a1c185687 100644
--- a/src/components/flyout/flyout.spec.tsx
+++ b/src/components/flyout/flyout.spec.tsx
@@ -8,7 +8,7 @@
 
 /// <reference types="../../../cypress/support"/>
 
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 
 import { EuiFlyout } from './flyout';
 
@@ -35,6 +35,37 @@ const Flyout = ({ children = childrenDefault }) => {
   );
 };
 
+const FlyoutComplex = ({ children = childrenDefault, useShards = true }) => {
+  const buttonRef = useRef();
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      {isOpen ? (
+        <EuiFlyout
+          data-test-subj="flyoutSpec"
+          onClose={() => setIsOpen(false)}
+          ownFocus={false}
+          outsideClickCloses={true}
+          focusTrapProps={{
+            shards: useShards ? [buttonRef] : [],
+            closeOnMouseup: !useShards,
+          }}
+        >
+          {children}
+        </EuiFlyout>
+      ) : null}
+      <button
+        ref={buttonRef}
+        data-test-subj="toggle"
+        onClick={() => setIsOpen((isOpen) => !isOpen)}
+      >
+        Toggle
+      </button>
+    </>
+  );
+};
+
 describe('EuiFlyout', () => {
   describe('Focus behavior', () => {
     it('focuses the close button by default', () => {
@@ -95,5 +126,41 @@ describe('EuiFlyout', () => {
           expect(cy.get('[data-test-subj="flyoutSpec"]').should('exist'));
         });
     });
+
+    it('does not interfere when a shard is clicked', () => {
+      cy.mount(<FlyoutComplex />);
+      cy.get('[data-test-subj="toggle"]')
+        .realClick()
+        .then(() => {
+          expect(cy.get('[data-test-subj="flyoutSpec"]').should('exist'));
+        })
+        .then(() => {
+          cy.get('[data-test-subj="toggle"]')
+            .realClick()
+            .then(() => {
+              expect(
+                cy.get('[data-test-subj="flyoutSpec"]').should('not.exist')
+              );
+            });
+        });
+    });
+
+    it('can delay the close callback', () => {
+      cy.mount(<FlyoutComplex useShards={false} />);
+      cy.get('[data-test-subj="toggle"]')
+        .realClick()
+        .then(() => {
+          expect(cy.get('[data-test-subj="flyoutSpec"]').should('exist'));
+        })
+        .then(() => {
+          cy.get('[data-test-subj="toggle"]')
+            .realClick()
+            .then(() => {
+              expect(
+                cy.get('[data-test-subj="flyoutSpec"]').should('not.exist')
+              );
+            });
+        });
+    });
   });
 });

From 4df8b32a27cb546592a79d7777ff01bf5bd55ce9 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Tue, 3 May 2022 13:51:08 -0500
Subject: [PATCH 12/19] default to mousedown

---
 src/components/collapsible_nav/collapsible_nav.tsx | 1 -
 src/components/flyout/flyout.tsx                   | 5 +++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/collapsible_nav/collapsible_nav.tsx b/src/components/collapsible_nav/collapsible_nav.tsx
index cccd751b083..ffac8a407e9 100644
--- a/src/components/collapsible_nav/collapsible_nav.tsx
+++ b/src/components/collapsible_nav/collapsible_nav.tsx
@@ -83,7 +83,6 @@ export const EuiCollapsibleNav: FunctionComponent<EuiCollapsibleNavProps> = ({
   const buttonRef = useRef();
   const combinedButtonRef = useCombinedRefs([button?.props.ref, buttonRef]);
   const focusTrapProps: EuiFlyoutProps['focusTrapProps'] = {
-    closeOnMouseup: false,
     ..._focusTrapProps,
     shards: [buttonRef, ...(_focusTrapProps.shards || [])],
   };
diff --git a/src/components/flyout/flyout.tsx b/src/components/flyout/flyout.tsx
index 082ba1b1d5c..0b11a380d58 100644
--- a/src/components/flyout/flyout.tsx
+++ b/src/components/flyout/flyout.tsx
@@ -152,7 +152,9 @@ interface _EuiFlyoutProps {
   pushMinBreakpoint?: EuiBreakpointSize | number;
   style?: CSSProperties;
   /**
-   * Object of props passed to EuiFocusTrap
+   * Object of props passed to EuiFocusTrap.
+   * Use `shards` to allow clicks on the provided external elements.
+   * Use `closeOnMouseup` to delay the close callback to prevent conflicts with toggle buttons.
    */
   focusTrapProps?: Pick<EuiFocusTrapProps, 'closeOnMouseup' | 'shards'>;
 }
@@ -367,7 +369,6 @@ export const EuiFlyout = forwardRef(
         disabled={isPushed}
         clickOutsideDisables={!ownFocus}
         onClickOutside={onClickOutside}
-        closeOnMouseup={true}
         {...focusTrapProps}
       >
         <Element

From ab60381dffde45fa9351da3f955352d7c0d823bc Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Tue, 3 May 2022 13:58:47 -0500
Subject: [PATCH 13/19] consolidate spec children

---
 .../collapsible_nav/collapsible_nav.spec.tsx     | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

diff --git a/src/components/collapsible_nav/collapsible_nav.spec.tsx b/src/components/collapsible_nav/collapsible_nav.spec.tsx
index a67152f426a..6b540d3d70d 100644
--- a/src/components/collapsible_nav/collapsible_nav.spec.tsx
+++ b/src/components/collapsible_nav/collapsible_nav.spec.tsx
@@ -14,16 +14,7 @@ import { EuiCollapsibleNav } from './collapsible_nav';
 import { EuiHeader, EuiHeaderSectionItemButton } from '../header';
 import { EuiIcon } from '../icon';
 
-const childrenDefault = (
-  <>
-    <button data-test-subj="itemA">Item A</button>
-    <button data-test-subj="itemB">Item B</button>
-    <button data-test-subj="itemC">Item C</button>
-    <input data-test-subj="itemD" />
-  </>
-);
-
-const Nav = ({ children = childrenDefault }) => {
+const Nav = () => {
   const [isOpen, setIsOpen] = useState(false);
 
   return (
@@ -48,7 +39,10 @@ const Nav = ({ children = childrenDefault }) => {
               }
               onClose={() => setIsOpen(false)}
             >
-              {children}
+              <button data-test-subj="itemA">Item A</button>
+              <button data-test-subj="itemB">Item B</button>
+              <button data-test-subj="itemC">Item C</button>
+              <input data-test-subj="itemD" />
             </EuiCollapsibleNav>,
           ],
         },

From 9dbc340209adc7f3703bc93ec933080959fb1f53 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Tue, 3 May 2022 14:46:36 -0500
Subject: [PATCH 14/19] cypress tests

---
 .../collapsible_nav/collapsible_nav.spec.tsx  | 41 +++-----
 src/components/flyout/flyout.spec.tsx         | 99 +++++++++----------
 src/components/focus_trap/focus_trap.spec.tsx | 85 +++++++++++++++-
 3 files changed, 144 insertions(+), 81 deletions(-)

diff --git a/src/components/collapsible_nav/collapsible_nav.spec.tsx b/src/components/collapsible_nav/collapsible_nav.spec.tsx
index 6b540d3d70d..d32574e0057 100644
--- a/src/components/collapsible_nav/collapsible_nav.spec.tsx
+++ b/src/components/collapsible_nav/collapsible_nav.spec.tsx
@@ -56,46 +56,27 @@ describe('EuiCollapsibleNav', () => {
     describe('Toggle button behavior', () => {
       it('opens and closes nav when the main button is clicked', () => {
         cy.mount(<Nav />);
-        cy.wait(400);
-        cy.get('[data-test-subj="navSpecButton"]')
-          .realClick()
-          .then(() => {
-            expect(cy.get('#navSpec').should('exist'));
-
-            cy.get('[data-test-subj="navSpecButton"]')
-              .realClick()
-              .then(() => {
-                expect(cy.get('#navSpec').should('not.exist'));
-              });
-          });
+        cy.wait(400); // Wait for the button to be clickable
+        cy.get('[data-test-subj="navSpecButton"]').realClick();
+        expect(cy.get('#navSpec').should('exist'));
+        cy.get('[data-test-subj="navSpecButton"]').realClick();
+        expect(cy.get('#navSpec').should('not.exist'));
       });
 
       it('closes the nav when the overlay mask is clicked', () => {
         cy.mount(<Nav />);
         cy.wait(400);
-        cy.get('[data-test-subj="navSpecButton"]')
-          .realClick()
-          .then(() => {
-            cy.get('.euiOverlayMask')
-              .realClick()
-              .then(() => {
-                expect(cy.get('#navSpec').should('not.exist'));
-              });
-          });
+        cy.get('[data-test-subj="navSpecButton"]').realClick();
+        cy.get('.euiOverlayMask').realClick();
+        expect(cy.get('#navSpec').should('not.exist'));
       });
 
       it('closes the nav when the close button is clicked', () => {
         cy.mount(<Nav />);
         cy.wait(400);
-        cy.get('[data-test-subj="navSpecButton"]')
-          .realClick()
-          .then(() => {
-            cy.get('[data-test-subj="euiFlyoutCloseButton"]')
-              .realClick()
-              .then(() => {
-                expect(cy.get('#navSpec').should('not.exist'));
-              });
-          });
+        cy.get('[data-test-subj="navSpecButton"]').realClick();
+        cy.get('[data-test-subj="euiFlyoutCloseButton"]').realClick();
+        expect(cy.get('#navSpec').should('not.exist'));
       });
     });
   });
diff --git a/src/components/flyout/flyout.spec.tsx b/src/components/flyout/flyout.spec.tsx
index c2a1c185687..a329b98d1e7 100644
--- a/src/components/flyout/flyout.spec.tsx
+++ b/src/components/flyout/flyout.spec.tsx
@@ -35,37 +35,6 @@ const Flyout = ({ children = childrenDefault }) => {
   );
 };
 
-const FlyoutComplex = ({ children = childrenDefault, useShards = true }) => {
-  const buttonRef = useRef();
-  const [isOpen, setIsOpen] = useState(false);
-
-  return (
-    <>
-      {isOpen ? (
-        <EuiFlyout
-          data-test-subj="flyoutSpec"
-          onClose={() => setIsOpen(false)}
-          ownFocus={false}
-          outsideClickCloses={true}
-          focusTrapProps={{
-            shards: useShards ? [buttonRef] : [],
-            closeOnMouseup: !useShards,
-          }}
-        >
-          {children}
-        </EuiFlyout>
-      ) : null}
-      <button
-        ref={buttonRef}
-        data-test-subj="toggle"
-        onClick={() => setIsOpen((isOpen) => !isOpen)}
-      >
-        Toggle
-      </button>
-    </>
-  );
-};
-
 describe('EuiFlyout', () => {
   describe('Focus behavior', () => {
     it('focuses the close button by default', () => {
@@ -126,40 +95,70 @@ describe('EuiFlyout', () => {
           expect(cy.get('[data-test-subj="flyoutSpec"]').should('exist'));
         });
     });
+  });
 
-    it('does not interfere when a shard is clicked', () => {
+  describe('focusTrapProps', () => {
+    const FlyoutComplex = ({
+      children = childrenDefault,
+      useShards = true,
+      focusTrapProps = {},
+    }) => {
+      const outsideRef = useRef();
+      const [isOpen, setIsOpen] = useState(false);
+
+      return (
+        <>
+          {isOpen ? (
+            <EuiFlyout
+              data-test-subj="flyoutSpec"
+              onClose={() => setIsOpen(false)}
+              ownFocus={false}
+              outsideClickCloses={true}
+              focusTrapProps={{
+                shards: useShards ? [outsideRef] : [],
+                ...focusTrapProps,
+              }}
+            >
+              {children}
+            </EuiFlyout>
+          ) : null}
+          <button
+            data-test-subj="toggle"
+            onClick={() => setIsOpen((isOpen) => !isOpen)}
+          >
+            Toggle
+          </button>
+          <button ref={outsideRef} data-test-subj="outside">
+            Outside
+          </button>
+        </>
+      );
+    };
+    it('does not close the flyout when a shard is clicked', () => {
       cy.mount(<FlyoutComplex />);
       cy.get('[data-test-subj="toggle"]')
         .realClick()
         .then(() => {
           expect(cy.get('[data-test-subj="flyoutSpec"]').should('exist'));
-        })
+        });
+      cy.get('[data-test-subj="outside"]')
+        .realClick()
         .then(() => {
-          cy.get('[data-test-subj="toggle"]')
-            .realClick()
-            .then(() => {
-              expect(
-                cy.get('[data-test-subj="flyoutSpec"]').should('not.exist')
-              );
-            });
+          expect(cy.get('[data-test-subj="flyoutSpec"]').should('exist'));
         });
     });
 
-    it('can delay the close callback', () => {
-      cy.mount(<FlyoutComplex useShards={false} />);
+    it('delays the close callback when the focus trap is set to close on mouseup instead of mousedown', () => {
+      cy.mount(<FlyoutComplex focusTrapProps={{ closeOnMouseup: true }} />);
       cy.get('[data-test-subj="toggle"]')
         .realClick()
         .then(() => {
           expect(cy.get('[data-test-subj="flyoutSpec"]').should('exist'));
-        })
+        });
+      cy.get('[data-test-subj="toggle"]')
+        .realClick()
         .then(() => {
-          cy.get('[data-test-subj="toggle"]')
-            .realClick()
-            .then(() => {
-              expect(
-                cy.get('[data-test-subj="flyoutSpec"]').should('not.exist')
-              );
-            });
+          expect(cy.get('[data-test-subj="flyoutSpec"]').should('not.exist'));
         });
     });
   });
diff --git a/src/components/focus_trap/focus_trap.spec.tsx b/src/components/focus_trap/focus_trap.spec.tsx
index 7687438a486..ee45bdb0047 100644
--- a/src/components/focus_trap/focus_trap.spec.tsx
+++ b/src/components/focus_trap/focus_trap.spec.tsx
@@ -8,10 +8,40 @@
 
 /// <reference types="../../../cypress/support"/>
 
-import React from 'react';
+import React, { useRef } from 'react';
 import { EuiFocusTrap } from './focus_trap';
 import { EuiPortal } from '../portal';
 
+const Trap = ({
+  onClickOutside,
+  shards,
+  closeOnMouseup,
+}: {
+  onClickOutside?: any;
+  shards?: boolean;
+  closeOnMouseup?: boolean;
+}) => {
+  const buttonRef = useRef();
+  return (
+    <div>
+      <EuiFocusTrap
+        onClickOutside={onClickOutside}
+        shards={shards ? [buttonRef] : []}
+        closeOnMouseup={closeOnMouseup}
+      >
+        <div data-test-subj="container">
+          <input data-test-subj="input" />
+          <input data-test-subj="input2" />
+        </div>
+      </EuiFocusTrap>
+      <button ref={buttonRef} data-test-subj="outside">
+        outside the focus trap
+      </button>
+      <button data-test-subj="outside2">also outside the focus trap</button>
+    </div>
+  );
+};
+
 describe('EuiFocusTrap', () => {
   describe('focus', () => {
     it('is set on the first focusable element by default', () => {
@@ -157,4 +187,57 @@ describe('EuiFocusTrap', () => {
       cy.get('[data-focus-lock-disabled=false]').should('not.exist');
     });
   });
+
+  describe('outside click handling', () => {
+    it('calls the callback on mousedown', () => {
+      const onClickOutside = cy.stub();
+      cy.mount(<Trap onClickOutside={onClickOutside} />);
+
+      // The existence of `data-focus-lock-disabled=false` indicates that the trap is enabled.
+      cy.get('[data-focus-lock-disabled=false]');
+
+      cy.get('[data-test-subj=outside]')
+        .realMouseDown()
+        .then(() => {
+          expect(onClickOutside).to.be.called;
+        });
+    });
+
+    it('calls the callback on mouseup when using closeOnMouseup', () => {
+      const onClickOutside = cy.stub();
+      cy.mount(<Trap onClickOutside={onClickOutside} closeOnMouseup />);
+
+      cy.get('[data-focus-lock-disabled=false]');
+
+      cy.get('[data-test-subj=outside]')
+        .realMouseDown()
+        .then(() => {
+          expect(onClickOutside).to.not.be.called;
+        });
+      cy.get('[data-test-subj=outside]')
+        .click() // real events not  working here
+        .then(() => {
+          expect(onClickOutside).to.be.called;
+        });
+    });
+
+    it('dose not call the callback if the element is a shard', () => {
+      const onClickOutside = cy.stub();
+      cy.mount(<Trap onClickOutside={onClickOutside} shards />);
+
+      cy.get('[data-focus-lock-disabled=false]');
+
+      cy.get('[data-test-subj=outside]')
+        .realMouseDown()
+        .then(() => {
+          expect(onClickOutside).to.not.be.called;
+        });
+      // But still calls if the element is not a shard
+      cy.get('[data-test-subj=outside2]')
+        .realMouseDown()
+        .then(() => {
+          expect(onClickOutside).to.be.called;
+        });
+    });
+  });
 });

From 31d35dfd2a9edc4758a4b3757fab148faf7dc4e8 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Tue, 3 May 2022 15:51:02 -0500
Subject: [PATCH 15/19] update function names

---
 src/components/focus_trap/focus_trap.tsx | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/focus_trap/focus_trap.tsx b/src/components/focus_trap/focus_trap.tsx
index 0dbe0e82c79..5951b68ff0b 100644
--- a/src/components/focus_trap/focus_trap.tsx
+++ b/src/components/focus_trap/focus_trap.tsx
@@ -69,7 +69,7 @@ export class EuiFocusTrap extends Component<EuiFocusTrapProps, State> {
   }
 
   componentWillUnmount() {
-    this.removeCloseListener();
+    this.removeMouseupListener();
   }
 
   // Programmatically sets focus on a nested DOM node; optional
@@ -80,21 +80,21 @@ export class EuiFocusTrap extends Component<EuiFocusTrapProps, State> {
     node.setAttribute('data-autofocus', 'true');
   };
 
-  onClickOutside = (e: MouseEvent | TouchEvent) => {
-    this.removeCloseListener();
+  onMouseupOutside = (e: MouseEvent | TouchEvent) => {
+    this.removeMouseupListener();
     // Timeout gives precedence to the consumer to initiate close if it has toggle behavior.
     // Otherwise this event may occur first and the consumer toggle will reopen the flyout.
-    setTimeout(() => this.props.onClickOutside && this.props.onClickOutside(e));
+    setTimeout(() => this.props.onClickOutside?.(e));
   };
 
-  addCloseListener = () => {
-    document.addEventListener('mouseup', this.onClickOutside);
-    document.addEventListener('touchend', this.onClickOutside);
+  addMouseupListener = () => {
+    document.addEventListener('mouseup', this.onMouseupOutside);
+    document.addEventListener('touchend', this.onMouseupOutside);
   };
 
-  removeCloseListener = () => {
-    document.removeEventListener('mouseup', this.onClickOutside);
-    document.removeEventListener('touchend', this.onClickOutside);
+  removeMouseupListener = () => {
+    document.removeEventListener('mouseup', this.onMouseupOutside);
+    document.removeEventListener('touchend', this.onMouseupOutside);
   };
 
   handleOutsideClick: ReactFocusOnProps['onClickOutside'] = (...args) => {

From 4f349d48a6ec6653ff345bf9b05e4e20fdeb90f8 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Tue, 3 May 2022 15:51:25 -0500
Subject: [PATCH 16/19] remove flyout tests

---
 src/components/flyout/flyout.spec.tsx | 68 +--------------------------
 1 file changed, 1 insertion(+), 67 deletions(-)

diff --git a/src/components/flyout/flyout.spec.tsx b/src/components/flyout/flyout.spec.tsx
index a329b98d1e7..930dc65f706 100644
--- a/src/components/flyout/flyout.spec.tsx
+++ b/src/components/flyout/flyout.spec.tsx
@@ -8,7 +8,7 @@
 
 /// <reference types="../../../cypress/support"/>
 
-import React, { useRef, useState } from 'react';
+import React, { useState } from 'react';
 
 import { EuiFlyout } from './flyout';
 
@@ -96,70 +96,4 @@ describe('EuiFlyout', () => {
         });
     });
   });
-
-  describe('focusTrapProps', () => {
-    const FlyoutComplex = ({
-      children = childrenDefault,
-      useShards = true,
-      focusTrapProps = {},
-    }) => {
-      const outsideRef = useRef();
-      const [isOpen, setIsOpen] = useState(false);
-
-      return (
-        <>
-          {isOpen ? (
-            <EuiFlyout
-              data-test-subj="flyoutSpec"
-              onClose={() => setIsOpen(false)}
-              ownFocus={false}
-              outsideClickCloses={true}
-              focusTrapProps={{
-                shards: useShards ? [outsideRef] : [],
-                ...focusTrapProps,
-              }}
-            >
-              {children}
-            </EuiFlyout>
-          ) : null}
-          <button
-            data-test-subj="toggle"
-            onClick={() => setIsOpen((isOpen) => !isOpen)}
-          >
-            Toggle
-          </button>
-          <button ref={outsideRef} data-test-subj="outside">
-            Outside
-          </button>
-        </>
-      );
-    };
-    it('does not close the flyout when a shard is clicked', () => {
-      cy.mount(<FlyoutComplex />);
-      cy.get('[data-test-subj="toggle"]')
-        .realClick()
-        .then(() => {
-          expect(cy.get('[data-test-subj="flyoutSpec"]').should('exist'));
-        });
-      cy.get('[data-test-subj="outside"]')
-        .realClick()
-        .then(() => {
-          expect(cy.get('[data-test-subj="flyoutSpec"]').should('exist'));
-        });
-    });
-
-    it('delays the close callback when the focus trap is set to close on mouseup instead of mousedown', () => {
-      cy.mount(<FlyoutComplex focusTrapProps={{ closeOnMouseup: true }} />);
-      cy.get('[data-test-subj="toggle"]')
-        .realClick()
-        .then(() => {
-          expect(cy.get('[data-test-subj="flyoutSpec"]').should('exist'));
-        });
-      cy.get('[data-test-subj="toggle"]')
-        .realClick()
-        .then(() => {
-          expect(cy.get('[data-test-subj="flyoutSpec"]').should('not.exist'));
-        });
-    });
-  });
 });

From 41a02a37a1e715d4d0e5d863750912ed98609fa3 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Tue, 3 May 2022 15:53:06 -0500
Subject: [PATCH 17/19] update focus_trap cypress tests

---
 src/components/focus_trap/focus_trap.spec.tsx | 69 +++++++++----------
 src/components/focus_trap/focus_trap.tsx      |  2 +-
 2 files changed, 32 insertions(+), 39 deletions(-)

diff --git a/src/components/focus_trap/focus_trap.spec.tsx b/src/components/focus_trap/focus_trap.spec.tsx
index ee45bdb0047..d8a8988ac9e 100644
--- a/src/components/focus_trap/focus_trap.spec.tsx
+++ b/src/components/focus_trap/focus_trap.spec.tsx
@@ -12,36 +12,6 @@ import React, { useRef } from 'react';
 import { EuiFocusTrap } from './focus_trap';
 import { EuiPortal } from '../portal';
 
-const Trap = ({
-  onClickOutside,
-  shards,
-  closeOnMouseup,
-}: {
-  onClickOutside?: any;
-  shards?: boolean;
-  closeOnMouseup?: boolean;
-}) => {
-  const buttonRef = useRef();
-  return (
-    <div>
-      <EuiFocusTrap
-        onClickOutside={onClickOutside}
-        shards={shards ? [buttonRef] : []}
-        closeOnMouseup={closeOnMouseup}
-      >
-        <div data-test-subj="container">
-          <input data-test-subj="input" />
-          <input data-test-subj="input2" />
-        </div>
-      </EuiFocusTrap>
-      <button ref={buttonRef} data-test-subj="outside">
-        outside the focus trap
-      </button>
-      <button data-test-subj="outside2">also outside the focus trap</button>
-    </div>
-  );
-};
-
 describe('EuiFocusTrap', () => {
   describe('focus', () => {
     it('is set on the first focusable element by default', () => {
@@ -189,13 +159,40 @@ describe('EuiFocusTrap', () => {
   });
 
   describe('outside click handling', () => {
+    const Trap = ({
+      onClickOutside,
+      shards,
+      closeOnMouseup,
+    }: {
+      onClickOutside?: any;
+      shards?: boolean;
+      closeOnMouseup?: boolean;
+    }) => {
+      const buttonRef = useRef();
+      return (
+        <div>
+          <EuiFocusTrap
+            onClickOutside={onClickOutside}
+            shards={shards ? [buttonRef] : []}
+            closeOnMouseup={closeOnMouseup}
+          >
+            <div data-test-subj="container">
+              <input data-test-subj="input" />
+              <input data-test-subj="input2" />
+            </div>
+          </EuiFocusTrap>
+          <button ref={buttonRef} data-test-subj="outside">
+            outside the focus trap
+          </button>
+          <button data-test-subj="outside2">also outside the focus trap</button>
+        </div>
+      );
+    };
+
     it('calls the callback on mousedown', () => {
       const onClickOutside = cy.stub();
       cy.mount(<Trap onClickOutside={onClickOutside} />);
 
-      // The existence of `data-focus-lock-disabled=false` indicates that the trap is enabled.
-      cy.get('[data-focus-lock-disabled=false]');
-
       cy.get('[data-test-subj=outside]')
         .realMouseDown()
         .then(() => {
@@ -207,8 +204,6 @@ describe('EuiFocusTrap', () => {
       const onClickOutside = cy.stub();
       cy.mount(<Trap onClickOutside={onClickOutside} closeOnMouseup />);
 
-      cy.get('[data-focus-lock-disabled=false]');
-
       cy.get('[data-test-subj=outside]')
         .realMouseDown()
         .then(() => {
@@ -221,12 +216,10 @@ describe('EuiFocusTrap', () => {
         });
     });
 
-    it('dose not call the callback if the element is a shard', () => {
+    it('does not call the callback if the element is a shard', () => {
       const onClickOutside = cy.stub();
       cy.mount(<Trap onClickOutside={onClickOutside} shards />);
 
-      cy.get('[data-focus-lock-disabled=false]');
-
       cy.get('[data-test-subj=outside]')
         .realMouseDown()
         .then(() => {
diff --git a/src/components/focus_trap/focus_trap.tsx b/src/components/focus_trap/focus_trap.tsx
index 5951b68ff0b..d7429558135 100644
--- a/src/components/focus_trap/focus_trap.tsx
+++ b/src/components/focus_trap/focus_trap.tsx
@@ -104,7 +104,7 @@ export class EuiFocusTrap extends Component<EuiFocusTrapProps, State> {
     }
 
     if (onClickOutside) {
-      closeOnMouseup ? this.addCloseListener() : onClickOutside(...args);
+      closeOnMouseup ? this.addMouseupListener() : onClickOutside(...args);
     }
   };
 

From a0971598dbc98b14eca054764436ada0a97da248 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Tue, 3 May 2022 15:55:00 -0500
Subject: [PATCH 18/19] remove docs

---
 src-docs/src/views/flyout/flyout_example.js |  30 ------
 src-docs/src/views/flyout/flyout_shards.js  | 108 --------------------
 2 files changed, 138 deletions(-)
 delete mode 100644 src-docs/src/views/flyout/flyout_shards.js

diff --git a/src-docs/src/views/flyout/flyout_example.js b/src-docs/src/views/flyout/flyout_example.js
index f2856867747..c57729a21ae 100644
--- a/src-docs/src/views/flyout/flyout_example.js
+++ b/src-docs/src/views/flyout/flyout_example.js
@@ -36,9 +36,6 @@ const flyoutWithBannerSource = require('!!raw-loader!./flyout_banner');
 import FlyoutPush from './flyout_push';
 const flyoutPushSource = require('!!raw-loader!./flyout_push');
 
-import FlyoutShards from './flyout_shards';
-const flyoutShardsSource = require('!!raw-loader!./flyout_shards');
-
 const flyOutSnippet = `<EuiFlyout onClose={closeFlyout}>
   <EuiFlyoutHeader hasBorder aria-labelledby={flyoutHeadingId}>
     <EuiTitle>
@@ -338,33 +335,6 @@ export const FlyoutExample = {
       demo: <FlyoutPush />,
       props: { EuiFlyout },
     },
-    {
-      title: 'Passing options to EuiFocusTrap',
-      source: [
-        {
-          type: GuideSectionTypes.JS,
-          code: flyoutShardsSource,
-        },
-      ],
-      text: (
-        <Fragment>
-          <p>
-            To configure certain options on the underlying{' '}
-            <EuiCode>EuiFocusTrap</EuiCode>, use the
-            <EuiCode>focusTrapProps</EuiCode> prop.
-          </p>
-          <p>
-            <EuiCode>shards</EuiCode> and <EuiCode>closeOnMouseup</EuiCode> each
-            affect how outside clicks will get handled.{' '}
-            <EuiCode>shards</EuiCode> specifies an array of elements that will
-            be considered part of the flyout, preventing close when clicked.
-            <EuiCode>closeOnMouseup</EuiCode> will delay the close callback,
-            allowing time for external toggle buttons to handle close behavior.
-          </p>
-        </Fragment>
-      ),
-      demo: <FlyoutShards />,
-    },
     {
       title: 'Understanding max-width',
       source: [
diff --git a/src-docs/src/views/flyout/flyout_shards.js b/src-docs/src/views/flyout/flyout_shards.js
deleted file mode 100644
index f8be54023ee..00000000000
--- a/src-docs/src/views/flyout/flyout_shards.js
+++ /dev/null
@@ -1,108 +0,0 @@
-import React, { useState, useRef } from 'react';
-
-import {
-  EuiFlyout,
-  EuiFlyoutBody,
-  EuiFlyoutHeader,
-  EuiButton,
-  EuiTitle,
-  EuiFlyoutFooter,
-  EuiSpacer,
-  EuiText,
-  EuiCode,
-} from '../../../../src/components';
-import { useGeneratedHtmlId } from '../../../../src/services';
-
-export default () => {
-  const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
-  const [isFlyoutVisible2, setIsFlyoutVisible2] = useState(false);
-  const shardsFlyoutTitleId = useGeneratedHtmlId({
-    prefix: 'shardsFlyoutTitle',
-  });
-
-  const buttonRef = useRef();
-
-  let flyout;
-
-  if (isFlyoutVisible) {
-    flyout = (
-      <EuiFlyout
-        size="s"
-        onClose={() => setIsFlyoutVisible(false)}
-        aria-labelledby={shardsFlyoutTitleId}
-        ownFocus={false}
-        outsideClickCloses
-        focusTrapProps={{ shards: [buttonRef], closeOnMouseup: false }}
-      >
-        <EuiFlyoutHeader hasBorder>
-          <EuiTitle size="s">
-            <h2 id={shardsFlyoutTitleId}>
-              <EuiCode>focusTrapProps.shards</EuiCode>
-            </h2>
-          </EuiTitle>
-        </EuiFlyoutHeader>
-        <EuiFlyoutBody>
-          <EuiText>
-            <p>The toggle button is considered part of this flyout.</p>
-          </EuiText>
-        </EuiFlyoutBody>
-        <EuiFlyoutFooter>
-          <EuiButton onClick={() => setIsFlyoutVisible(false)}>Close</EuiButton>
-        </EuiFlyoutFooter>
-      </EuiFlyout>
-    );
-  }
-
-  let flyout2;
-
-  if (isFlyoutVisible2) {
-    flyout = (
-      <EuiFlyout
-        size="s"
-        onClose={() => setIsFlyoutVisible2(false)}
-        aria-labelledby={shardsFlyoutTitleId}
-        ownFocus={false}
-        outsideClickCloses
-        focusTrapProps={{ closeOnMouseup: true }}
-      >
-        <EuiFlyoutHeader hasBorder>
-          <EuiTitle size="s">
-            <h2 id={shardsFlyoutTitleId}>
-              <EuiCode>focusTrapProps.closeOnMouseup</EuiCode>
-            </h2>
-          </EuiTitle>
-        </EuiFlyoutHeader>
-        <EuiFlyoutBody>
-          <EuiText>
-            <p>
-              The <EuiCode>onClose</EuiCode> callback will occur on mouseup for
-              outside clicks.
-            </p>
-          </EuiText>
-        </EuiFlyoutBody>
-        <EuiFlyoutFooter>
-          <EuiButton onClick={() => setIsFlyoutVisible2(false)}>
-            Close
-          </EuiButton>
-        </EuiFlyoutFooter>
-      </EuiFlyout>
-    );
-  }
-
-  return (
-    <div>
-      <EuiButton
-        buttonRef={buttonRef}
-        onClick={() => setIsFlyoutVisible(!isFlyoutVisible)}
-      >
-        Toggle flyout with shards
-      </EuiButton>
-      <EuiSpacer />
-      {flyout}
-      <EuiButton onClick={() => setIsFlyoutVisible2(!isFlyoutVisible2)}>
-        Toggle flyout using closeOnMouseup
-      </EuiButton>
-      {flyout2}
-    </div>
-  );
-};

From 271606da711f24796165826a1d2502501c9b1f21 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Tue, 3 May 2022 16:31:56 -0500
Subject: [PATCH 19/19] code comments

---
 src/components/flyout/flyout.tsx         | 4 ++--
 src/components/focus_trap/focus_trap.tsx | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/flyout/flyout.tsx b/src/components/flyout/flyout.tsx
index 0b11a380d58..f79f5b5a241 100644
--- a/src/components/flyout/flyout.tsx
+++ b/src/components/flyout/flyout.tsx
@@ -153,8 +153,8 @@ interface _EuiFlyoutProps {
   style?: CSSProperties;
   /**
    * Object of props passed to EuiFocusTrap.
-   * Use `shards` to allow clicks on the provided external elements.
-   * Use `closeOnMouseup` to delay the close callback to prevent conflicts with toggle buttons.
+   * `shards` specifies an array of elements that will be considered part of the flyout, preventing the flyout from being closed when clicked.
+   * `closeOnMouseup` will delay the close callback, allowing time for external toggle buttons to handle close behavior.
    */
   focusTrapProps?: Pick<EuiFocusTrapProps, 'closeOnMouseup' | 'shards'>;
 }
diff --git a/src/components/focus_trap/focus_trap.tsx b/src/components/focus_trap/focus_trap.tsx
index d7429558135..b210e9f902c 100644
--- a/src/components/focus_trap/focus_trap.tsx
+++ b/src/components/focus_trap/focus_trap.tsx
@@ -17,7 +17,8 @@ export type FocusTarget = ElementTarget;
 
 interface EuiFocusTrapInterface {
   /**
-   * Whether `onClickOutside` should be called on mouseup instead of mousedown
+   * Whether `onClickOutside` should be called on mouseup instead of mousedown.
+   * This flag can be used to prevent conflicts with outside toggle buttons by delaying the closing click callback.
    */
   closeOnMouseup?: boolean;
   /**