🐛 apply validation to form labels before added as new option (guacsec#540)

Signed-off-by: Carlos Feria <2582866+carlosthe19916@users.noreply.github.com>

Author: carlosthe19916

client/src/app/components/Autocomplete/Autocomplete.tsx

@@ -76,6 +76,7 @@ export const Autocomplete: React.FC<IAutocompleteProps> = ({
     optionsNotSelected,
     removeSelectionById,
     handleOnSelect,
+    handleOnCreateNewOption,
     handleInputChange,
     handleKeyDown,
     handleClearSearchInput,
@@ -150,10 +151,7 @@ export const Autocomplete: React.FC<IAutocompleteProps> = ({
               <SelectOption
                 id={createItemId("new-option")}
                 isFocused={true}
-                onClick={() => {
-                  const newOption = onCreateNewOption(inputValue);
-                  handleOnSelect(newOption);
-                }}
+                onClick={() => handleOnCreateNewOption(inputValue)}
               >{`Create new option "${inputValue}"`}</SelectOption>
             ) : noResultsMessage && optionsNotSelected.length === 0 ? (
               <SelectOption isAriaDisabled>{noResultsMessage}</SelectOption>

client/src/app/components/Autocomplete/useAutocompleteHandlers.ts

@@ -176,6 +176,7 @@ export const useAutocompleteHandlers = ({
     handleInputChange,
     handleKeyDown,
     handleOnSelect,
+    handleOnCreateNewOption,
     menuRef,
     searchInputRef,
     removeSelectionById,