Calcite Tabs in Expand Widget Throws Uncaught error

587
3
Jump to solution
07-15-2023 06:32 PM
Dirk_Vandervoort
New Contributor III

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

Dirk_Vandervoort_0-1689470942751.png

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

0 Kudos
1 Solution

Accepted Solutions
UndralBatsukh
Esri Regular Contributor

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

0 Kudos
3 Replies
UndralBatsukh
Esri Regular Contributor

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.

0 Kudos
Dirk_Vandervoort
New Contributor III

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>
0 Kudos
UndralBatsukh
Esri Regular Contributor

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

 

0 Kudos