search

Esri / calcite-design-system

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

removing a tab triggers exception #9129

Closed oldoldman closed 6 months ago

oldoldman commented 7 months ago

Check existing issues

Actual Behavior

Hi, I have an html page as follow

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script type="module" src="https://js.arcgis.com/calcite-components/2.7.1/calcite.esm.js"> 
</script>
    <link rel="stylesheet" href="https://js.arcgis.com/calcite-components/2.7.1/calcite.css" />
<script>
    function load() {
      const nav = document.getElementById('nav')
      const tt1 = document.getElementById('tt1')
      const tab = document.getElementById('tab')
      const tb1 = document.getElementById('tb1')
      tab.removeChild(tb1)
      nav.removeChild(tt1)      
    }
  </script>
  </head>  
  <body onload='load()'>
    <calcite-tabs id='tab'>
      <calcite-tab-nav id='nav' slot="title-group">
        <calcite-tab-title id='tt1' closable>Tab1</calcite-tab-title>
        <calcite-tab-title closable>Tab2</calcite-tab-title>
        <calcite-tab-title closable>Tab3</calcite-tab-title>
        <calcite-tab-title closable>Tab4</calcite-tab-title>
        <calcite-tab-title closable>Tab5</calcite-tab-title>
      </calcite-tab-nav>
      <calcite-tab id='tb1'>
        <calcite-button>1</calcite-button>
      </calcite-tab>
      <calcite-tab>
        <calcite-button>2</calcite-button>
      </calcite-tab>
      <calcite-tab>
        <calcite-button>3</calcite-button>
      </calcite-tab>
      <calcite-tab>
        <calcite-button>4</calcite-button>
      </calcite-tab>
      <calcite-tab>
        <calcite-button>5</calcite-button>
      </calcite-tab>
    </calcite-tabs>
  </body>
</html>

I'm trying to remove the tt1(a calcite-tab-title) and tb1(a calcite-tab) from the DOM. This action trigger an exception

tab-title.tsx:413  Uncaught (in promise) TypeError: Cannot read properties of null (reading 'children')
    at P.getTabIndex (tab-title.tsx:413:45)
    at P.getTabIdentifier (tab-title.tsx:425:39)
    at P.componentDidLoad (tab-title.tsx:263:58)
    at vt (index.js:2389:29)
    at at (index.js:2299:13)
    at e (index.js:2196:34)
    at rt (index.js:2198:13)
    at index.js:2103:40

Expected Behavior

no exception raised

Reproduction Sample

NA

Reproduction Steps

NA

Reproduction Version

calcite web component 2.7.1

Relevant Info

No response

Regression?

No response

Priority impact

p4 - not time sensitive

Impact

No response

Calcite package

Esri team

Calcite (dev)

jcfranco commented 7 months ago

@oldoldman Thanks for reporting this. Would you mind completing the Check existing issues section and sharing more about your use case?

An issue I'm noticing is that a tab and tab-title are removed before tabs is properly initialized (work related to https://github.com/Esri/calcite-design-system/issues/2721 should help here). In the meantime, you can use the following as a workaround.

oldoldman commented 6 months ago

thank you. the workaround works!