Skip to content

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

@y04nqt

Description

@y04nqt

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions