mantinedev
Modal doesn't close when pressing escape when closeOnClickOutside is set to false
What package has an issue
@mantine/core
Describe the bug
If closeOnEscape is set to true and closeOnClickOutside is set to false, pressing escape doesn't work when the focus isn't anymore on the modal.
What version of @mantine/hooks page do you have in package.json?
5.10.2
If possible, please include a link to a codesandbox with the reproduced problem
https://codesandbox.io/s/mantine-modal-closeonescape-bug-glqv0u
Do you know how to fix the issue
No response
Are you willing to participate in fixing this issue and create a pull request with the fix
No response
Possible fix
No response
Which behaviour do you expect? Do you expect the modal to close regardless where the focus is?
Then try adding trapFocus={false} to your modal configuration. However I don't know whether this introduces any other unwanted side effects for your usecase.
In my opinion the current behaviour is ok as it's doing what you've configured.
I would expect the modal to always close on escape. I mean, when I click outside the modal and the trapfocus is set to true, the focus should still remain on the modal thus closing on escape. I disagree that it's doing what i've configured.
I would expect an event listener on escape when the modal is open, not based on its focus. Or has this to do with multiple opened modals, so you need to know which one to close?
Ok, you're right. closeOnEscape shouldn't pay attention to whether the modal is focused or not.
There are several lines involved: These two conditions prevent the behaviour you're expecting: https://github.com/mantinedev/mantine/blob/master/src/mantine-core/src/Modal/Modal.tsx#L194 https://github.com/mantinedev/mantine/blob/master/src/mantine-core/src/Modal/Modal.tsx#L200
There's also another issue where onClose() gets triggered when the modal isn't open (in case trapFocus={false}). IMHO this shouldn't happen.
This line closes the modal when focused: https://github.com/mantinedev/mantine/blob/master/src/mantine-core/src/Modal/Modal.tsx#L265
But I don't know why it's related to trapFocus in the first place.
According to #589 this feature had been adapted from Drawer. And there it's been there since day one.
Drawer also shows the same behaviour when using closeOnClickOutside={false}.
@rtivital Can you clarify the role of trapFocus in combination with closeOnEscape?
