Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Tabs]: Disabled tabs are still clickable and active

See original GitHub issue

What package(s) are you using?

carbon-components
carbon-components-react

Detailed description

Describe in detail the issue you’re having.

Passing the disabled prop to a tab only impacts the style, the Tabs component will still switch contents when a disabled tab is clicked

What did you expect to happen? What happened instead? What would you like to see changed?

Disabled tabs should have no effect when clicked

Steps to reproduce the issue

Go to tabs storybook
Under the knobs panel of storybook enable the Disabled knob
Click the tabs, they are still active and change the content of the Tabs component

Issue Analytics

State:
Created 4 years ago
Comments:5 (3 by maintainers)

Top GitHub Comments

3reactions

abbeyhrtcommented, Jun 26, 2019

Hey! I’m gonna try and tackle this one.

1reaction

asudohcommented, Jun 27, 2019

Cool to see you are jumping in @abbeyhrt! One suggestion is searching for pointer-events in our codebase and see if there is something similar to this case.

Top Results From Across the Web

Can you disable tabs in Bootstrap? - Stack Overflow

For any nav component (tabs, pills, or list), add .disabled for gray links and no hover effects. Links will remain clickable, however, ...

How to disable tabs in Bootstrap ? - GeeksforGeeks

To show a case of disabling tabs, first, we go through an example with tabs enabled.

How to Disable Tabs in Bootstrap - Tutorial Republic

Answer: Remove data-toggle="tab" from Tabs. You can remove the attribute data-toggle="tab" from the tab's <a> element to disable a Bootstrap tab.

Navs and tabs · Bootstrap v5.0

Navigation available in Bootstrap share general markup and styles, from the base .nav class to the active and disabled states. Swap modifier classes...

ARIA: tab role - Accessibility - MDN Web Docs - Mozilla

All of the tabpanel elements have tabindex="0" to make them tabbable, and all but the currently active one have the hidden attribute. The...