livewire-autocomplete icon indicating copy to clipboard operation
livewire-autocomplete copied to clipboard

Improve user click away detection

Open dircm opened this issue 1 year ago • 0 comments

When a page contains multiple autocomplete components, the x-on:click.away listener may detect click.away events from the other autocomplete components if the user not pinpoint accurate when clicking inside the input field. This is exacerbated when the user is moving the mouse slightly when the click is made. This issue has been raised before in the AlpineJS repo:

https://github.com/alpinejs/alpine/discussions/1399

Essentially the recommended approach for maximum "click away" behaviour detection is to use the mousedown event when outside the component. Luckly we can apply the away or outside AlpineJS modifier to the mousedown listener to achive the desiered result.

As a bonus, this change will make the autocomplete away detection more accurate on mobile devices when a tap away is sometimes a scroll (mousedown) event...

dircm avatar Mar 09 '24 07:03 dircm