@click.away fires if mouse is click inside focus element and released on "away" element

[skycamdk]

Thank you for alpine js !!!

I can't figure out if it's a bug or just standard behavior. Nevertheless it's quite annoying :-)

When I have modal's showing and I mouse click on them then move the mouse outside and releases - then the click.away will fire. That is undesirable as users often will run into that the modal closes even though the mouse was not clicked on the surrounding elements.
Click away should be limited to mouse events where both click and release was on the "away" elements.

(Bootstrap modals will go away if you click outside and releases inside, not the other way around)

[SimoTod]

It kinda does it. Alpine uses the standard click event from the browser (i assume bootstrap does something more complicated whith mousedown and mouseup) see https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event.

You clicked on the modal, probably on an html tag inside the modal to be fair, and the mousedown even fired on the element, bubbled up to the modal AND kept going up through the parent elements up to document and window. Then you dragged the mouse and released it outside the modal, the mouseup element fired on a parent element and again it bubbled up to window and document. The first element which received both down and up is not the modal (because you dragged the cursor out) but one of the parent div so the click element fires on that one.
I hope it make sense.

To "fix" your issue, if your modal is designed in a way where users tend to click and drag the mouse rather than doing a single click, you can use @ mousedown instead.

[KevinBatdorf]

To "fix" your issue, if your modal is designed in a way where users tend to click and drag the mouse rather than doing a single click, you can use @​mousedown instead.

Here's one implementation where you can use @​click.away as well (using mouse events to keep track): https://codepen.io/KevinBatdorf/pen/gOwJJNj

<div
	x-data="{
		bg: 'bg-red-500',
		clicking: false,
	}"
	class="w-16 h-16"
	:class="bg"
	@mouseup.prevent="clicking = false"
	@mousedown.prevent="clicking = true"
	@click.away="
		if(clicking) {
			clicking = false
			return
		}
		bg = 'bg-blue-500'">
	
</div>

[rutek]

I think that @skycamdk is right that it should be fixed. This behavior is present only in Chrome. In case of using input with @click.away selecting text and releasing button outside of field triggers click.away only on Chrome, on Firefox it works well.

[SimoTod]

@rutek Alpine does not implement anything special, it just uses browser native events and reads the target from there so I'm not sure if it can be changed. If you have a look at the spec I posted above, this is the correct behavior. If a browser does something different, it's technically a bug in their engine.

From https://developer.mozilla.org/

If the button is pressed on one element and the pointer is moved outside the element before 
the button is released, the event is fired on the most specific ancestor element that contained both elements.

Out of curiosity, is it a genuine problem for your user base, or is it just something raised by a tester?
You can probably use @mousedown.away instead of @click.away if it's a problem for your users.

[rutek]

OK, I understand. It's real use case - container with search input and search results. Handler for @click.away on container for both input and results hides search results in "desktop" viewport. In this case if user starts selecting text in input to replace it with something different he/she ends up with hidden search results as code thinks user forced hiding hints by clicking outside. Using focusout does not work well in this case. Right now I have fixed it using your suggestion.

I will try to look deeper what causes this behavior as from your quote it may also be bug in Firefox. I made some tests previously which shown me difference at which "pixel" event is fired in Firefox and Chrome but I haven't looked at target element.

[rutek]

@SimoTod You are right, it's bug in Firefox. I reported it at https://bugzilla.mozilla.org/show_bug.cgi?id=1696639 as target element is not nearest ancestor as documented in MDN.

[denkeel]

This is exactly why you should never use something like @click.away while any UI development on any platform ever. Use @mousedown.away in 100% of cases. It works fine on touch devices as well, because scrolling (so is tapping) is not considered as mousedown on mobile(at least in web it works so).