fix(forms): only call onChange after the form was modified by the user

Author: assisrafael

src/forms/FormAutocomplete.jsx

@@ -30,13 +30,24 @@ export function FormAutocomplete({
   const { isOpen, open, close } = useOpenState();
   const [ignoreBlur, setIgnoreBlur] = useState(false);
   const [isFocused, setFocus] = useState(false);
-  const registerRef = useCallback(register, [register]);
   const searchInputRef = useRef(null);
 
+  const registerRef = useCallback(register, [register]);
   const disabled = normalizeDisabled(_disabled, getFormData());
 
   const controlFeedback = getFormSubmitedAttempted() ? (isValid() ? 'is-valid' : 'is-invalid') : '';
 
+  const updateSearchInputValidation = useCallback(() => {
+    searchInputRef.current.setCustomValidity(controlFeedback === 'is-invalid' ? 'invalid' : '');
+  }, [controlFeedback]);
+
+  const clearSearchValue = useCallback(() => {
+    if (isEmpty(value) && !isFocused) {
+      setSearchValue('');
+      setSelectedItem(null);
+    }
+  }, [isFocused, value]);
+
   const onSearchInputType = useCallback(
     (_, nextSearchValue) => {
       setSearchValue(nextSearchValue);
@@ -70,6 +81,7 @@ export function FormAutocomplete({
     if (isEmpty(searchValue) && value) {
       setValue('');
       setSelectedItem(null);
+      updateSearchInputValidation();
     }
 
     if (ignoreBlur) {
@@ -78,7 +90,7 @@ export function FormAutocomplete({
       close();
       setFocus(false);
     }
-  }, [close, ignoreBlur, searchValue, setValue, value]);
+  }, [close, ignoreBlur, searchValue, setValue, updateSearchInputValidation, value]);
 
   const enableSearchInput = useCallback(() => {
     if (disabled) {
@@ -105,17 +117,6 @@ export function FormAutocomplete({
     [close, setValue]
   );
 
-  const updateSearchInputValidation = useCallback(() => {
-    searchInputRef.current.setCustomValidity(controlFeedback === 'is-invalid' ? 'invalid' : '');
-  }, [controlFeedback]);
-
-  const clearSearchValue = useCallback(() => {
-    if (isEmpty(value) && !isFocused) {
-      setSearchValue('');
-      setSelectedItem(null);
-    }
-  }, [isFocused, value]);
-
   useEffect(updateSearchInputValidation, [updateSearchInputValidation]);
   useEffect(clearSearchValue, [clearSearchValue]);
 

src/forms/helpers/useForm.js

@@ -6,6 +6,7 @@ import { debounce } from 'lodash-es';
 
 function useFormState(initialState, { onChange, transform }) {
   const [formState, setFormState] = useState(initialState);
+  const [isDirty, setIsDirty] = useState(false);
   const onChangeRef = useRef(debounce(onChange, 1000));
   const transformRef = useRef(
     debounce(
@@ -18,14 +19,17 @@ function useFormState(initialState, { onChange, transform }) {
   );
 
   useEffect(() => {
-    onChangeRef.current(formState);
-  }, [formState]);
+    if (isDirty) {
+      onChangeRef.current(formState);
+    }
+  }, [formState, isDirty]);
 
   return {
     getState() {
       return formState;
     },
     updateState(name, value) {
+      setIsDirty(true);
       setFormState((prevFormState) => {
         const nextFormState = nextState(prevFormState, name, value);
 
@@ -37,6 +41,7 @@ function useFormState(initialState, { onChange, transform }) {
       });
     },
     resetState() {
+      setIsDirty(false);
       setFormState(initialState);
     },
   };