feat(autocomplete): new parameter to allow custom user input (#44)

Author: vbarcellos

demo/FormExamples.jsx

@@ -176,6 +176,15 @@ export function FormExamples() {
             required={() => false}
           />
         </div>
+        <div className="col">
+          <FormGroupAutocomplete
+            name="autocompleteField4"
+            label="Autocomplete that allows custom user input"
+            options={['1234', '2345', '3456']}
+            placeholder="Type some numbers"
+            allowUnlistedValue={true}
+          />
+        </div>
       </div>
 
       <div className="row">

src/forms/FormAutocomplete.jsx

@@ -21,6 +21,7 @@ export function FormAutocomplete({
   filter,
   disabled: _disabled,
   afterChange,
+  allowUnlistedValue,
 }) {
   const { getValue, setValue: _setValue, register, isValid, getFormSubmitedAttempted, getFormData } = useFormControl(
     name
@@ -98,6 +99,8 @@ export function FormAutocomplete({
       setValue('');
       setSelectedItem(null);
       updateSearchInputValidation();
+    } else if (isEmptyLike(selectedItem) && !isEmptyLike(searchValue) && allowUnlistedValue) {
+      onSelectItem({ value: searchValue, label: searchValue });
     }
 
     if (ignoreBlur) {
@@ -106,7 +109,17 @@ export function FormAutocomplete({
       close();
       setFocus(false);
     }
-  }, [close, ignoreBlur, searchValue, setValue, updateSearchInputValidation, value]);
+  }, [
+    close,
+    ignoreBlur,
+    searchValue,
+    setValue,
+    updateSearchInputValidation,
+    value,
+    onSelectItem,
+    allowUnlistedValue,
+    selectedItem,
+  ]);
 
   const enableSearchInput = useCallback(() => {
     if (disabled) {
@@ -201,6 +214,7 @@ FormAutocomplete.defaultProps = {
 
 FormAutocomplete.propTypes = {
   afterChange: PropTypes.func,
+  allowUnlistedValue: PropTypes.bool,
   disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
   filter: PropTypes.func,
   id: PropTypes.string,
@@ -227,6 +241,7 @@ export function FormGroupAutocomplete(props) {
 
 FormGroupAutocomplete.propTypes = {
   afterChange: PropTypes.func,
+  allowUnlistedValue: PropTypes.bool,
   disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
   filter: PropTypes.func,
   help: PropTypes.node,