Disabled Tab looks like it is enabled

I have a TabSheet containing multiple instances of Tab.
I have disabled one Tablike shown in this link. https://vaadin.com/docs/v23/components/tabs#states
The disabling work as expected. I can no longer change state. Visually however the tab looks the same as before. Meaning the text is not grayed as expected when disabled.

Anyone experiencing the same or am I doing something wrong?

Do you have a TabSheet component or a Tabs component?


can you post a screenshot of the tabsheet and the DOM as seen in the browser devtools (so we can see if the attribute is applied correctly to the element)

The TabSheet contains four Tab components and implementation looks like this.

tabSheet.add(aTab, aPanel());
tabSheet.add(bTab, bPanel());
tabSheet.add(cTab, cPanel());
tabSheet.add(dTab, dPanel());



Hmm, looks correct when I try the same (in V24).
Can you post a screenshot of what the tabs look like?

Are you applying any custom css that might affect the tabs?

Each tab contains two components (text and badge) added like this.

private void addText(Tab tab, String text, int count) {
  Span badge = badge(count);
  badge.getStyle().set("margin-inline-start", "var(--lumo-space-xs)"); // add space between text and badge
  tab.add(new Span(text), badge);

I have since added the text in Tab constructor and dropped the new Span(text) but it made no difference. See image.


I then skipped the badge now only providing text/label via constructor. It’s now looking like this. Still C and D is not greyed out as expected.

I cannot find any CSS/styling which could cause this as for now. At least not regarding what I have done lately. I did use tabs about two years ago elsewhere in the application. I should probably take a look there. Also I should make a reference project with same Vaadin version on Github where I can prove for myself or for you guys whether a component works as expected or not. However this can be very difficult to prove since the codebase inhouse is so much larger and has many more implementations and differences compared to a clean application. At least it should give me an indication about where the problem is.

Finally I found the problem. I noticed my tab fonts was thicker than the reference project I made after last post. This pointed out exactly what you asked. I have frontend/themes/<project>/main-view.css with reference to element vaadin-tab this file was created/provided with Vaadin 14 back in 2020. I fear there might be other styles from old days adding problems today. Anyways thank you for helpful tips.

Ah yes. The style inspector in the browsers devtools can be your friend in these situations, of course.

I do use that but I did not notice that my tabs looked different from the original. It has been so for 3 years. Some clean up is good :slightly_smiling_face: