Feat/473: TypeaheadSelector component

src/components/account-filter.cy.tsx

@@ -43,32 +43,63 @@ describe("<AccountFilter>", () => {
     cy.mount(<AccountFilterTestWrapper />);
 
     /** Default value is properly set to first option */
-    cy.get("select").should("have.value", accountsSorted[0].account_sid);
+    cy.get("input").should("have.value", accountsSorted[0].name);
   });
 
   it("updates value onChange", () => {
     cy.mount(<AccountFilterTestWrapper />);
 
     /** Assert onChange value updates */
-    cy.get("select").select(accountsSorted[1].account_sid);
-    cy.get("select").should("have.value", accountsSorted[1].account_sid);
+    cy.get("input").clear();
+    cy.get("input").type(accountsSorted[1].name);
+    cy.get("input").should("have.value", accountsSorted[1].name);
   });
 
   it("manages the focused state", () => {
     cy.mount(<AccountFilterTestWrapper />);
 
     /** Test the `focused` state className (applied onFocus) */
-    cy.get("select").select(accountsSorted[1].account_sid);
-    cy.get(".account-filter").should("have.class", "focused");
-    cy.get("select").blur();
-    cy.get(".account-filter").should("not.have.class", "focused");
+    cy.get("input").clear();
+    cy.get("input").type(accountsSorted[1].name);
+    cy.get("input").parent().should("have.class", "focused");
+    cy.get("input").blur();
+    cy.get("input").parent().should("not.have.class", "focused");
   });
 
   it("renders with default option", () => {
     /** Test with the `defaultOption` prop */
     cy.mount(<AccountFilterTestWrapper defaultOption />);
-
     /** No default value is set when this prop is present */
-    cy.get("select").should("have.value", "");
+    cy.get("input").should("have.value", "All accounts");
+  });
+
+  it("verify the typeahead dropdown", () => {
+    /** Test by typing cus then custom account is selected */
+    cy.mount(<AccountFilterTestWrapper defaultOption />);
+    cy.get("input").clear();
+    cy.get("input").type("cus");
+    cy.get("div#account_filter-option-1").should("have.text", "custom account");
+  });
+  it("handles Enter key press", () => {
+    cy.mount(<AccountFilterTestWrapper />);
+
+    cy.get("input").clear();
+    cy.get("input").type("cus{enter}");
+    cy.get("input").should("have.value", "custom account");
+  });
+  it("navigates down and up with arrow keys", () => {
+    cy.mount(<AccountFilterTestWrapper />);
+
+    cy.get("input").clear();
+    // Press arrow down to move to the first option
+    cy.get("input").type("{downarrow}");
+    cy.get("input").type("{enter}");
+    cy.get("input").should("have.value", "default account");
+
+    // Press up to move to the previous option
+    cy.get("input").type("{uparrow}");
+    cy.get("input").type("{uparrow}");
+    cy.get("input").type("{enter}");
+    cy.get("input").should("have.value", "custom account");
   });
 });

src/components/account-filter.tsx

@@ -1,7 +1,7 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import { classNames } from "@jambonz/ui-kit";
 
-import { Icons } from "src/components/icons";
+import { TypeaheadSelector } from "src/components/forms";
 
 import type { Account } from "src/api/types";
 import { hasLength, sortLocaleName } from "src/utils";
@@ -22,12 +22,10 @@ export const AccountFilter = ({
   accounts,
   defaultOption,
 }: AccountFilterProps) => {
-  const [focus, setFocus] = useState(false);
   const classes = {
     smsel: true,
     "smsel--filter": true,
     "account-filter": true,
-    focused: focus,
   };
 
   useEffect(() => {
@@ -36,41 +34,30 @@ export const AccountFilter = ({
     }
   }, [accounts, defaultOption, setAccountSid]);
 
+  const options = [
+    ...(defaultOption ? [{ name: "All accounts", value: "" }] : []),
+    ...(hasLength(accounts)
+      ? accounts.sort(sortLocaleName).map((acct) => ({
+          name: acct.name,
+          value: acct.account_sid,
+        }))
+      : []),
+  ];
+
   return (
     <div className={classNames(classes)}>
       {label && <label htmlFor="account_filter">{label}:</label>}
-      <div>
-        <select
-          id="account_filter"
-          name="account_filter"
-          value={accountSid}
-          onChange={(e) => {
-            setAccountSid(e.target.value);
-            setAccountFilter(e.target.value);
-          }}
-          onFocus={() => setFocus(true)}
-          onBlur={() => setFocus(false)}
-        >
-          {defaultOption ? (
-            <option value="">All accounts</option>
-          ) : (
-            accounts &&
-            !accounts.length && <option value="">No accounts</option>
-          )}
-          {hasLength(accounts) &&
-            accounts.sort(sortLocaleName).map((acct) => {
-              return (
-                <option key={acct.account_sid} value={acct.account_sid}>
-                  {acct.name}
-                </option>
-              );
-            })}
-        </select>
-        <span>
-          <Icons.ChevronUp />
-          <Icons.ChevronDown />
-        </span>
-      </div>
+      <TypeaheadSelector
+        id="account_filter"
+        name="account_filter"
+        value={accountSid}
+        options={options}
+        className="small"
+        onChange={(e) => {
+          setAccountSid(e.target.value);
+          setAccountFilter(e.target.value);
+        }}
+      />
     </div>
   );
 };

src/components/forms/account-select.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, forwardRef } from "react";
 
-import { Selector } from "src/components/forms";
+import { TypeaheadSelector } from "src/components/forms";
 
 import type { Account } from "src/api/types";
 import { hasLength } from "src/utils";
@@ -16,7 +16,7 @@ type AccountSelectProps = {
   disabled?: boolean;
 };
 
-type SelectorRef = HTMLSelectElement;
+type SelectorRef = HTMLInputElement;
 
 export const AccountSelect = forwardRef<SelectorRef, AccountSelectProps>(
   (
@@ -41,7 +41,7 @@ export const AccountSelect = forwardRef<SelectorRef, AccountSelectProps>(
         <label htmlFor="account_sid">
           {label} {required && <span>*</span>}
         </label>
-        <Selector
+        <TypeaheadSelector
           ref={ref}
           id="account_sid"
           name="account_sid"

src/components/forms/application-select.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, forwardRef } from "react";
 
-import { Selector } from "src/components/forms";
+import { TypeaheadSelector } from "src/components/forms";
 import { hasLength } from "src/utils";
 
 import type { Application } from "src/api/types";
@@ -18,7 +18,7 @@ type ApplicationSelectProps = {
   disabled?: boolean;
 };
 
-type SelectorRef = HTMLSelectElement;
+type SelectorRef = HTMLInputElement;
 
 export const ApplicationSelect = forwardRef<
   SelectorRef,
@@ -47,7 +47,7 @@ export const ApplicationSelect = forwardRef<
         <label htmlFor={id}>
           {label} {required && <span>*</span>}
         </label>
-        <Selector
+        <TypeaheadSelector
           ref={ref}
           id={id}
           name={id}

src/components/forms/index.ts

@@ -6,6 +6,7 @@ import { FileUpload } from "./file-upload";
 import { AccountSelect } from "./account-select";
 import { ApplicationSelect } from "./application-select";
 import { LocalLimits, useLocalLimitsRef } from "./local-limits";
+import { TypeaheadSelector } from "./typeahead-selector";
 
 export {
   Passwd,
@@ -17,4 +18,5 @@ export {
   ApplicationSelect,
   LocalLimits,
   useLocalLimitsRef,
+  TypeaheadSelector,
 };