🐛 Combobox not working

anubra266 · Jun 1, 2021 · 827e1a6 · 827e1a6
1 parent 0bba152
commit 827e1a6
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 22 deletions.
diff --git a/example/app.tsx b/example/app.tsx
@@ -23,21 +23,15 @@ const App = () => {
     <Flex justify="center" pt="150px">
       <AutoComplete
         rollNavigation
-        focusInputOnSelect
-        openOnFocus
+        // focusInputOnSelect
+        // openOnFocus
         emphasize
         // freeSolo
         // creatable
-        suggestWhenEmpty
+        // suggestWhenEmpty
         // closeOnselect={false}
       >
-        <AutoCompleteInput
-          variant="filled"
-          placeholder="Search..."
-          defaultValue="app"
-          autoFocus
-          initialFilter={true}
-        />
+        <AutoCompleteInput variant="filled" placeholder="Search..." autoFocus />
         <AutoCompleteList>
           {options.map((option, oid) => (
             <AutoCompleteItem

diff --git a/src/auto-complete-input.tsx b/src/auto-complete-input.tsx
@@ -7,6 +7,7 @@ import { handleNavigation, useOptionsFilter } from './helpers/input';
 import { ListAction } from './store/reducers/list';
 import { AutoCompleteAction } from './store/reducers/autocomplete';
 import { closeList } from './helpers/list';
+import { returnT } from './utils/operations';
 
 export interface AutoCompleteInputProps extends InputProps {
   initialFilter?: boolean;
@@ -38,6 +39,7 @@ export const AutoCompleteInput = forwardRef<AutoCompleteInputProps, 'input'>(
       suggestWhenEmpty,
       closeOnBlur,
       closeOnselect,
+      value: autoCompleteValue,
     } = autocomplete;
 
     const isEmpty = item.filtered.length < 1 && !emptyState;
@@ -82,7 +84,13 @@ export const AutoCompleteInput = forwardRef<AutoCompleteInputProps, 'input'>(
     const handleBlur: React.FocusEventHandler<HTMLInputElement> = e => {
       runIfFn(onBlur, e);
       const listIsFocused = e.relatedTarget === listRef?.current;
-      if (!listIsFocused && closeOnBlur) hideList();
+      if (!listIsFocused && closeOnBlur) {
+        hideList();
+        if (e.target.value !== autoCompleteValue && !freeSolo) {
+          dispatch({ type: InputAction.Set, payload: autoCompleteValue });
+          returnT(internalRef.current).value = autoCompleteValue;
+        }
+      }
     };
 
     return (

diff --git a/src/helpers/list.ts b/src/helpers/list.ts
@@ -1,10 +1,8 @@
 import React, { ReactNode, useState } from 'react';
 import { State, StoreDispatch } from '../store';
-import { InputAction } from '../store/reducers/input';
 import { Item } from '../store/reducers/item';
 import { ListAction } from '../store/reducers/list';
 import { isChild } from '../utils/components';
-import { returnT } from '../utils/operations';
 
 export const handleListChild = (child: any, state: State) => {
   const type = child.type.displayName;
@@ -86,14 +84,6 @@ export const useRefDimensions = (
 };
 
 export const closeList = (state: State, dispatch: StoreDispatch) => {
-  const {
-    autocomplete: { value: autoCompleteValue, freeSolo },
-    input: { value: inputValue, ref: inputRef },
-  } = state;
-
   dispatch({ type: ListAction.Hide });
-  if (inputValue !== autoCompleteValue && !freeSolo) {
-    dispatch({ type: InputAction.Set, payload: autoCompleteValue });
-    returnT(inputRef?.current).value = autoCompleteValue;
-  }
+  console.log(state);
 };