You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When implementing a custom tab component, setting isDisabled does not show the tab's disabled state.
In the docs, you can see that adding isDisabled does not work for custom tab components. I'm suspecting that the __css prop (which contains the disabled styles) is overridden by Button styles.
we can add customClass for resolving this issue like this
import * as React from "react";
import * as ReactDOMClient from "react-dom/client";
import {
Box,
ChakraProvider,
useTab,
Tabs,
TabList,
TabPanels,
TabPanel,
Button,
} from "@chakra-ui/react";
Description
When implementing a custom tab component, setting
isDisabled
does not show the tab's disabled state.In the docs, you can see that adding
isDisabled
does not work for custom tab components. I'm suspecting that the__css
prop (which contains the disabled styles) is overridden byButton
styles.Link to Reproduction
https://codesandbox.io/p/sandbox/brave-frost-9j47mx?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clv5kbsd400063b6hrhwjczwv%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clv5kbsd300023b6h9tfkjxve%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clv5kbsd300033b6hjb174sco%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clv5kbsd400053b6hrbtchht4%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clv5kbsd300023b6h9tfkjxve%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clv5kbsd300013b6hiefyp6uv%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252Findex.js%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clv5kbsd300023b6h9tfkjxve%2522%252C%2522activeTabId%2522%253A%2522clv5kbsd300013b6hiefyp6uv%2522%257D%252C%2522clv5kbsd400053b6hrbtchht4%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clv5kbsd400043b6h73k0sffk%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522clv5kbsd400053b6hrbtchht4%2522%252C%2522activeTabId%2522%253A%2522clv5kbsd400043b6h73k0sffk%2522%257D%252C%2522clv5kbsd300033b6hjb174sco%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522clv5kbsd300033b6hjb174sco%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D
Steps to reproduce
isDisabled
prop to custom tabChakra UI Version
2.3.6
Browser
No response
Operating System
Additional Information
No response
The text was updated successfully, but these errors were encountered: