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
In vanilla JavaScript, you could do:
document.onkeydown = function (evt) {
if (evt.keyCode == 27) {
// Escape key pressed
props.onCloseModal();
}
};