Skip to content

[EuiModal] Support closing with outside click #9137

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
acstll merged 5 commits into from
Oct 23, 2025
Merged

[EuiModal] Support closing with outside click #9137

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e9e19bf
[EuiModal] Support closing with outside click
acstll Oct 22, 2025
5e509e7
[EuiModal][Tests] outsideClickCloses prop
acstll Oct 22, 2025
aa1382b
[Docs][EuiModal] Remove outside click warning
acstll Oct 22, 2025
a21e03c
Changelog
acstll Oct 22, 2025
c77692a
[Feedback] Remove any
acstll Oct 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions packages/eui/changelogs/upcoming/9137.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
- Updated `EuiModal` to support closing on outside click, via the new `outsideClickCloses` prop

2 changes: 2 additions & 0 deletions packages/eui/src/components/modal/confirm_modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,8 @@ export interface EuiConfirmModalProps
event?:
| React.KeyboardEvent<HTMLDivElement>
| React.MouseEvent<HTMLButtonElement>
| MouseEvent
| TouchEvent
) => void;
onConfirm?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
confirmButtonDisabled?: boolean;
Expand Down
23 changes: 23 additions & 0 deletions packages/eui/src/components/modal/modal.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,11 @@ import { EuiPopover } from '../popover';
const Modal = ({
content,
hasManualReturnFocus,
outsideClickCloses,
}: {
content?: ReactNode;
hasManualReturnFocus?: boolean;
outsideClickCloses?: boolean;
}) => {
const manualTriggerRef = useRef<HTMLButtonElement>(null);
const [isModalVisible, setIsModalVisible] = useState(false);
Expand All @@ -53,6 +55,7 @@ const Modal = ({
onClose: closeModal,
children: null,
focusTrapProps,
outsideClickCloses,
};

return (
Expand Down Expand Up @@ -194,5 +197,25 @@ describe('EuiModal', () => {
cy.focused().contains('Show confirm modal');
});
});

describe('outside click', () => {
it('closes the modal when outsideClickCloses is true', () => {
cy.mount(<Modal outsideClickCloses />);
cy.get('[data-test-subj="modal-trigger"]').click();
cy.get('div.euiModal').should('exist');
cy.get('div.euiOverlayMask').should('exist');
cy.get('div.euiOverlayMask').click({ force: true });
cy.get('div.euiModal').should('not.exist');
});

it('keeps the modal open when outsideClickCloses is false (default)', () => {
cy.mount(<Modal outsideClickCloses={false} />);
cy.get('[data-test-subj="modal-trigger"]').click();
cy.get('div.euiModal').should('exist');
cy.get('div.euiOverlayMask').should('exist');
cy.get('div.euiOverlayMask').click({ force: true });
Copy link
Contributor Author

@acstll acstll Oct 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💭 since the overlay is a plain div, I believe click({ force: true }) is appropriate

cy.get('div.euiModal').should('exist');
});
});
});
});
31 changes: 29 additions & 2 deletions packages/eui/src/components/modal/modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,13 @@
* Side Public License, v 1.
*/

import React, { FunctionComponent, ReactNode, HTMLAttributes } from 'react';
import React, {
FunctionComponent,
ReactNode,
HTMLAttributes,
useRef,
useCallback,
} from 'react';
import classnames from 'classnames';

import { keys, useEuiTheme, useGeneratedHtmlId } from '../../services';
Expand All @@ -31,6 +37,8 @@ export interface EuiModalProps extends HTMLAttributes<HTMLDivElement> {
event?:
| React.KeyboardEvent<HTMLDivElement>
| React.MouseEvent<HTMLButtonElement>
| MouseEvent
| TouchEvent
) => void;
/**
* Sets the max-width of the modal.
Expand All @@ -55,6 +63,11 @@ export interface EuiModalProps extends HTMLAttributes<HTMLDivElement> {
* `returnFocus` defines the return focus behavior and provides the possibility to check the available target element or opt out of the behavior in favor of manually returning focus
*/
focusTrapProps?: Pick<EuiFocusTrapProps, 'returnFocus'>;
/**
* Whether clicking outside the modal should close it.
* @default false
*/
outsideClickCloses?: boolean;
}

export const EuiModal: FunctionComponent<EuiModalProps> = ({
Expand All @@ -66,6 +79,7 @@ export const EuiModal: FunctionComponent<EuiModalProps> = ({
role = 'dialog',
style,
focusTrapProps,
outsideClickCloses = false,
'aria-describedby': _ariaDescribedBy,
...rest
}) => {
Expand All @@ -82,6 +96,18 @@ export const EuiModal: FunctionComponent<EuiModalProps> = ({
}
};

const maskRef = useRef<HTMLDivElement>(null);
const onClickOutside = useCallback(
(event: MouseEvent | TouchEvent) => {
// The overlay mask is always present
if (outsideClickCloses === true && event.target === maskRef.current) {
onClose(event);
}
return undefined;
},
[onClose, outsideClickCloses]
);

let newStyle = style;

if (typeof maxWidth !== 'boolean') {
Expand Down Expand Up @@ -113,12 +139,13 @@ export const EuiModal: FunctionComponent<EuiModalProps> = ({
);

return (
<EuiOverlayMask>
<EuiOverlayMask maskRef={maskRef}>
<EuiFocusTrap
{...focusTrapProps}
initialFocus={initialFocus}
scrollLock
preventScrollOnFocus
onClickOutside={onClickOutside}
>
<div
css={cssStyles}
Expand Down
5 changes: 0 additions & 5 deletions packages/website/docs/components/containers/modal/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,6 @@ Use `aria-labelledby={modalTitleId}` to ensure the modal is announced to screen

Modals use an **EuiOverlayMask** to obscure content beneath.

:::warning Modals **can't** be dismissed by clicking outside

Unlike flyouts, modals can't be dismissed by clicking on the mask. This follows our [modal usage guidelines](#guidelines), which require a primary action button, even if it just closes the modal.
:::

```tsx interactive
import React, { useState } from 'react';
import {
Expand Down