adding tab property, removes all tab members.

[LefterisKoumis]

This is an example of multi level tabs.

https://codepen.io/benesri/pen/NWgeqgP

However, if you modify line 6, by adding the property tab="Test1" it removes all children of this tab.

The same occurs, if you add property tab="Test2" to line 7.

Why can't we use the tab property?

[BenElan]

When using the tab property, you need to use the same value for the calcite-tab-title and its calcite-tab. Here is a codepen:

https://codepen.io/benesri/pen/WNzwxNg

It does mention it in the tab-title documentation - https://developers.arcgis.com/calcite-design-system/components/tab-title/#component-api-properties-t...

[LefterisKoumis]

Thank you.

As soon as I insert the tab property, I get these errors in console regardless if I use Chrome or Edge. Any idea for the cause and how to prevent them?

[BenElan]

If you added tab="test" to a calcite-tab-title, then adding tab="test" to the corresponding calcite-tab will make the errors go away.

[LefterisKoumis]

I did that and that's when the error shows up in the console. I added the tab to both  calcite-tab-title and its calcite-tab to begin with, but I was getting those errors. Then, I thought I was misreading the property instructions on calcite design website, so I modified the code and posted the codepen on the community forum. Thank you for the responses, and since the errors are not fatal I will just ignore them.

[BenElan · Accepted solution]

It is probably because codepen live updates, so you are getting the error when you add the tab property to calcite-tab-title and before you add it to calcite-tab. Once all of the tab properties are added you will no longer see the error.