topic Re: Calcite Tabs creating ResizeObserver type error during DOM rendering (v1.0.0-beta.99) in Calcite Design System Questions

Calcite Tabs creating ResizeObserver type error during DOM rendering (v1.0.0-beta.99)

FC_Basson — Thu, 19 Jan 2023 09:08:50 GMT

I need some clarity on the TypeError being generated for Calcite Tabs.

It seems the error is generated during the DOM rendering when the tabs are not directly visible in the DOM body, but instead in a parent element such as a calcite-panel.

The line in the module where the error occurs upon creating a new class reads as follows:

this.activeIndicatorEl.style.transitionDuration = "0s"

It seems as if the "activeIndicatorEl" property is not found.

I have created a CodePen (https://codepen.io/fcbasson/pen/KKByZzV) with two sets of tabs, of which one is within a panel. Have a look at the browser console when the DOM is rendered to see the errors popping up.

Re: Calcite Tabs creating ResizeObserver type error during DOM rendering (v1.0.0-beta.99)

BenElan — Thu, 19 Jan 2023 19:10:59 GMT

Hi @FC_Basson, I was able to reproduce the error and logged a bug:

https://github.com/Esri/calcite-components/issues/6310

Thanks for reporting the issue!

Re: Calcite Tabs creating ResizeObserver type error during DOM rendering (v1.0.0-beta.99)

LefterisKoumis — Thu, 26 Jan 2023 03:01:53 GMT

Thank you. I have the same error and I spent hours to resolve it thinking that it is an issue with my script.

Also I noticed performance issues.

Re: Calcite Tabs creating ResizeObserver type error during DOM rendering (v1.0.0-beta.99)

BenElan — Fri, 03 Feb 2023 03:21:20 GMT

Update: this issue is resolved in v1.0.4-next.4

We will be releasing a patch soon, potentially tomorrow

Re: Calcite Tabs creating ResizeObserver type error during DOM rendering (v1.0.0-beta.99)

KittyHurley — Fri, 10 Feb 2023 15:01:21 GMT

@FC_Basson, @LefterisKoumis Thanks again for reporting!

The issue has been mitigated in both patch releases this week, 1.0.4 and 1.0.5.

Re: Calcite Tabs creating ResizeObserver type error during DOM rendering (v1.0.0-beta.99)

WilsonIonara — Thu, 27 Apr 2023 18:17:47 GMT

I am having the same issue. How do I find and install the patch? Thanks

Re: Calcite Tabs creating ResizeObserver type error during DOM rendering (v1.0.0-beta.99)

LefterisKoumis — Thu, 27 Apr 2023 18:24:01 GMT

@WilsonIonara There is nothing to install. Just update the links to the calcite components to version 1.0.4 or later.

Re: Calcite Tabs creating ResizeObserver type error during DOM rendering (v1.0.0-beta.99)

WilsonIonara — Thu, 27 Apr 2023 22:10:06 GMT

Since I am using a node package I just changed the stylesheet and it seems to be working! Thank you!