ListNext fix keyboard nav and expose hook setters (#2112)

jpmorganchase · Aug 1, 2023 · 8c77cdb · 8c77cdb · vercel · Aug 1, 2023
1 parent ce0c73b
commit 8c77cdb
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 4 deletions.
diff --git a/.changeset/rich-horses-tie.md b/.changeset/rich-horses-tie.md
@@ -0,0 +1,6 @@
+---
+"@salt-ds/lab": minor
+---
+
+- Fixed tab in `ListNext` keyboard navigation
+- Exposed `setSelectedItem` and `setHighlightedItem` from useList.
diff --git a/packages/lab/src/list-next/ListNext.tsx b/packages/lab/src/list-next/ListNext.tsx
@@ -30,7 +30,7 @@ export interface ListNextProps
   /* Value for the controlled version. */
   selected?: string;
   /* Callback for change event. */
-  onChange?: (e: SyntheticEvent, data: { value: string }) => void;
+  onChange?: (event: SyntheticEvent, data: { value: string }) => void;
   /* Initial selection. */
   defaultSelected?: string;
 }

diff --git a/packages/lab/src/list-next/useList.ts b/packages/lab/src/list-next/useList.ts
@@ -238,7 +238,7 @@ export const useList = ({
   };
 
   // takes care of keydown when using keyboard navigation
-  const keyDownHandler = (event: KeyboardEvent<HTMLUListElement>) => {
+  const keyDownHandler = (event: KeyboardEvent<HTMLElement>) => {
     const { key } = event;
     const currentItem = getActiveItem();
     let nextItem = currentItem;
@@ -280,9 +280,10 @@ export const useList = ({
         break;
       case "PageDown":
       case "PageUp":
-      default:
         event.preventDefault();
         break;
+      default:
+        break;
     }
   };
 
@@ -308,6 +309,8 @@ export const useList = ({
     activeDescendant,
     selectedItem,
     highlightedItem,
+    setSelectedItem,
+    setHighlightedItem,
     contextValue,
     focusVisibleRef,
   };

diff --git a/packages/lab/stories/list-next/list.stories.tsx b/packages/lab/stories/list-next/list.stories.tsx
@@ -83,11 +83,11 @@ export const Controlled: Story<ListNextProps> = ({ onChange, ...rest }) => {
 
   const handleClick = (index: number) => {
     setSelectedItem(usStateExampleData[index]);
-    setHighlightedIndex(index);
   };
 
   const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
     const inputValue = event.target.value.toLowerCase();
+    setSelectedItem(inputValue);
     const firstMatchingItem =
       inputValue.length - 1 >= 0
         ? usStateExampleData.findIndex((item) =>