disabled prop on a Tab gives a type error when using typescript

[tcoopman]

<Tab disabled={true}>...</Tab> works as expected, but you get a type error: Property disabled does not exist on...

[thecrypticace]

@tcoopman

Hey, I'm not seeing a type error in @headlessui/react in either 1.7 or 2.0 alpha 4.

The following gives me no type errors and TypeScript can locate the disabled prop types as expected. I'll gladly take another look if you can provide a reproduction though.

import { Tab } from '@headlessui/react'

export default function MyTabs() {
  return (
    <Tab.Group>
      <Tab.List>
        <Tab>Tab 1</Tab>
        <Tab disabled={true}>Tab 2</Tab>
        <Tab>Tab 3</Tab>
      </Tab.List>
      <Tab.Panels>
        <Tab.Panel>Content 1</Tab.Panel>
        <Tab.Panel>Content 2</Tab.Panel>
        <Tab.Panel>Content 3</Tab.Panel>
      </Tab.Panels>
    </Tab.Group>
  )
}

[tcoopman]

I found the issue: <Tab disabled={true} as={Fragment}>Tab 2</Tab>
But I guess that's to be expected

[pozytron]

This TS error occurs because you use as prop, either provide sth that has disabled property like as="button" or get rid of as entirely : )