Autocompleteinput select first match flag

package.json

@@ -1,7 +1,7 @@
 {
   "name": "roamjs-components",
   "description": "Expansive toolset, utilities, & components for developing RoamJS extensions.",
-  "version": "0.85.4",
+  "version": "0.85.5",
   "main": "index.js",
   "types": "index.d.ts",
   "scripts": {

src/components.tsx

@@ -69,6 +69,8 @@ const components = [
         const [numResults, setNumResults] = useState(100);
         const [disabled, setDisabled] = useState(false);
         const [maxItemsDisplayed, setMaxItemsDisplayed] = useState(0);
+        const [autoSelectFirstOption, setAutoSelectFirstOption] =
+          useState(true);
         const options = useMemo(() => {
           const items = [];
           for (let i = 0; i < numResults; i++) {
@@ -102,9 +104,17 @@ const components = [
               }
               label={"Disabled"}
             />
+            <Checkbox
+              checked={autoSelectFirstOption}
+              onChange={(e) =>
+                setAutoSelectFirstOption((e.target as HTMLInputElement).checked)
+              }
+              label={"Auto Select First Option"}
+            />
             <Label>
               Autocomplete
               <AutocompleteInput
+                autoSelectFirstOption={autoSelectFirstOption}
                 disabled={disabled}
                 value={value}
                 setValue={setValue}

src/components/AutocompleteInput.tsx

@@ -42,6 +42,7 @@ export type AutocompleteInputProps<T = string> = {
   onNewItem?: OnNewItem<T>;
   disabled?: boolean;
   maxItemsDisplayed?: number;
+  autoSelectFirstOption?: boolean;
 };
 
 // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
@@ -62,6 +63,7 @@ const AutocompleteInput = <T extends unknown = string>({
   onNewItem: _onNewItem,
   disabled,
   maxItemsDisplayed = Infinity,
+  autoSelectFirstOption = true,
 }: AutocompleteInputProps<T>): React.ReactElement => {
   const [isOpen, setIsOpen] = useState(false);
   const itemToQuery = useMemo<ItemToQuery<T>>(
@@ -121,9 +123,22 @@ const AutocompleteInput = <T extends unknown = string>({
     else open();
   }, [items, close, open, isTyping]);
   useEffect(() => {
-    if (query && isOpen) setValue(items[activeIndex] || onNewItem(query));
-    else if (query) setValue(onNewItem(query));
-  }, [setValue, activeIndex, items, onNewItem, query]);
+    if (!query || !isTyping) return;
+    if (autoSelectFirstOption && isOpen) {
+      setValue(items[activeIndex] || onNewItem(query));
+      return;
+    }
+    setValue(onNewItem(query));
+  }, [
+    setValue,
+    activeIndex,
+    items,
+    onNewItem,
+    isTyping,
+    query,
+    isOpen,
+    autoSelectFirstOption,
+  ]);
   useEffect(() => {
     if (
       inputRef.current &&