nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Calcite Tabs in Expand Widget Throws Uncaught error

Dirk_Vandervoort · 2023-07-16T01:32:22+00:00

In HTML: Watercraft Automobiles Aircrafts <calcite-notice…

Dirk_Vandervoort

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

Find more posts tagged with

Accepted answers

UndralBatsukh

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

All comments

UndralBatsukh

Hi there,

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

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

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

Dirk_Vandervoort

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

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.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.