everweij / react-laag

Hooks to build things like tooltips, dropdown menu's and popovers in React

Home Page:https://www.react-laag.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

How do you handle cases where a modal is shown from clicking in a layer

philmetzger opened this issue · comments

I have created a dropdown component:

const { renderLayer, triggerProps, layerProps } = useLayer({
    isOpen: isVisible,
    onOutsideClick: () => setIsVisible(false),
    overflowContainer: true,
    auto: true, // Automatically find the best placement.
    placement,
    triggerOffset: 5,
    onDisappear: (_disappearType) => {
      if (_disappearType === disappearType) {
        setIsVisible(false);
      }
    },
  });

Now in my dropdown I load a Modal. However as soon as i click anywhere in the modal, then everything closes because of
onOutsideClick: () => setIsVisible(false)

Is there a nice solution for this so if something is above the dropdown, like a modal, to ignore the click outside?

Same issue here with onHover, I want to keep the layer open while I'm hovering the layer itself.

Same issue!! I have a dialog and it closes everything on close because it propagates the event. event.stopPropagation not working. @everweij