fix(autocomplete): ignore disabled items when navigating via keyboard (…

…#11242) **Related Issue:** #11152 ## Summary - Only includes enabled items in keyboard navigation - disabled items are ignored BEGIN_COMMIT_OVERRIDE omitted from changelog END_COMMIT_OVERRIDE
Esri · Jan 9, 2025 · 2c55557 · 2c55557
1 parent 2cdc294
commit 2c55557
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 3 deletions.
diff --git a/packages/calcite-components/src/components/autocomplete/autocomplete.e2e.ts b/packages/calcite-components/src/components/autocomplete/autocomplete.e2e.ts
@@ -35,6 +35,21 @@ const simpleHTML = html`
   </calcite-autocomplete>
 `;
 
+const simpleHTMLDisabledItems = html`
+  <calcite-autocomplete label="Item list" id="myAutocomplete">
+    <calcite-autocomplete-item label="Item one" value="one" heading="Item one"></calcite-autocomplete-item>
+    <calcite-autocomplete-item disabled label="Item two" value="two" heading="Item two"></calcite-autocomplete-item>
+    <calcite-autocomplete-item
+      disabled
+      label="Item three"
+      value="three"
+      heading="Item three"
+    ></calcite-autocomplete-item>
+    <calcite-autocomplete-item disabled label="Item four" value="four" heading="Item four"></calcite-autocomplete-item>
+    <calcite-autocomplete-item label="Item five" value="five" heading="Item five"></calcite-autocomplete-item>
+  </calcite-autocomplete>
+`;
+
 const scrollHTML = html`<calcite-autocomplete label="Item list" id="myAutocomplete">
   <calcite-autocomplete-item label="Item one" value="one" heading="Item one"></calcite-autocomplete-item>
   <calcite-autocomplete-item label="Item two" value="two" heading="Item two"></calcite-autocomplete-item>
@@ -547,6 +562,44 @@ describe("calcite-autocomplete", () => {
       }
     });
 
+    it("should navigate with arrow keys and mostly disabled items", async () => {
+      const page = await newE2EPage();
+      await page.setContent(simpleHTMLDisabledItems);
+
+      const autocomplete = await page.find("calcite-autocomplete");
+      autocomplete.callMethod("setFocus");
+      await page.waitForChanges();
+
+      expect(await autocomplete.getProperty("open")).toBe(true);
+
+      const items = await page.findAll("calcite-autocomplete-item");
+
+      for (let i = 0; i < items.length; i++) {
+        expect(await items[i].getProperty("active")).toBe(false);
+      }
+
+      await page.keyboard.press("ArrowDown");
+      await page.waitForChanges();
+
+      for (let i = 0; i < items.length; i++) {
+        expect(await items[i].getProperty("active")).toBe(i === 0);
+      }
+
+      await page.keyboard.press("ArrowDown");
+      await page.waitForChanges();
+
+      for (let i = 0; i < items.length; i++) {
+        expect(await items[i].getProperty("active")).toBe(i === items.length - 1);
+      }
+
+      await page.keyboard.press("ArrowUp");
+      await page.waitForChanges();
+
+      for (let i = 0; i < items.length; i++) {
+        expect(await items[i].getProperty("active")).toBe(i === 0);
+      }
+    });
+
     it("should navigate with home/end keys", async () => {
       const page = await newE2EPage();
       await page.setContent(simpleHTML);
@@ -577,6 +630,37 @@ describe("calcite-autocomplete", () => {
         expect(await items[i].getProperty("active")).toBe(i === 0);
       }
     });
+
+    it("should navigate with home/end key and mostly disabled items", async () => {
+      const page = await newE2EPage();
+      await page.setContent(simpleHTMLDisabledItems);
+
+      const autocomplete = await page.find("calcite-autocomplete");
+      autocomplete.callMethod("setFocus");
+      await page.waitForChanges();
+
+      expect(await autocomplete.getProperty("open")).toBe(true);
+
+      const items = await page.findAll("calcite-autocomplete-item");
+
+      for (let i = 0; i < items.length; i++) {
+        expect(await items[i].getProperty("active")).toBe(false);
+      }
+
+      await page.keyboard.press("End");
+      await page.waitForChanges();
+
+      for (let i = 0; i < items.length; i++) {
+        expect(await items[i].getProperty("active")).toBe(i === items.length - 1);
+      }
+
+      await page.keyboard.press("Home");
+      await page.waitForChanges();
+
+      for (let i = 0; i < items.length; i++) {
+        expect(await items[i].getProperty("active")).toBe(i === 0);
+      }
+    });
   });
 
   it("should close when document is clicked", async () => {

diff --git a/packages/calcite-components/src/components/autocomplete/autocomplete.tsx b/packages/calcite-components/src/components/autocomplete/autocomplete.tsx
@@ -617,16 +617,19 @@ export class Autocomplete
   private updateItems(): void {
     let activeDescendant: string = null;
 
-    this.items.forEach((item, index) => {
+    this.items.forEach((item) => {
+      item.scale = this.scale;
+      item.inputValueMatchPattern = this.inputValueMatchPattern;
+    });
+
+    this.enabledItems.forEach((item, index) => {
       const isActive = index === this.activeIndex;
 
       if (isActive) {
         activeDescendant = item.guid;
       }
 
       item.active = isActive;
-      item.scale = this.scale;
-      item.inputValueMatchPattern = this.inputValueMatchPattern;
     });
 
     this.activeDescendant = activeDescendant;