fix: update Picker label via MutationObserver instead of "slotchange"

adobe · Jun 21, 2022 · 196998e · 196998e
1 parent c8a0440
commit 196998e
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 10 deletions.
diff --git a/packages/menu/package.json b/packages/menu/package.json
@@ -50,6 +50,7 @@
         "lit-html"
     ],
     "dependencies": {
+        "@lit-labs/observers": "^1.0.1",
         "@spectrum-web-components/action-button": "^0.8.6",
         "@spectrum-web-components/base": "^0.5.7",
         "@spectrum-web-components/divider": "^0.4.9",

diff --git a/packages/menu/src/MenuItem.ts b/packages/menu/src/MenuItem.ts
@@ -33,6 +33,7 @@ import checkmarkStyles from '@spectrum-web-components/icon/src/spectrum-icon-che
 import type { Menu } from './Menu.js';
 import type { OverlayOpenCloseDetail } from '@spectrum-web-components/overlay';
 import { reparentChildren } from '@spectrum-web-components/shared/src/reparent-children.js';
+import { MutationController } from '@lit-labs/observers/mutation_controller.js';
 
 /**
  * Duration during which a pointing device can leave an `<sp-menu-item>` element
@@ -209,6 +210,18 @@ export class MenuItem extends LikeAnchor(Focusable) {
         this.addEventListener('click', this.handleClickCapture, {
             capture: true,
         });
+
+        new MutationController(this, {
+            config: {
+                characterData: true,
+                childList: true,
+                subtree: true,
+            },
+            callback: (): boolean => {
+                this.breakItemChildrenCache();
+                return true;
+            },
+        });
     }
 
     @property({ type: Boolean })
@@ -255,12 +268,9 @@ export class MenuItem extends LikeAnchor(Focusable) {
 
     protected override render(): TemplateResult {
         return html`
-            <slot name="icon" @slotchange=${this.breakItemChildrenCache}></slot>
+            <slot name="icon"></slot>
             <div id="label">
-                <slot
-                    id="slot"
-                    @slotchange=${this.breakItemChildrenCache}
-                ></slot>
+                <slot id="slot"></slot>
             </div>
             <slot name="value"></slot>
             ${this.selected

diff --git a/packages/picker/test/index.ts b/packages/picker/test/index.ts
@@ -114,14 +114,20 @@ export function runPickerTests(): void {
             expect((el.button.textContent || '').trim()).to.equal(
                 'Select Inverse'
             );
-            const itemUpdated = oneEvent(el, 'sp-menu-item-added-or-updated');
-            option2.innerHTML = 'Invert Selection';
+            let itemUpdated = oneEvent(el, 'sp-menu-item-added-or-updated');
+            const newLabel1 = 'Invert Selection';
+            option2.innerHTML = newLabel1;
             await itemUpdated;
             await elementUpdated(el);
             expect(el.value).to.equal('option-2');
-            expect((el.button.textContent || '').trim()).to.equal(
-                'Invert Selection'
-            );
+            expect((el.button.textContent || '').trim()).to.equal(newLabel1);
+            itemUpdated = oneEvent(el, 'sp-menu-item-added-or-updated');
+            const newLabel2 = 'Other option';
+            option2.childNodes[0].textContent = newLabel2;
+            await itemUpdated;
+            await elementUpdated(el);
+            expect(el.value).to.equal('option-2');
+            expect((el.button.textContent || '').trim()).to.equal(newLabel2);
         });
         it('accepts new selected item content when open', async () => {
             const option2 = el.querySelector('[value="option-2"') as MenuItem;