Description

React-wrapped components are having issues within container/composite/component suites with errors like:

Error: The following properties on element ELEMENT will not trigger updates as expected because they are set using class fields: ...

Specifically:

Relevant Lit Docs: https://lit.dev/docs/components/properties/#avoiding-issues-with-class-fields

The megamenu-tab code looks like this:

@customElement(`${c4dPrefix}-megamenu-tab`)
class C4DMegaMenuTab extends CDSTab {
  /**
   * Disable unneeded properties inherited from CDS Content Switcher Item.
   */
  closeOnActivation = false;
  hideDivider = false;

  render() {
    ...
  }

  static styles = styles;
}

I'm guessing we can accomplish the same goal in a lit-specific way by updating those values within connectedCallback or firstUpdated methods.

Component(s) impacted

c4d-megamenu-tab, c4d-locale-search

Browser

Firefox

Carbon for IBM.com version

v2.14.0

Severity

Severity 2 = Aspects of design is broken, and impedes users in a significant way, but there is a way to complete their tasks. Affects major functionality, has a workaround.

Application/website

unknown

Package

@carbon/ibmdotcom-web-components

CodeSandbox example

https://stackblitz.com/edit/nextjs-ak9hzz?file=pages%2Findex.js

Steps to reproduce the issue (if applicable)

No response

Release date (if applicable)

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate issues