Skip to content

[fix] Modal: close only one modal per Escape key press #2862

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

Open
vmanapat wants to merge 1 commit into
base: master
Choose a base branch
from
Open

[fix] Modal: close only one modal per Escape key press #2862

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
20 changes: 18 additions & 2 deletions packages/react-native-web/src/exports/Modal/ModalContent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,18 +29,34 @@ const ModalContent: React.AbstractComponent<
> = React.forwardRef((props, forwardedRef) => {
const { active, children, onRequestClose, transparent, ...rest } = props;

const escapeKeyDownRef = React.useRef<?KeyboardEvent>(null);

React.useEffect(() => {
if (canUseDOM) {
const recordEscapeKeyDown = (e: KeyboardEvent) => {
if (e.key === 'Escape' && !e.repeat) {
escapeKeyDownRef.current = active ? e : null;
}
};
const closeOnEscape = (e: KeyboardEvent) => {
if (active && e.key === 'Escape') {
if (e.key !== 'Escape') {
return;
}
const keyDown = escapeKeyDownRef.current;
escapeKeyDownRef.current = null;
if (active && keyDown != null && !keyDown.defaultPrevented) {
e.stopPropagation();
if (onRequestClose) {
onRequestClose();
}
}
};
document.addEventListener('keydown', recordEscapeKeyDown, true);
document.addEventListener('keyup', closeOnEscape, false);
return () => document.removeEventListener('keyup', closeOnEscape, false);
return () => {
document.removeEventListener('keydown', recordEscapeKeyDown, true);
document.removeEventListener('keyup', closeOnEscape, false);
};
}
}, [active, onRequestClose]);

Expand Down
149 changes: 147 additions & 2 deletions packages/react-native-web/src/exports/Modal/__tests__/index-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,14 @@

import Modal from '..';
import React from 'react';
import TextInput from '../../TextInput';
import { fireEvent, render } from '@testing-library/react';

function pressEscape(target) {
fireEvent.keyDown(target, { key: 'Escape' });
fireEvent.keyUp(target, { key: 'Escape' });
}

describe('components/Modal', () => {
test('visible by default', () => {
const { getByTestId } = render(
Expand Down Expand Up @@ -616,7 +622,7 @@ describe('components/Modal', () => {

render(<Modal onRequestClose={spy} visible={true} />);

fireEvent.keyUp(document, { key: 'Escape' });
pressEscape(document);

expect(spy).toHaveBeenCalledTimes(1);
});
Expand All @@ -632,7 +638,7 @@ describe('components/Modal', () => {
</>
);

fireEvent.keyUp(document, { key: 'Escape' });
pressEscape(document);

expect(spyA).toHaveBeenCalledTimes(0);
expect(spyB).toHaveBeenCalledTimes(1);
Expand Down Expand Up @@ -675,9 +681,148 @@ describe('components/Modal', () => {
fireEvent.animationEnd(animationAElement);
fireEvent.animationEnd(animationBElement);

pressEscape(document);

expect(spyA).toHaveBeenCalledTimes(0);
expect(spyB).toHaveBeenCalledTimes(1);
});

test('escape key fires onRequestClose when a TextInput is focused', () => {
const spy = jest.fn();

const { getByTestId } = render(
<Modal onRequestClose={spy} visible={true}>
<TextInput testID={'input'} />
</Modal>
);

pressEscape(getByTestId('input'));

expect(spy).toHaveBeenCalledTimes(1);
});

test('escape key closes one modal per key press', () => {
const spyA = jest.fn();
const spyB = jest.fn();

function TestComponent() {
const [visibleB, setVisibleB] = React.useState(true);
return (
<>
<Modal onRequestClose={spyA} visible={true} />
<Modal
onRequestClose={() => {
spyB();
setVisibleB(false);
}}
visible={visibleB}
/>
</>
);
}

render(<TestComponent />);

pressEscape(document);

expect(spyA).toHaveBeenCalledTimes(0);
expect(spyB).toHaveBeenCalledTimes(1);
});

test('escape key closes one modal per key press when the app handles it', () => {
const spyA = jest.fn();
const spyB = jest.fn();

function TestComponent() {
const [visibleB, setVisibleB] = React.useState(true);
return (
<>
<Modal onRequestClose={spyA} visible={true} />
<Modal onRequestClose={spyB} visible={visibleB}>
<a
data-testid={'b'}
onKeyDown={(e) => {
if (e.key === 'Escape') {
e.preventDefault();
setVisibleB(false);
}
}}
/>
</Modal>
</>
);
}

const { getByTestId } = render(<TestComponent />);

fireEvent.keyDown(getByTestId('b'), { key: 'Escape' });
fireEvent.keyUp(document, { key: 'Escape' });

expect(spyA).toHaveBeenCalledTimes(0);
expect(spyB).toHaveBeenCalledTimes(0);
});

test('holding escape closes one modal per key press', () => {
const spyA = jest.fn();
const spyB = jest.fn();

function TestComponent() {
const [visibleB, setVisibleB] = React.useState(true);
return (
<>
<Modal onRequestClose={spyA} visible={true} />
<Modal
onRequestClose={() => {
spyB();
setVisibleB(false);
}}
visible={visibleB}
/>
</>
);
}

render(<TestComponent />);

fireEvent.keyDown(document, { key: 'Escape' });
fireEvent.keyDown(document, { key: 'Escape', repeat: true });
fireEvent.keyDown(document, { key: 'Escape', repeat: true });
fireEvent.keyUp(document, { key: 'Escape' });

expect(spyA).toHaveBeenCalledTimes(0);
expect(spyB).toHaveBeenCalledTimes(1);
});

test('escape key does not fire onRequestClose when the keydown was handled', () => {
const spy = jest.fn();

const { getByTestId } = render(
<Modal onRequestClose={spy} visible={true}>
<a
data-testid={'a'}
onKeyDown={(e) => {
if (e.key === 'Escape') {
e.preventDefault();
}
}}
/>
</Modal>
);

pressEscape(getByTestId('a'));

expect(spy).toHaveBeenCalledTimes(0);
});

test('escape key does not fire onRequestClose for a key press that began before the modal was active', () => {
const spy = jest.fn();

const { rerender } = render(<Modal onRequestClose={spy} visible={false} />);

fireEvent.keyDown(document, { key: 'Escape' });
rerender(<Modal onRequestClose={spy} visible={true} />);
fireEvent.keyUp(document, { key: 'Escape' });

expect(spy).toHaveBeenCalledTimes(0);
});
});