fix: added Mutation Observer in the tags workflow

adobe · Aug 18, 2023 · 3af1861 · 3af1861
1 parent f4d7269
commit 3af1861
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 31 deletions.
diff --git a/packages/tags/src/Tag.ts b/packages/tags/src/Tag.ts
@@ -86,15 +86,6 @@ export class Tag extends SizedMixin(SpectrumElement, {
         }
     };
 
-    private shiftFocusOnEvent(): void {
-        const event = new CustomEvent('sp-tag-focus', {
-            bubbles: true,
-            composed: true,
-            cancelable: true,
-        });
-        this.dispatchEvent(event);
-    }
-
     private delete(): void {
         if (this.readonly) {
             return;
@@ -108,7 +99,6 @@ export class Tag extends SizedMixin(SpectrumElement, {
         if (deleteEvent.defaultPrevented) {
             return;
         }
-        this.shiftFocusOnEvent();
         this.remove();
     }
 

diff --git a/packages/tags/src/Tags.ts b/packages/tags/src/Tags.ts
@@ -19,6 +19,7 @@ import {
 import { queryAssignedNodes } from '@spectrum-web-components/base/src/decorators.js';
 import { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js';
 import { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';
+import { MutationController } from '@lit-labs/observers/mutation-controller.js';
 
 import { Tag } from './Tag.js';
 
@@ -55,6 +56,15 @@ export class Tags extends FocusVisiblePolyfillMixin(SpectrumElement) {
 
     constructor() {
         super();
+        new MutationController(this, {
+            config: {
+                childList: true,
+                subtree: true,
+            },
+            callback: () => {
+                this.rovingTabindexController.changeDefaultItemFocus();
+            },
+        });
         this.addEventListener('focusin', this.handleFocusin);
     }
 
@@ -104,29 +114,9 @@ export class Tags extends FocusVisiblePolyfillMixin(SpectrumElement) {
         this.rovingTabindexController.clearElementCache();
     }
 
-    private async changeDefaultFocus(event: Event): Promise<void> {
-        if (event.defaultPrevented) {
-            return;
-        }
-        // check if tags are not present
-        if (this.tags && !this.tags.length) {
-            return;
-        }
-        // check if tag item is disabled
-        this.tags.forEach((item) => {
-            if (item.disabled) {
-                return;
-            }
-        });
-        this.rovingTabindexController.changeDefaultItemFocus();
-    }
-
     protected override render(): TemplateResult {
         return html`
-            <slot
-                @slotchange=${this.handleSlotchange}
-                @sp-tag-focus=${this.changeDefaultFocus}
-            ></slot>
+            <slot @slotchange=${this.handleSlotchange}></slot>
         `;
     }
 

diff --git a/tools/reactive-controllers/src/RovingTabindex.ts b/tools/reactive-controllers/src/RovingTabindex.ts
@@ -75,6 +75,7 @@ export class RovingTabindexController<
     }
 
     changeDefaultItemFocus(): void {
+        // console.log(" I am called from RovingTab Index")
         const currentIndex = this.currentIndex;
         let focusIndex = currentIndex;
         if (currentIndex < this.elements.length - 1) {