hooks useClickAway works wrong

The reproduction link is below

https://codesandbox.io/s/useclickaway-bug-vmhrz7

Possible solution: use event.currentTarget instead of event.target in the implementation of hook

Sep 12 '23 12:09 narasimhajupally

It's a bug, thank you for your feedback.

Sep 13 '23 02:09 liuyib

There is an error in this repo: Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>.

That is to say, an HTML button can't contain another button, it's invalid. So, I think it's not a bug, just remove the button inside, everything works fine.

Sep 15 '23 07:09 dxsun97

no the problem is not the nested button.I have updated the code sandbox, replaced the button with span tag.

the problem is that the element being clicked is removed bcoz of conditional rendering and since we use event.target inside hook (which no longer exists) it is causing the bug. we need to use event.currentTarget

Sep 15 '23 08:09 narasimhajupally

Got it, you're right

Sep 15 '23 09:09 dxsun97

hey @liuyib , what do you think about the below method

`event.composedPath().includes(clickawayInputRef.current)`

it will work even if the children which are clicked are removed from dom because of business logic.

Oct 03 '23 12:10 narasimhajupally

hey @liuyib , what do you think about the below method

event.composedPath().includes(clickawayInputRef.current)

it will work even if the children which are clicked are removed from dom because of business logic.

I think that it would be better to add a parameter to control this behavior.

Maybe someone need:

it will work even if the children which are clicked are removed from dom because of business logic.

Maybe also someone need the opposite action.

Oct 17 '23 14:10 liuyib