Can not click on dropdown labels when the dropdown is inside Field

[wojciechsura]

What component (if applicable)

• URL for category: https://catalyst.tailwindui.com/docs/dropdown
• Component name: Dropdown

Describe the bug
If you place a Dropdown inside Field, the label in dropdown items is not clickable. I'm using the Catalyst library, but I'm pretty sure the problem is actually inside Headless.

For more context, in my project I have "extended" inputs, which have prefixes and postfixes and looks like following:

I need to make the dropdown placed in the "postfix" area to work. However, I've figured out that you may place the dropdown anywhere within the Field component and the bug is reproducible.

To Reproduce
Steps to reproduce the behavior:

1. Create a React project with Tailwind and Catalyst
2. Create a component containing the following:

import './App.css'
import { Field, FieldGroup, Fieldset } from './lib/catalyst/fieldset'
import { Dropdown, DropdownButton, DropdownItem, DropdownLabel, DropdownMenu } from './lib/catalyst/dropdown'

function App() {
  return (
      <>
          <Fieldset>
              <FieldGroup>
                  <Field>
                      <Dropdown>
                          <DropdownButton>Dropdown</DropdownButton>
                          <DropdownMenu>
                              <DropdownItem onClick={() => alert(1)}>
                                <DropdownLabel>Label</DropdownLabel>
                              </DropdownItem>
                          </DropdownMenu>
                      </Dropdown>
                  </Field>
            </FieldGroup>
          </Fieldset>
    </>
  )
}

export default App

Expected behavior
When you click on the label part of dropdown item, it should react (in the above case, show an alert). It does not. It works though if you click the non-label part of the dropdown item (e.g. right to the text)

Screenshots

Browser/Device (if applicable)

• OS: Windows 11
• Browser Chrome
• Version 136.0.7103.93

Additional context
It may have to do with the fact that the label has an attribute data-slot="label". I guess the Headless' Field component introduces some behavior or CSS for such children, which prevents the dropdown's label to be clickable.

[reinink]

Hey @wojciechsura! Thanks for reporting this — I can reproduce the issue.

The problem has to do with the fact that we're using the Headless UI Label component in our DropdownLabel component. I can't remember right now why we did that, because looking at this now it doesn't really make sense to me, as the Label component is designed for form inputs, not dropdown items.

I'm hoping to do some more digging into this next week, but as a possible fix you can just update this component to use a <div> instead:

export function DropdownLabel({ className, ...props }: React.ComponentPropsWithoutRef<'div'>) {
  return <div {...props} data-slot="label" className={clsx(className, 'col-start-2 row-start-1')} {...props} />
}

[wojciechsura]

Thanks for your answer, @reinink !

Funnily enough, there actually already is a component with exact same code as you proposed (linter pointed it out, I'm not that good), called DropdownStaticLabel. Maybe its existence is exactly because of the issue I raised.

I used it instead replacing DropdownLabel source, but I think that it is still worth investigating if the proper component is used, because it may cause trouble in the future.

[reinink]

Hey there @wojciechsura! Just a follow up on this. I've just updated the DropdownLabel in Catalyst to extend a plain <div> instead of the Headless.Label, as we discussed a couple weeks ago. Thanks again for reporting this issue 👍