[Action-Pad] potentially unused mutation observer

[maxpatiiuk]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

Action-pad component creates a mutation observer:

https://github.com/Esri/calcite-design-system/blob/6f42a868f5cc65ae8a7c89f22ad9057b90fe4bca/packages/calcite-components/src/components/action-pad/action-pad.tsx#L152C3-L154

However once created, that observer is not used - observer() or unobserve() is never called on it.

If I am reading the code right, this observer has no effect.

Expected Behavior

Either observer is supposed to be used, and it's a bug that it's not used, or it should be removed as dead code.

For an example of mutation observer being used, see how it's used in Action:

• calcite-design-system/packages/calcite-components/src/components/action/action.tsx

  Line 177 in 6f42a86

  this.mutationObserver?.observe(this.el, { childList: true, subtree: true });

• calcite-design-system/packages/calcite-components/src/components/action/action.tsx

  Line 194 in 6f42a86

  this.mutationObserver?.disconnect();

Reproduction Sample

Reproduction Steps

Reproduction Version

v2.12.2

Relevant Info

No response

Regression?

No response

Priority impact

impact - p3 - not time sensitive

Impact

No response

Calcite package

• @esri/calcite-components
• @esri/calcite-components-angular
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Maps SDK for JavaScript

[driskull]

Seems like it should be used in order to update newly slotted calcite-action-group elements with the layout of them.

[maxpatiiuk]

Looks like popover has the same issue:

calcite-design-system/packages/calcite-components/src/components/popover/popover.tsx

Line 252 in 4160af1

mutationObserver: MutationObserver = createObserver("mutation", () =>

[driskull]

I think we need an eslint rule to make sure mutation observers are observed and disconnected within a file :) cc @jcfranco

[maxpatiiuk]

I think we need an eslint rule to make sure mutation observers are observed and disconnected within a file :) cc @jcfranco

It might be better to just create a controller for that - the controller will take care of observing connected/disconnect.

Controllers would simplify a lot of boilerplate you are having - connectMessages, connectLocalized, setComponentLoaded, etc - all of that will go away

[github-actions]

Installed and assigned for verification.

[DitwanP]

🍠 Verified locally on dev