-
Notifications
You must be signed in to change notification settings - Fork 329
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
Search modal closes when clicking the reset button #971
Comments
Here's a breakdown of what is going on and some leads to get it fixed. We have two ways of handling
This was initially designed to avoid closing the modal on blur on mobile devices: when users start scrolling with their finger ( The logic isn't repeated in the
The Because we can have detached mode on pointer devices, we need to handle the case just like we do on touch devices. One solution would be to provide the form element to Another solution is to avoid relying on This works, but breaks some tests:
|
Hey @sarahdayan ! |
The proposed solution of having uniform logic regardless of input type is very relevant, as touch might actually be not possible to detect reliably (I also immediately used detached mode at desktop and never considered it a mobile-only thing) |
Description
In detached mode, even when
openOnFocus=true
, clearing the search input with the reset button closes the modal.detached-desktop.mov
It also happens on desktop but the input receives the focus back, triggering the
onFocus
logic, so the panel reopens.desktop-flicker.mov
In detached mode, this doesn't happen because the closing modal destroys the entire form, so there's no search input to focus.
Root cause and possible solution
Clicking the reset button triggers the
blur
event, which triggers logic that closes the search modal. This doesn't happen on touch devices because of some guard logic, but this logic isn't present on non-touch devices.Having the same logic in both handlers should fix the issue, and avoid the close/reopen behavior on desktop.
Reproduction
Preview →
Steps
To compare, you can reproduce either on mobile or on desktop with a simulated touch device. Doing the same steps doesn't close the modal.
detached-touch.mov
Expected behavior
The modal shouldn't close when hitting the reset button on a detached autocomplete with
openOnFocus=true
.Additionally, it shouldn't "flicker" (close then reopen) when not detached. Instead, it should stay open.
Environment
The text was updated successfully, but these errors were encountered: