topic Re: Calcite Tabs in Expand Widget Throws Uncaught error in ArcGIS JavaScript Maps SDK Questions

Calcite Tabs in Expand Widget Throws Uncaught error

Dirk_Vandervoort — Mon, 17 Jul 2023 01:15:13 GMT

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

Re: Calcite Tabs in Expand Widget Throws Uncaught error

UndralBatsukh — Mon, 17 Jul 2023 21:33:38 GMT

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.

Re: Calcite Tabs in Expand Widget Throws Uncaught error

Dirk_Vandervoort — Mon, 17 Jul 2023 22:49:36 GMT

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>

Re: Calcite Tabs in Expand Widget Throws Uncaught error

UndralBatsukh — Tue, 18 Jul 2023 19:00:02 GMT

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