From 3af1861a09aa7eac6cd4eb0dbb7cce8ab057efec Mon Sep 17 00:00:00 2001
From: Rajdeep Chandra <rajdeepc@adobe.com>
Date: Tue, 25 Jul 2023 14:22:34 +0530
Subject: [PATCH] fix: added Mutation Observer in the tags workflow

---
 packages/tags/src/Tag.ts                      | 10 ------
 packages/tags/src/Tags.ts                     | 32 +++++++------------
 .../src/RovingTabindex.ts                     |  1 +
 3 files changed, 12 insertions(+), 31 deletions(-)

diff --git a/packages/tags/src/Tag.ts b/packages/tags/src/Tag.ts
index 4f3e223d85..ed79f20675 100644
--- 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
index f01fbae7c2..06e192af9e 100644
--- 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
index e34024d84a..749a3a05af 100644
--- 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) {