Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

removing a tab triggers exception #9129

Closed
2 of 6 tasks
oldoldman opened this issue Apr 15, 2024 · 2 comments
Closed
2 of 6 tasks

removing a tab triggers exception #9129

oldoldman opened this issue Apr 15, 2024 · 2 comments
Labels
0 - new New issues that need assignment. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. Calcite (dev) Issues logged by Calcite developers. calcite-components Issues specific to the @esri/calcite-components package. has workaround Issues have a workaround available in the meantime. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive need more info Issues that are missing information and/or a clear, actionable description. needs triage Planning workflow - pending design/dev review.

Comments

@oldoldman
Copy link

oldoldman commented Apr 15, 2024 •
edited
Loading

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/calcite-components
  • @esri/calcite-components-angular
  • @esri/calcite-components-react
  • @esri/calcite-design-tokens
  • @esri/eslint-plugin-calcite-components

Esri team

Calcite (dev)
@oldoldman oldoldman added 0 - new New issues that need assignment. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. needs triage Planning workflow - pending design/dev review. labels Apr 15, 2024
@github-actions github-actions bot added calcite-components Issues specific to the @esri/calcite-components package. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive Calcite (dev) Issues logged by Calcite developers. labels Apr 15, 2024
@jcfranco
Copy link
Member

@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 #2721 should help here). In the meantime, you can use the following as a workaround.

@jcfranco jcfranco added need more info Issues that are missing information and/or a clear, actionable description. has workaround Issues have a workaround available in the meantime. labels Apr 15, 2024
@oldoldman
Copy link
Author

thank you. the workaround works!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
0 - new New issues that need assignment. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. Calcite (dev) Issues logged by Calcite developers. calcite-components Issues specific to the @esri/calcite-components package. has workaround Issues have a workaround available in the meantime. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive need more info Issues that are missing information and/or a clear, actionable description. needs triage Planning workflow - pending design/dev review.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jcfranco @oldoldman