Controller is causing event bubbling, creating issue when working with ClickAwayListener

[Kerim-Willem]

Hi there!

We're currently working with react-hook-form within a modal. I'm trying to add a function that fires an event listener, that closes the modal, only when I'm clicking outside of it.

Whenever I click on one of the components from the react-hook-form library, a click-event is being fired on the body, instead of the component. This is causing a click outside of the Modal, while the click is happening inside the Modal.

I found out that this is happening because of event bubbling. I experience the same issue with other components which are wrapped in a react-hook-form.

I've looked everywhere and really can't find out the solution. Can you help me by explaining how to prevent event bubbling from the react-hook-form components?

Help is much appreciated.

[bluebill1049]

can you share a simple codesandbox?

[gormonn]

offtopic: when i looking for a issue related to the lack of event bubbling...