Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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:alpinejs/alpine#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 theaway
oroutside
AlpineJS modifier to themousedown
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...