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
I just run your script with no errors. Closing the tab doesn't trigger any errors in the console.
https://codepen.io/lkoumis1/pen/abrqxGp?editors=1101