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 Escape propagates correctly in Combobox component #1511

Merged
merged 2 commits into from
May 27, 2022

Conversation

RobinMalfait
Copy link
Member

@RobinMalfait RobinMalfait commented May 27, 2022

When you press Escape in the Combobox.Input component then you want 2 things to happen:

  • If the combobox is open, then the combobox should close, but the event should not propagate
    further. This is to prevent parent Dialog components from closing for example.
  • If the combobox is closed, then the event should propagate just like with a normal input.

We only called event.preventDefault() and not event.stopPropagation(), however a recent bug fix for the Dialog component also checks for event.defaultPrevented.

This PR ensures that Escape only has special meaning when the Combobox is open, otherwise it is a normal event just like other events.

Fixes: #1506

@vercel
Copy link

vercel bot commented May 27, 2022

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

Name Status Preview Updated
headlessui-react ✅ Ready (Inspect) Visit Preview May 27, 2022 at 3:12PM (UTC)
headlessui-vue ✅ Ready (Inspect) Visit Preview May 27, 2022 at 3:12PM (UTC)

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.

Comboboxes in modal dialogs - Esc key not working
1 participant