Close Modal Popup using Esc key on keyboard

Question

I need to close the modal also using the "ESC" key, at the moment it is closing the "CLOSE" and "CONFIRM" button. i'm using reactstrap, react hooks. keyboard {show} and handleClose it didn't work.

Here is the code:


const DeleteUserModal = props => {
    const { user, show } = props;

    const deleteUser = async () => {
        await props.removeUser(user);
        props.onCloseModal();
    };

    const handleKeyPress = target => {
        if (target.charCode === ENTER_KEY) {
            deleteUser();
        }
    };
    


    return (
        <div onKeyPress={handleKeyPress}>
            <Modal isOpen={show} toggle={props.onCloseModal}  >
                
                <ModalHeader toggle={props.onCloseModal}>
                    <IntlMessages id="modal.delete.user.title" />
                </ModalHeader>

                <ModalBody>
                    <IntlMessages id="modal.delete.user.description" />
                </ModalBody>

                <ModalFooter>
                    <Button className="cancel" onClick={props.onCloseModal}>
                        <IntlMessages id="modal.common.cancel" />
                    </Button>
                    <Button className="action" onClick={deleteUser}>
                        <IntlMessages id="modal.common.ok" />
                    </Button>
                </ModalFooter>
            </Modal>
        </div>
    );
};

export default DeleteUserModal;

follows the modal with two actions

Kindly refer the following https://getbootstrap.com/docs/4.0/components/modal/#options provided by bootstrap — Basil, Jul 24 '20 at 13:42
I need to close the modal by pressing the ESC key. At the moment it closes when pressing the confirm button or cancel the action. I'm checking the documentation, but when I put the code, nothing happens. — Allan Alencar, Jul 24 '20 at 13:46

K.P · Answer 1 · 2020-07-25T04:59:43.490

29

You can setup an event listener.

 useEffect(() => {
      const close = (e) => {
        if(e.keyCode === 27){
          props.onCloseModal()
        }
      }
      window.addEventListener('keydown', close)
    return () => window.removeEventListener('keydown', close)
  },[])

edited Jul 25 '20 at 04:59

answered Jul 24 '20 at 13:51

K.P

444
3
6

20

`keyCode` is deprecated: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode. Use `e.key === 'Escape` instead', for better international keyboard support. – MegaCookie May 02 '21 at 13:47
what would be the class component equivalent of this? – Ronny Fitzgerald Dec 02 '21 at 06:05
Is there a way to do this in react without touching the actual dom? – Solomon Barayev Nov 29 '22 at 17:48
Not only will this not work without placing the state variable change in the useEffect() parameter (the brackets at the end), it leaves your listener dangling forver inside your app! – Midiman May 24 '23 at 16:48

score 2 · Accepted Answer · answered Jul 24 '20 at 13:36

2

In vanilla JavaScript, you could do:

document.onkeydown = function (evt) {
    if (evt.keyCode == 27) {
        // Escape key pressed
        props.onCloseModal();
    }
};

answered Jul 24 '20 at 13:36

Nanoo

836
8
16

I'm assuming `props.onCloseModal();` is used to close the modal. I have never used reactjs in my life, so correct me if i'm wrong. – Nanoo Jul 24 '20 at 13:37
I will do this test – Allan Alencar Jul 24 '20 at 13:46
Does this work with Windows and Mac and Linux?? – Mars2024 Jul 09 '22 at 19:32
Ok, JS is a hack, React is a hack-of-a-hack, but accepted answer as piling more hacks on top of hacks?! It's insane. Please don't do this. For your own sanity – Midiman May 24 '23 at 16:47

score 1 · Answer 3 · answered Jul 24 '20 at 13:35

1

You can check bootstrap documentation.

If nothing found, then you could add an event listener to the ESC key press and than call onCloseModal

answered Jul 24 '20 at 13:35

Ajay Gupta

703
5
11

I will do this test – Allan Alencar Jul 24 '20 at 13:46

Close Modal Popup using Esc key on keyboard

3 Answers3