fix(tags): delete functionality working

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

Hide file tree

Showing 4 changed files with 25 additions and 24 deletions.
diff --git a/packages/tags/src/Tag.ts b/packages/tags/src/Tag.ts
@@ -31,6 +31,7 @@ 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'],
 }) {
@@ -99,6 +100,9 @@ export class Tag extends SizedMixin(SpectrumElement, {
         if (deleteEvent.defaultPrevented) {
             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
@@ -18,10 +18,11 @@ import {
 } from '@spectrum-web-components/base';
 import { queryAssignedNodes } from '@spectrum-web-components/base/src/decorators.js';
 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 { Tag } from './Tag.js';
+import { nextSibling, Tag } from './Tag.js';
 
 import styles from './tags.css.js';
 
@@ -31,6 +32,9 @@ import styles from './tags.css.js';
  * @slot - Tag elements to manage as a group
  */
 export class Tags extends FocusVisiblePolyfillMixin(SpectrumElement) {
+    @property({ type: Number, reflect: true })
+    public currentFocusedElementIndex = 0;
+
     public static override get styles(): CSSResultArray {
         return [styles];
     }
@@ -62,7 +66,9 @@ export class Tags extends FocusVisiblePolyfillMixin(SpectrumElement) {
                 subtree: true,
             },
             callback: () => {
-                this.rovingTabindexController.changeDefaultItemFocus();
+                this.rovingTabindexController.changeDefaultItemFocus(
+                    nextSibling
+                );
             },
         });
         this.addEventListener('focusin', this.handleFocusin);
@@ -80,7 +86,6 @@ export class Tags extends FocusVisiblePolyfillMixin(SpectrumElement) {
     private handleKeydown = (event: KeyboardEvent): void => {
         const { code } = event;
         if (code !== 'PageUp' && code !== 'PageDown') return;
-
         const circularIndexedElement = <T extends HTMLElement>(
             list: T[],
             index: number

diff --git a/packages/tags/stories/tags.stories.ts b/packages/tags/stories/tags.stories.ts
@@ -86,8 +86,17 @@ export const deletable = (args: Props): TemplateResult => {
     return html`
         <sp-tags @delete=${args.onDelete}>
             <sp-tag deletable>Tag 1</sp-tag>
-            <sp-tag invalid deletable>Tag 2</sp-tag>
-            <sp-tag disabled deletable>Tag 3</sp-tag>
+            <sp-tag deletable>Tag 2</sp-tag>
+            <sp-tag deletable>Tag 3</sp-tag>
+            <sp-tag deletable>Tag 4</sp-tag>
+            <sp-tag deletable>Tag 5</sp-tag>
+            <sp-tag deletable>Tag 6</sp-tag>
+            <sp-tag deletable>Tag 7</sp-tag>
+            <sp-tag deletable>Tag 8</sp-tag>
+            <sp-tag deletable>Tag 9</sp-tag>
+            <sp-tag deletable>Tag 10</sp-tag>
+            <sp-tag invalid deletable>Tag 11</sp-tag>
+            <sp-tag deletable>Tag 12</sp-tag>
         </sp-tags>
         <br />
         <br />

diff --git a/tools/reactive-controllers/src/RovingTabindex.ts b/tools/reactive-controllers/src/RovingTabindex.ts
@@ -74,25 +74,8 @@ 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) {
-            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();
-        }
+    changeDefaultItemFocus(el: HTMLElement): void {
+        el?.focus();
     }
 
     override manage(): void {