Listbox.Options does not stop propagation

[TheMythologist]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.7.16

What browser are you using?

Brave Browser / Chrome

Describe your issue

The selection of an inner Listbox.Option does not prevent the event from bubbling into parent components.

The current solution to circumvent this is to add onClick={(e) => e.preventDefault()} on Listbox.Options

[thecrypticace]

Hey, so most events bubble by default – clicks included. This is just how the React (and the web in general) works. Is there a use-case you have detailing why this is a problematic behavior? If I needed to stop the bubbling for whatever reason I would prefer to implement this user-land by adding a click handler (like you did above). Though, I will note that the right thing to use here would be e.stopPropagation() rather than e.preventDefault().

Generally we wouldn't want to stop the events from bubbling unless there was a good reason to do so — e.g. it interferes with the functioning of the component itself.

[thechrisoshow]

I have a usecase where I want to stop propagation.

My list box is within a details element.

<details>
  <summary>
    <ListBox>...</ListBox>
   </summary>
   <p>Some stuff I want to hide or show</p>
  </details>

When I click an option in the ListBox it toggles the details to open or closed.

[thecrypticace]

Hey, so even native browser controls sometimes do this.

In the following example if you select one of the options the summary still toggles the details element. I would suggest that you add an onClick with a call to stopPropagation to work around this in user-land.

<details>
  <summary>
    <select multiple>
      <option>Option</option>
      <option>Option 2</option>
    </select>
  </summary>
  <p>Some stuff I want to hide or show</p>
</details>

[thechrisoshow]

Yeah - that's what I ended up doing. Thanks