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

Ensure blurring the Combobox.Input component closes the Combobox #2712

Merged
merged 3 commits into from
Aug 29, 2023

Conversation

RobinMalfait
Copy link
Member

This PR fixes an issue where on mobile Android the Combobox was not closing when pressing "Next"
on the keyboard.

This is because the "Next" button blurs the current input, but we weren't handling that properly.
This PR fixes that by also closing the Combobox if the Combobox.Input is blurred.

Fixes: #2672

@vercel
Copy link

vercel bot commented Aug 29, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
headlessui-react ✅ Ready (Inspect) Visit Preview 💬 Add feedback Aug 29, 2023 2:16pm
headlessui-vue ✅ Ready (Inspect) Visit Preview 💬 Add feedback Aug 29, 2023 2:16pm

Verified

This commit was signed with the committer’s verified signature.

Verified

This commit was signed with the committer’s verified signature.
Copy link
Contributor

@thecrypticace thecrypticace left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On iOS the navigation controls only partially work:

  • up/down arrows: up always works regardless of combobox
  • up/down arrows: down always works regardless of combobox IF closed
  • up/down arrows: down does not work on combobox IF opened

I'm not sure why this happens I was just surprised by it — I'm not sure if it's fixable. If you can get it working I think that'd be really nice.

Android the done/next button works and closes the combobox. Same on iOS too! I on the fence on whether or not I'd expect it to commit the value but I don't think that's a big deal. We can push that off until such a time that someone opens an issue.

Verified

This commit was signed with the committer’s verified signature.
@thecrypticace
Copy link
Contributor

The iOS nav thing is because it doesn't fire a blur event when there's an absolute element covering the input completely. Nothing we can do about that one sadly.

Copy link
Contributor

@thecrypticace thecrypticace left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested the updates on iOS and Android and it looks good.

Ship it!

@sentiasa
Copy link

sentiasa commented Apr 8, 2024

After this update, it started selecting the first element when clicked outside.

I have tried up until 1.7.19 and all releases after 1.7.16 selects the first element when clicked outside. 1.7.16 is the last working version. I had to revert back to 1.7.16

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