fix: observe tabs ID attribute changes and update panels

[web-padawan]

Description

Fixes https://github.com/vaadin/flow-components/issues/6072

Here's the code example to reproduce the issue and test the fix:

<vaadin-tabsheet>
  <vaadin-tabs slot="tabs">
    <vaadin-tab>Tab 1</vaadin-tab>
    <vaadin-tab>Tab 2</vaadin-tab>
  </vaadin-tabs>

  <div tab="tab-1">Panel 1</div>
  <div tab="tab-2">Panel 2</div>
</vaadin-tabsheet>

Put this to dev page and try to set id on the first vaadin-tab to tab-1.

Type of change

• Bugfix

Note

Initially, I was thinking about adding a warning for vaadin-tab elements without id attribute set. However, Flow does not set id attribute when using setVisible(false) and it's by design, so in this case the warning would be redundant.

This fix can be also considered as "feature", as it also adds an option to un-link tab with panel by setting id to null.

[sonarcloud[bot]]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud

[vaadin-bot]

Hi @web-padawan and @web-padawan, when i performed cherry-pick to this commit to 24.3, i have encountered the following issue. Can you take a look and pick it manually? Error Message: Error: Command failed: git cherry-pick 8b975e7a89da64d5404509ca523c55947c7a7327 error: could not apply 8b975e7a8... fix: observe tabs ID attribute changes and update panels (#7201) hint: After resolving the conflicts, mark them with hint: "git add/rm ", then run hint: "git cherry-pick --continue". hint: You can instead skip this commit with "git cherry-pick --skip". hint: To abort and get back to the state before "git cherry-pick", hint: run "git cherry-pick --abort".

[vaadin-bot]

This ticket/PR has been released with Vaadin 24.4.0.alpha17 and is also targeting the upcoming stable 24.4.0 version.