-
-
Notifications
You must be signed in to change notification settings - Fork 3.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Custom Tab - Disabled state doesn't work #8445
Comments
we can add customClass for resolving this issue like this import * as React from "react"; function CustomTab({ children, isDisabled, ...rest }) { // Determine custom class based on selection and disabled state return ( function CustomTabs() { const rootElement = document.getElementById("root"); root.render( also u can modify useTab props for resolving above issue |
@Saloni-hub - Using Instead, explicitly forwarding In its current state, the Custom Tabs section in Chakra docs contains a bug in that disabling the custom tab does not produce expected behavior. |
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: