Esri / calcite-design-system

A monorepo containing the packages for Esri's Calcite Design System
https://developers.arcgis.com/calcite-design-system/
Other
290 stars 76 forks source link

Console error when only some tabs set the tab attribute #9388

Open eriklharper opened 5 months ago

eriklharper commented 5 months ago

Check existing issues

Actual Behavior

A console error appears on initial load when not all tabs in a group set the tab attribute. This doesn't seem to affect the functionality of the component, but it is a bad look in this specific case.

Expected Behavior

No console error appears.

Reproduction Sample

https://codepen.io/eriklharper/pen/eYaZgpY?editors=1101

Reproduction Steps

For some reason Codepen doesn't show the console error (at least for me) so the best way to reproduce this is to paste the following HTML into a demo.html file and run npm start with the devtools console open:

<calcite-tabs>
  <calcite-tab-nav slot="title-group">
    <calcite-tab-title closable tab="Watercraft">Watercraft</calcite-tab-title>
    <calcite-tab-title closable>Automobiles</calcite-tab-title>
    <calcite-tab-title closable>Aircrafts</calcite-tab-title>
  </calcite-tab-nav>
  <calcite-tab tab="Watercraft">
    <calcite-notice icon="embark" open>
      <div slot="message">Recommended for coastal use</div>
    </calcite-notice>
  </calcite-tab>
  <calcite-tab>
    <calcite-notice icon="car" open>
      <div slot="message">A good choice for inland adventure</div>
    </calcite-notice>
  </calcite-tab>
  <calcite-tab>
    <calcite-notice icon="plane" open>
      <div slot="message">Cross continents quickly</div>
    </calcite-notice>
  </calcite-tab>
</calcite-tabs>

The following error is shown on initial load:

image

Reproduction Version

4.8

Relevant Info

No response

Regression?

No response

Priority impact

impact - p3 - not time sensitive

Impact

No response

Calcite package

Esri team

Calcite (dev)

nel11211 commented 2 months ago

+1 seeing this in MV during tabs implementation work.