search

Frontify / fondue

Design System of Frontify
https://fondue-components.frontify.com/
20 stars 4 forks source link

Modal doesn't close when pressing Escape #1444

Closed danialdezfouli closed 4 months ago

danialdezfouli commented 1 year ago

fondue doesn't call onClose when pressing Escape. the modal remains in the dom and only changes the opacity to 0.

image 
"@frontify/fondue": "12.0.0-beta.227"
danialdezfouli commented 1 year 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 />
imoutaharik commented 1 year ago

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.

SamuelAlev commented 4 months ago

Fixed with the new Dialog component