feat(list, list-item): Add setFocus method. #3275

Esri · Oct 18, 2021 · c4edbc5 · c4edbc5
1 parent 3815709
commit c4edbc5
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 5 deletions.
diff --git a/src/components/calcite-list-item/calcite-list-item.e2e.ts b/src/components/calcite-list-item/calcite-list-item.e2e.ts
@@ -1,11 +1,16 @@
 import { newE2EPage } from "@stencil/core/testing";
-import { hidden, renders } from "../../tests/commonTests";
+import { hidden, renders, focusable } from "../../tests/commonTests";
 import { defaults } from "../../tests/commonTests";
 import { CSS } from "./resources";
 
 describe("calcite-list-item", () => {
   it("renders", async () => renders("calcite-list-item", { display: "flex" }));
 
+  it("is focusable", () =>
+    focusable("calcite-list-item", {
+      focusTargetSelector: `.${CSS.contentContainerButton}`
+    }));
+
   it("honors hidden attribute", async () => hidden("calcite-list-item"));
 
   it("has property defaults", async () =>

diff --git a/src/components/calcite-list-item/calcite-list-item.tsx b/src/components/calcite-list-item/calcite-list-item.tsx
@@ -1,4 +1,4 @@
-import { Component, Element, Prop, h, VNode, Host } from "@stencil/core";
+import { Component, Element, Prop, h, VNode, Host, Method } from "@stencil/core";
 import { SLOTS, CSS } from "./resources";
 import { getSlotted } from "../../utils/dom";
 
@@ -49,6 +49,20 @@ export class CalciteListItem {
 
   @Element() el: HTMLCalciteListItemElement;
 
+  focusEl: HTMLButtonElement;
+
+  // --------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  // --------------------------------------------------------------------------
+
+  /** Sets focus on the component. */
+  @Method()
+  async setFocus(): Promise<void> {
+    this.focusEl?.focus();
+  }
+
   // --------------------------------------------------------------------------
   //
   //  Render Methods
@@ -111,11 +125,14 @@ export class CalciteListItem {
       <button
         class={{ [CSS.contentContainer]: true, [CSS.contentContainerButton]: true }}
         disabled={disabled}
+        ref={(focusEl) => (this.focusEl = focusEl)}
       >
         {content}
       </button>
     ) : (
-      <div class={CSS.contentContainer}>{content}</div>
+      <div class={CSS.contentContainer} ref={() => (this.focusEl = null)}>
+        {content}
+      </div>
     );
   }
 

diff --git a/src/components/calcite-list/calcite-list.e2e.ts b/src/components/calcite-list/calcite-list.e2e.ts
@@ -1,8 +1,19 @@
-import { accessible, hidden, renders } from "../../tests/commonTests";
+import { accessible, hidden, renders, focusable } from "../../tests/commonTests";
+import { html } from "../../tests/utils";
 
 describe("calcite-list", () => {
   it("renders", async () => renders("calcite-list", { display: "block" }));
 
+  it("is focusable", () =>
+    focusable(
+      html`<calcite-list>
+        <calcite-list-item label="test" description="hello world"></calcite-list-item>
+      </calcite-list>`,
+      {
+        focusTargetSelector: "calcite-list-item"
+      }
+    ));
+
   it("honors hidden attribute", async () => hidden("calcite-list"));
 
   it("should be accessible", async () => {

diff --git a/src/components/calcite-list/calcite-list.tsx b/src/components/calcite-list/calcite-list.tsx
@@ -1,4 +1,4 @@
-import { Component, h, VNode, Host, Prop } from "@stencil/core";
+import { Component, Element, h, VNode, Host, Prop, Method } from "@stencil/core";
 import { CSS } from "./resources";
 import { HeadingLevel } from "../functional/CalciteHeading";
 
@@ -23,6 +23,29 @@ export class CalciteList {
    */
   @Prop() headingLevel: HeadingLevel;
 
+  // --------------------------------------------------------------------------
+  //
+  //  Private Properties
+  //
+  // --------------------------------------------------------------------------
+
+  @Element() el: HTMLCalciteListElement;
+
+  // --------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  // --------------------------------------------------------------------------
+
+  /** Sets focus on the component. */
+  @Method()
+  async setFocus(): Promise<void> {
+    const firstListItem: HTMLCalciteListItemElement = this.el.querySelector(
+      `calcite-list-item:not("non-interactive")`
+    );
+    firstListItem?.setFocus();
+  }
+
   // --------------------------------------------------------------------------
   //
   //  Render Methods