fix: removed mutation controller from tags and added to focusgroup

adobe · Aug 18, 2023 · aaa1bc0 · aaa1bc0
1 parent 60e6c2e
commit aaa1bc0
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 28 deletions.
diff --git a/packages/tags/src/Tag.ts b/packages/tags/src/Tag.ts
@@ -31,7 +31,6 @@ import styles from './tag.css.js';
  * @slot avatar - an avatar element to display within the Tag
  * @slot icon - an icon element to display within the Tag
  */
-export let nextSibling: HTMLElement;
 export class Tag extends SizedMixin(SpectrumElement, {
     validSizes: ['s', 'm', 'l'],
 }) {
@@ -91,18 +90,15 @@ export class Tag extends SizedMixin(SpectrumElement, {
         if (this.readonly) {
             return;
         }
-        const deleteEvent = new Event('delete', {
-            bubbles: true,
-            composed: true,
-        });
-        this.dispatchEvent(deleteEvent);
-
-        if (deleteEvent.defaultPrevented) {
+        const applyDefault = this.dispatchEvent(
+            new Event('delete', {
+                bubbles: true,
+                composed: true,
+            })
+        );
+        if (!applyDefault) {
             return;
         }
-        nextSibling =
-            (this.nextElementSibling as HTMLElement) ||
-            (this.previousElementSibling as HTMLElement);
         this.remove();
     }
 

diff --git a/packages/tags/src/Tags.ts b/packages/tags/src/Tags.ts
@@ -20,9 +20,8 @@ import { queryAssignedNodes } from '@spectrum-web-components/base/src/decorators
 import { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js';
 import { property } from '@spectrum-web-components/base/src/decorators.js';
 import { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';
-import { MutationController } from '@lit-labs/observers/mutation-controller.js';
 
-import { nextSibling, Tag } from './Tag.js';
+import { Tag } from './Tag.js';
 
 import styles from './tags.css.js';
 
@@ -60,17 +59,6 @@ export class Tags extends FocusVisiblePolyfillMixin(SpectrumElement) {
 
     constructor() {
         super();
-        new MutationController(this, {
-            config: {
-                childList: true,
-                subtree: true,
-            },
-            callback: () => {
-                this.rovingTabindexController.changeDefaultItemFocus(
-                    nextSibling
-                );
-            },
-        });
         this.addEventListener('focusin', this.handleFocusin);
     }
 

diff --git a/tools/reactive-controllers/src/FocusGroup.ts b/tools/reactive-controllers/src/FocusGroup.ts
@@ -10,6 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 import type { ReactiveController, ReactiveElement } from 'lit';
+import { MutationController } from '@lit-labs/observers/mutation-controller.js';
 
 type DirectionTypes = 'horizontal' | 'vertical' | 'both' | 'grid';
 export type FocusGroupConfig<T> = {
@@ -123,6 +124,15 @@ export class FocusGroupController<T extends HTMLElement>
             listenerScope,
         }: FocusGroupConfig<T> = { elements: () => [] }
     ) {
+        new MutationController(host, {
+            config: {
+                childList: true,
+                subtree: true,
+            },
+            callback: () => {
+                this.changeDefaultItemFocus();
+            },
+        });
         this.host = host;
         this.host.addController(this);
         this._elements = elements;
@@ -145,6 +155,27 @@ export class FocusGroupController<T extends HTMLElement>
         );
     }
 
+    changeDefaultItemFocus(): void {
+        const currentIndex = this.currentIndex;
+        // console.log(this.currentIndex)
+        let focusIndex = currentIndex;
+        if (currentIndex < this.elements.length - 1) {
+            for (let i = currentIndex + 1; i < this.elements.length; i++) {
+                focusIndex = i;
+                break;
+            }
+        } else if (currentIndex > 0) {
+            for (let i = currentIndex - 1; i >= 0; i--) {
+                focusIndex = i;
+                break;
+            }
+        }
+        if (focusIndex !== currentIndex) {
+            const focusElement = this.elements[focusIndex];
+            focusElement.focus();
+        }
+    }
+
     update({ elements }: FocusGroupConfig<T> = { elements: () => [] }): void {
         this.unmanage();
         this._elements = elements;

diff --git a/tools/reactive-controllers/src/RovingTabindex.ts b/tools/reactive-controllers/src/RovingTabindex.ts
@@ -74,10 +74,6 @@ export class RovingTabindexController<
         });
     }
 
-    changeDefaultItemFocus(el: HTMLElement): void {
-        el?.focus();
-    }
-
     override manage(): void {
         this.managed = true;
         this.manageTabindexes();