Why does `phx-click-away` only fire if element is in viewport?

Hey there! I’m making a super-simple LiveView dropdown based on the bare bones dropdown here in the LiveView docs. This dropdown will hold “More Actions” in a table of items, so each row will have a dropdown component. When the user clicks “More Actions” on one item, and then clicks it for another item, only one dropdown is open at a time thanks to the phx-click-away handler that hides the dropdown…

… unless you open a dropdown, scroll away, and try to open another dropdown. When clicking around, I found I could persist several open dropdowns at once because phx-click-away only fires when the element is still in the viewport, thanks to this line.

This weirdness (issue?) was partly addressed in this issue so that the phx-click-away for modals will fire even if part of the modal is cut off. But why is this JS.isInViewport needed at all? Got an example use case? Ideally, I’d like the click-away logic to be fired regardless of the scroll state, but I’m assuming there’s a reason that this is not the default behavior.

Thanks in advance!

2 Likes