fix(core/select): replace mutation observer with dom events (#300)

siemens · Jan 16, 2023 · c9ec1ff · c9ec1ff
1 parent 2168cf9
commit c9ec1ff
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 13 deletions.
diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
@@ -6796,6 +6796,11 @@
           "capture": false,
           "passive": false
         },
+        {
+          "event": "ix-select-item:labelChange",
+          "capture": false,
+          "passive": false
+        },
         {
           "event": "keydown",
           "target": "window",

diff --git a/packages/core/src/components/select-item/events.ts b/packages/core/src/components/select-item/events.ts
@@ -0,0 +1,19 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export class IxSelectItemLabelChangeEvent extends CustomEvent<{
+  oldValue: string;
+  newValue: string;
+}> {
+  constructor(detail: { oldValue: string; newValue: string }) {
+    super('ix-select-item:labelChange', {
+      bubbles: true,
+      detail,
+    });
+  }
+}
diff --git a/packages/core/src/components/select-item/select-item.tsx b/packages/core/src/components/select-item/select-item.tsx
@@ -16,7 +16,9 @@ import {
   Host,
   Method,
   Prop,
+  Watch,
 } from '@stencil/core';
+import { IxSelectItemLabelChangeEvent } from './events';
 
 @Component({
   tag: 'ix-select-item',
@@ -69,6 +71,16 @@ export class SelectItem {
     }
   }
 
+  @Watch('label')
+  labelChange(newValue: string, oldValue: string) {
+    this.hostElement.dispatchEvent(
+      new IxSelectItemLabelChangeEvent({
+        newValue: newValue,
+        oldValue: oldValue,
+      })
+    );
+  }
+
   render() {
     return (
       <Host>

diff --git a/packages/core/src/components/select/select.tsx b/packages/core/src/components/select/select.tsx
@@ -19,6 +19,7 @@ import {
   State,
   Watch,
 } from '@stencil/core';
+import { IxSelectItemLabelChangeEvent } from '../select-item/events';
 
 @Component({
   tag: 'ix-select',
@@ -207,19 +208,15 @@ export class Select {
     }
   }
 
-  componentDidLoad() {
-    this.labelMutationObserver = new MutationObserver(() => {
-      this.selectValue(
-        Array.isArray(this.selectedIndices)
-          ? this.selectedIndices
-          : [this.selectedIndices]
-      );
-    });
-    this.labelMutationObserver.observe(this.hostElement, {
-      subtree: true,
-      attributes: true,
-      attributeFilter: ['label'],
-    });
+  @Listen('ix-select-item:labelChange')
+  onLabelChange(event: IxSelectItemLabelChangeEvent) {
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    this.selectValue(
+      Array.isArray(this.selectedIndices)
+        ? this.selectedIndices
+        : [this.selectedIndices]
+    );
   }
 
   disconnectedCallback() {