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

Inert is over extending into elements inside the combo box #3421

Open
y04nqt opened this issue Aug 8, 2024 · 3 comments
Open

Inert is over extending into elements inside the combo box #3421

y04nqt opened this issue Aug 8, 2024 · 3 comments

Comments

@y04nqt
Copy link

y04nqt commented Aug 8, 2024

What package within Headless UI are you using?
@headlessui/react

What version of that package are you using?
2.1.2

What browser are you using?
Chrome, Firefox, Safari, etc (shouldn't be browser specific)

Reproduction URL
We are using the ComboBox component, with options, and with a div inside the combobox but not in an option.

<ComboBox>
  <ComboBoxInput />
  <div>text and button here</div>
  <ComboBoxOption>OPTION 1</ComboBoxOption>
</ComboBox>

Describe your issue
We have a combo box with an input inside of it, then we have a title bar that contains a button and helpful text describe how to use the combo box, then options may show under the title box. Our title box is just a DIV element, but looking at the useInertOther code and other references of inert. Some reason the div inside the combo box becomes a target to receive the inert data attribute. This is undesirable because we should be able to add an arbitrary div to the combo box that we may style/use in whatever way. Right now it receives a side effect from the rogue useInertOther hook. Unfortunately, I cannot share the code base and I don't have enough time to replicate the issue currently. If this issue gains traction, I'd be happy to collaborate & produce a working example of the bug. Thank you so much for taking the time to read this bug description and considering a fix. Much love <3

@y04nqt
Copy link
Author

y04nqt commented Aug 9, 2024

Here's the inert on an undesirable div, which is acting as a button for my case.
Screenshot 2024-08-08 at 7 09 23 PM

This code fixes my issue, but I don't like i have to add this.
Screenshot 2024-08-08 at 7 08 05 PM

@WesSouza
Copy link

WesSouza commented Oct 7, 2024

Adding a use case that justifies removing this, or at least allowing us to not have inert added on some elements:

image

This Combobox allows users to remove selected options by clicking on the × button, or clear the input clicking on the rightmost × button. The inert attribute prevents those use cases.

@WesSouza
Copy link

WesSouza commented Oct 8, 2024

Another quick workaround is to use <ComboboxOptions modal={false}>, which skips the extensive inert adding altogether.

It's also worth noting that this inert logic is causing significant performance issues when opening or even filtering the combobox (#2980).

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

No branches or pull requests

2 participants