add invalid on option click behaviour

AppQuality · Oct 18, 2024 · 2a78bb5 · 2a78bb5
1 parent 607fefa
commit 2a78bb5
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/src/stories/dropdowns/autocomplete/index.stories.tsx b/src/stories/dropdowns/autocomplete/index.stories.tsx
@@ -37,7 +37,12 @@ const TemplateCreatable: Story<AutocompleteProps> = (args) => {
         onCreateNewOption={async (inputValue) => {
           // mock a promise to create a new item
           return await new Promise((resolve) => setTimeout(() => {
-            resolve({ label: inputValue, value: inputValue, id: inputValue });
+            if (inputValue === "invalid") {
+              alert("Invalid value");
+              resolve(false);
+            } else {
+              resolve({ label: inputValue, value: inputValue, id: inputValue });
+            }
           }, 1000));
         }}
         onOptionClick={({ selectionValue }) => {

diff --git a/src/stories/dropdowns/autocomplete/index.tsx b/src/stories/dropdowns/autocomplete/index.tsx
@@ -20,7 +20,7 @@ export interface AutocompleteProps extends IComboboxProps {
   onOptionClick?: ({ inputValue, selectionValue }: OnOptionClickArgs) => void;
   onInputChange?: (inputValue: string) => void;
   isCreatable?: boolean;
-  onCreateNewOption?: (inputValue: string) => Promise<IOption>;
+  onCreateNewOption?: (inputValue: string) => Promise<IOption | false>;
   options: Array<IOptGroup | IOption>;
 }
 // debounce a function call
@@ -96,7 +96,6 @@ const Autocomplete = ({ options, onOptionClick, onInputChange, onChange, isCreat
       if (typeof onInputChange === 'function') onInputChange(sanitizedInputValue);
     }
     if (event.type === "option:click" && typeof onOptionClick === 'function') {
-      // setSelectionValue(event.selectionValue);
       setInputValue(undefined);
       onOptionClick({ inputValue: event.inputValue, selectionValue: event.selectionValue });
     }
@@ -131,7 +130,7 @@ const Autocomplete = ({ options, onOptionClick, onInputChange, onChange, isCreat
           onClickCapture={async (e) => {
             if (typeof onCreateNewOption === 'function') {
               const newOption = await onCreateNewOption(e.currentTarget.title);
-              setOption(pre => [...pre, newOption]);
+              if (newOption) setOption(pre => [...pre, newOption]);
             }
           }}
         >