closing a tab triggers javascript exception

yushang

Hi guys,

I have a tab as follow.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script type="module" src="https://js.arcgis.com/calcite-components/2.4.0/calcite.esm.js"></script>
    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.4.0/calcite.css" />
  </head>
  <body>
    <calcite-tabs>
      <calcite-tab-nav slot="title-group">
        <calcite-tab-title tab='tab1' closable>Tab1</calcite-tab-title>
        <calcite-tab-title tab='tab2' closable>Tab2</calcite-tab-title>
        <calcite-tab-title tab='tab3' closable>Tab3</calcite-tab-title>
        <calcite-tab-title tab='tab4' closable>Tab4</calcite-tab-title>
      </calcite-tab-nav>
      <calcite-tab tab='tab1'>
        <calcite-button>tab1</calcite-button>
      </calcite-tab>
      <calcite-tab tab='tab2'>
        <calcite-button>tab2</calcite-button>
      </calcite-tab>
      <calcite-tab tab='tab3'>
        <calcite-button>tab3</calcite-button>
      </calcite-tab>
      <calcite-tab tab='tab4'>
        <calcite-button>tab4</calcite-button>
      </calcite-tab>
    </calcite-tabs>
  </body>
</html>

Closing any tab will raise js exception in the console, how does this happen?

Uncaught TypeError: Cannot read properties of undefined (reading 'focus')
at tab-nav.tsx:419:37