Prevent dismissing when clicking in certain element outside

When clicking a floating element I don’t want the click to dismiss the current floating element even though I want it for other clicks. The example shows the problem I’m having where I trigger a notification(that isn’t rendered inside of the current floating element) and clicking on the close button.

I would think I could have a click listener on the useDismiss options that I could prevent it from being registred as an outside click if I click on something that has a certain data attribute or something.

Clicking on the close button of the alert closes both the alert AND the modal. I don’t want the modal to be closed in this instance.

[hornta]

In their case I believe the modal checks explicitly for clicks on the overlay element so it’s basically ignores clicks on anything, so that’s that, but they do also have a hook for managing what happens when clicking outside an element with a somewhat hard coded escape hatch by checking if the clicked element has a certain attribute or not.

https://github.com/mantinedev/mantine/blob/7e40ca99ad2572dcc416bf2a4417cf38d89e47de/src/mantine-hooks/src/use-click-outside/use-click-outside.ts#L17

[atomiks]

It needs to wrap the Notifications component so I think what you’re doing makes sense. Anyways I think I’ll make a PR that adds the function guard option to outsidePress and also the ability to specify a custom parent in FloatingTrees

Of course in the meantime the FloatingOverlay thing should work fine like this:

<FloatingOverlay 
  onClick={event => event.target === event.currentTarget && setOpen(false)}
>
  <Dialog />
</FloatingOverlay>

Edit: although, it doesn’t handle not closing when pressing the scrollbar