Selected tab has no css applied

[Patrick Bertolla]

noticed in version v4.0.1
current solution: backporting to v.3.2.3

Selecting a tab applies the react-tabs__tab--selected class to the chosen <li> element. CSS is being applied, but it's not showing on the selected item. Clicking anywhere else makes styling visible again.
Using Chrome developer tools, it seems like the content of the li tag is not being rendered, and therefore the CSS is neither.

[Daniel Tschinder]

Could you create an example for this problem?

Because I cannot reproduce this on https://reactcommunity.org/react-tabs/

[mitchell-robinson]

@danez @EasyLifeBertolla I was able to recreate this on https://reactcommunity.org/react-tabs/, and also found a workaround.

To recreate
I used the Super Mario example, and added a border-bottom rule to .react-tabs__tab--selected

After which, the border-bottom rule is not applied to a tab on the initial click, but appears once you've clicked anywhere after the initial new tab click.

Workaround
This doesn't happen if I set the focusTabOnClick property of the Tabs component to FALSE. Clicking a new tab applies the border-bottom rule. However, if I click a new tab, then click that same tab again, the styling disappears.

It seems to have something to do with the rendering of the Tab title. In each scenario (focusTabOnClick true or false), styles apply to .react-tabs__tab--selected whenever there is content in the <li>

But the styling disappears whenever an ellipsis is the content of the tab <li>:

The above happens on the initial click when focusTabOnClick={true} and on a second-click of the tab whenever focusTabOnClick={false}

Hope this helps.

[mitchell-robinson]

@danez found out what's happening.
In my case, this was specific to the border-bottom rule. (using a border-left didn't have the same issue).

I found that the &:focus &:after rule of the stylesheet was causing the border-bottom rule to not appear.

I commented out the &:after rules in the stylesheet, and my border-bottom rule works in all scenarios without needing to adjust any props.

I'm assuming the &:after rule there was meant to support the default styling? This might just be a workaround for us trying to underline our selected tabs.

[Daniel Tschinder]

Good catch! The :after class was used to hide the outline when selecting the tab. But since the last major version this outline was removed anyway, so also this :after class can be removed. I will take care of this.

Thanks you for investigating! 💜

[Patrick Bertolla]

Sorry if I only come back on this now. Thanks for the troubleshooting. I noticed that the issue persists in the latest 6.0.0 release. There might be a reason for that. For me, it was enough to overwrite the rule in my custom CSS like this:

.react-tabs__tab--selected:focus:after {
  background: transparent;
  height: 0;
  content: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

I know this might not be the best solution, but it does the trick for me. Thanks for all your help!