Changing id of a tab supported?

I was a bit surprised to see this code hanging my app:

tabSheet.add(this.myTab, this.myForm);
this.myTab.setId("a-new-id");

When clicked, the tab never shows and i get loading indicator forever.

Also, inspecting things it seems the tab id gets overwritten anyway inside of the add() method, so it seems pointless to do this. Removing the setId call makes the tab appear again.

Sounds like a bug

I can try and isolate it, hopefully reproduce it and will then create a ticket. Unless you already know it’s a certain bug then i can save the effort :wink:

Setting an id to the tab isn’t supported because it’s underlying used on the client side to associate tabs with the content. So you probably have to create an enhancement request in the flow components repo.

Indeed, that’s the behaviour i’m seeing. I do need to identify the tab though, so i’m (ab)using addClassName instead for the moment.

Also, if tabs cannot have ids, how would you reliably write UI tests for them if they cannot be targeted?

By Index or Text :grimacing: or pass a custom component in in the tabs’ header and add the id to this

https://github.com/vaadin/flow/issues/18270