Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve user click away detection #30

Merged
merged 5 commits into from
May 14, 2024

Conversation

dircm
Copy link
Contributor

@dircm dircm commented Mar 9, 2024

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 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...

@joshhanley joshhanley merged commit f4cc7f7 into joshhanley:main May 14, 2024
5 checks passed
@joshhanley
Copy link
Owner

@dircm Thanks! Looks good to me.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants