Add rovingInput option

szhsin · Jan 12, 2024 · 2654a98 · 2654a98
1 parent f035aaf
commit 2654a98
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 30 deletions.
diff --git a/dist/cjs/index.js b/dist/cjs/index.js
@@ -79,11 +79,12 @@ const useAutocomplete = ({
   };
 };
 
-const autocomplete = () => ({
+const autocomplete = ({
+  rovingInput
+} = {}) => ({
   _,
   items,
   onChange,
-  inputValue,
   setInputValue,
   focusIndex,
   setFocusIndex,
@@ -104,8 +105,9 @@ const autocomplete = () => ({
       setFocusIndex(-1);
     }
   };
-  const traverseItems = (isUp, baseIndex = -1) => {
+  const traverseItems = isUp => {
     var _items$nextIndex;
+    const baseIndex = rovingInput ? -1 : 0;
     let nextIndex = focusIndex;
     const itemLength = items.length;
     if (isUp) {
@@ -114,7 +116,7 @@ const autocomplete = () => ({
       if (++nextIndex >= itemLength) nextIndex = baseIndex;
     }
     setFocusIndex(nextIndex);
-    setInputValue((_items$nextIndex = items[nextIndex]) != null ? _items$nextIndex : _.b);
+    rovingInput && setInputValue((_items$nextIndex = items[nextIndex]) != null ? _items$nextIndex : _.b);
   };
   return {
     onItemClick: ({
@@ -128,7 +130,7 @@ const autocomplete = () => ({
       setOpen(true);
     },
     onInputClick: () => setOpen(true),
-    onBlur: () => updateAndCloseList(inputValue),
+    onBlur: () => updateAndCloseList(items[focusIndex]),
     onKeyDown: ({
       key
     }) => {
@@ -151,7 +153,7 @@ const autocomplete = () => ({
           updateAndCloseList(items[focusIndex]);
           break;
         case 'Escape':
-          updateAndCloseList(inputValue);
+          updateAndCloseList(_.b);
           break;
       }
     }

diff --git a/dist/esm/features/autocomplete.js b/dist/esm/features/autocomplete.js
@@ -1,8 +1,9 @@
-const autocomplete = () => ({
+const autocomplete = ({
+  rovingInput
+} = {}) => ({
   _,
   items,
   onChange,
-  inputValue,
   setInputValue,
   focusIndex,
   setFocusIndex,
@@ -23,8 +24,9 @@ const autocomplete = () => ({
       setFocusIndex(-1);
     }
   };
-  const traverseItems = (isUp, baseIndex = -1) => {
+  const traverseItems = isUp => {
     var _items$nextIndex;
+    const baseIndex = rovingInput ? -1 : 0;
     let nextIndex = focusIndex;
     const itemLength = items.length;
     if (isUp) {
@@ -33,7 +35,7 @@ const autocomplete = () => ({
       if (++nextIndex >= itemLength) nextIndex = baseIndex;
     }
     setFocusIndex(nextIndex);
-    setInputValue((_items$nextIndex = items[nextIndex]) != null ? _items$nextIndex : _.b);
+    rovingInput && setInputValue((_items$nextIndex = items[nextIndex]) != null ? _items$nextIndex : _.b);
   };
   return {
     onItemClick: ({
@@ -47,7 +49,7 @@ const autocomplete = () => ({
       setOpen(true);
     },
     onInputClick: () => setOpen(true),
-    onBlur: () => updateAndCloseList(inputValue),
+    onBlur: () => updateAndCloseList(items[focusIndex]),
     onKeyDown: ({
       key
     }) => {
@@ -70,7 +72,7 @@ const autocomplete = () => ({
           updateAndCloseList(items[focusIndex]);
           break;
         case 'Escape':
-          updateAndCloseList(inputValue);
+          updateAndCloseList(_.b);
           break;
       }
     }

diff --git a/src/features/autocomplete.ts b/src/features/autocomplete.ts
@@ -1,18 +1,8 @@
 import { Feature } from '../common';
 
-const autocomplete: () => Feature =
-  () =>
-  ({
-    _,
-    items,
-    onChange,
-    inputValue,
-    setInputValue,
-    focusIndex,
-    setFocusIndex,
-    isOpen,
-    setOpen
-  }) => {
+const autocomplete: (props?: { rovingInput?: boolean }) => Feature =
+  ({ rovingInput } = {}) =>
+  ({ _, items, onChange, setInputValue, focusIndex, setFocusIndex, isOpen, setOpen }) => {
     const updateValue = (value: string) => {
       _.b = value;
       setInputValue(value);
@@ -29,7 +19,8 @@ const autocomplete: () => Feature =
       }
     };
 
-    const traverseItems = (isUp: boolean, baseIndex = -1) => {
+    const traverseItems = (isUp: boolean) => {
+      const baseIndex = rovingInput ? -1 : 0;
       let nextIndex = focusIndex;
       const itemLength = items.length;
       if (isUp) {
@@ -38,7 +29,7 @@ const autocomplete: () => Feature =
         if (++nextIndex >= itemLength) nextIndex = baseIndex;
       }
       setFocusIndex(nextIndex);
-      setInputValue(items[nextIndex] ?? _.b);
+      rovingInput && setInputValue(items[nextIndex] ?? _.b);
     };
 
     return {
@@ -52,7 +43,7 @@ const autocomplete: () => Feature =
 
       onInputClick: () => setOpen(true),
 
-      onBlur: () => updateAndCloseList(inputValue),
+      onBlur: () => updateAndCloseList(items[focusIndex]),
 
       onKeyDown: ({ key }) => {
         switch (key) {
@@ -74,7 +65,7 @@ const autocomplete: () => Feature =
             updateAndCloseList(items[focusIndex]);
             break;
           case 'Escape':
-            updateAndCloseList(inputValue);
+            updateAndCloseList(_.b);
             break;
         }
       }

diff --git a/types/features/autocomplete.d.ts b/types/features/autocomplete.d.ts
@@ -1,3 +1,5 @@
 import { Feature } from '../common';
-declare const autocomplete: () => Feature;
+declare const autocomplete: (props?: {
+    rovingInput?: boolean;
+}) => Feature;
 export { autocomplete };