disabled and usage via Catalyst / TailwindUI

[logemann]

Hi,

i am using latest HeadlessUI via Catalyst templates. Now i wonder if headlessUI really writes out data-disabled when i am disabling a component via "disabled" property because catalyst checks for data-disabled attributes instead of using pseudo class disabled:

Catalyst styles likes this:
'data-[disabled]:opacity-40',

But when i render out DropDownItems, there is no data-disabled property in the DOM. So of course the styling wont be applied. Documentation says explicitely i should use "disbaled" property on the component and not use data-disabled myself. Wouldnt make much sense anyway because one need to use the original disabled prop to supress any clicks and stuff.

What am i missing?

[logemann]

Oh, its a bug in catalyst. Props dont get passed down to HeadlessUi components (from the catalyst comoonent). Where can i report this ?

dropdown.tsx in catalyst

before fix:

 <Headless.MenuItem>
      {'href' in props ? (
        <Link {...props} className={classes} />
      ) : (
        <button type="button" {...props} className={classes} />
      )}
    </Headless.MenuItem>

after fix:

 <Headless.MenuItem disabled={'disabled' in props && props.disabled}>
      {'href' in props ? (
        <Link {...props} className={classes} />
      ) : (
        <button type="button" {...props} className={classes} />
      )}
    </Headless.MenuItem>