Calcite Tabs in Expand Widget Throws Uncaught error

Dirk_Vandervoort · ‎07-15-2023

In HTML:

    <calcite-card id="tab-container">
      <calcite-tabs >   
        <calcite-tab-nav slot="title-group">
            <calcite-tab-title selected>
                Watercraft
            </calcite-tab-title>
            <calcite-tab-title>Automobiles</calcite-tab-title>
            <calcite-tab-title>Aircrafts</calcite-tab-title>
        </calcite-tab-nav>
        <calcite-tab selected>
            <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>
    </calcite-card>

In JS:

            let myExpand = new Expand({
            expandIconClass: "esri-icon-question",
            expandTooltip: "My Expand",
            view: view,
            content: document.getElementById("tab-container")
            });
            view.ui.add(myExpand, "bottom-right");

Upon execution of the JS, an uncaught TypeError appears.

3p-2e88e68d.entry.js:6 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'id')
at p-2e88e68d.entry.js:6:25550

No functionality is apparently lost, but there is that annoying exception in the console.

Have you seen this before? Can you help me handle it?

TIA

UndralBatsukh · ‎07-18-2023

Hi there,

So I talked to a coworker who is much more experienced in this area.

You are getting the error because the tabs are first being rendered in the page and then being moved into the expand widget. It would probably be better to not first create them in the page and then have them moved.

Your code is modified to show the preferred approach. Hope this helps

https://codepen.io/driskull/pen/ZEmoryK?editors=1000

View solution in original post

UndralBatsukh · ‎07-17-2023

Hi there,

Please place the calcite components in div element and add set the Expand.content to the div. This got rid off the error.

Dirk_Vandervoort · ‎07-17-2023

I cannot correct this issue by wrapping the calcite in a div and setting the expand.content to the div.

I've attached a simple app that has this error

<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>Calcite Tabs in Expand</title>

    <link rel="stylesheet" href="https://js.arcgis.com/4.27/esri/css/main.css"/>
    <script type="module" src="https://js.arcgis.com/calcite-components/1.4.2/calcite.esm.js"></script>
    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/1.4.2/calcite.css" />

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <script src="https://js.arcgis.com/4.27/"></script>

    <script>
      require(["esri/views/MapView", "esri/WebMap", "esri/widgets/Expand"], (MapView, WebMap, Expand) => { 
          const webmap = new WebMap({
            portalItem: {
              id: "e691172598f04ea8881cd2a4adaa45ba"
            }
          });
          const view = new MapView({
            map: webmap,
            container: "viewDiv"
          });
          view.when(async () => {
            let myExpand = new Expand({
            expandIconClass: "esri-icon-question",
            expandTooltip: "My Expand",
            view: view,
            content: document.getElementById("my-tab-container"),
            id:"my-expand",
            group: "bottom-right"
            });
            view.ui.add(myExpand, "bottom-right"); 
        });
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
    <div id="my-tab-container">
      <calcite-card>
        <calcite-tabs it="the-tabs">   
          <calcite-tab-nav slot="title-group" id="the-nav">
              <calcite-tab-title selected id="tab01a">Watercraft</calcite-tab-title>
              <calcite-tab-title id="tab02a">Automobiles</calcite-tab-title>
              <calcite-tab-title id="tab03a">Aircrafts</calcite-tab-title>
          </calcite-tab-nav>
          <calcite-tab selected>
              <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>
      </calcite-card>
    </div>
  </body>
</html>

UndralBatsukh · ‎07-18-2023

Hi there,

So I talked to a coworker who is much more experienced in this area.

You are getting the error because the tabs are first being rendered in the page and then being moved into the expand widget. It would probably be better to not first create them in the page and then have them moved.

Your code is modified to show the preferred approach. Hope this helps

https://codepen.io/driskull/pen/ZEmoryK?editors=1000