Closed danialdezfouli closed 4 months ago
I had to do this for closing it:
useLayoutEffect(() => {
function handleKeyDown(e: KeyboardEvent) {
if (e.key === 'Escape' && isOpen) {
onClose()
}
}
window.addEventListener('keydown', handleKeyDown, true)
return () => {
window.removeEventListener('keydown', handleKeyDown, true)
}
}, [isOpen, onClose])
which doesn't always work! so I had to do this too:
isOpen && <Modal />
Hello! First, thanks for using Fondue :) and for the feedback.
We're currently working on the refactoring of our overlays including the Modal
which will be deprecated and replaced by the new Dialog
component. It's still a work in progress.
Part of the work, I already introduced a new hook here: https://github.com/Frontify/fondue/blob/beta/src/hooks/useToggleOverlay.ts
That is already listening to the escape key.
const [isOpen, setIsOpen] = useToggleOverlay(false);
Hopefully those new components should be ready on beta within next month.
Fixed with the new Dialog
component
fondue doesn't call onClose when pressing Escape. the modal remains in the dom and only changes the opacity to 0.