@conform-to/react 0.3.1 → 0.4.0-pre.1

package/module/hooks.js

@@ -1,5 +1,5 @@
 import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.js';
-import { isFieldElement, listCommandKey, serializeListCommand, getFormElement, getKey, parseListCommand, updateList } from '@conform-to/dom';
+import { getSubmissionType, setFormError, focusFirstInvalidField, requestSubmit, isFieldElement, getFormData, parse, getPaths, getName, requestValidate, getFormElement, parseListCommand, updateList } from '@conform-to/dom';
 import { useRef, useState, useEffect } from 'react';
 import { input } from './helpers.js';
 
@@ -7,64 +7,108 @@ import { input } from './helpers.js';
  * Returns properties required to hook into form events.
  * Applied custom validation and define when error should be reported.
  *
- * @see https://github.com/edmundhung/conform/tree/v0.3.1/packages/conform-react/README.md#useform
+ * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.1/packages/conform-react/README.md#useform
  */
 function useForm() {
   var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var {
-    validate
-  } = config;
+  var configRef = useRef(config);
   var ref = useRef(null);
+  var [error, setError] = useState(() => {
+    var _config$state$error$f, _config$state, _config$state$error;
+
+    var [, message] = (_config$state$error$f = (_config$state = config.state) === null || _config$state === void 0 ? void 0 : (_config$state$error = _config$state.error) === null || _config$state$error === void 0 ? void 0 : _config$state$error.find(_ref => {
+      var [key] = _ref;
+      return key === '';
+    })) !== null && _config$state$error$f !== void 0 ? _config$state$error$f : [];
+    return message !== null && message !== void 0 ? message : '';
+  });
+  var [fieldsetConfig, setFieldsetConfig] = useState(() => {
+    var _config$state$error2, _config$state2, _config$state$value, _config$state3;
+
+    var error = (_config$state$error2 = (_config$state2 = config.state) === null || _config$state2 === void 0 ? void 0 : _config$state2.error) !== null && _config$state$error2 !== void 0 ? _config$state$error2 : [];
+    return {
+      defaultValue: (_config$state$value = (_config$state3 = config.state) === null || _config$state3 === void 0 ? void 0 : _config$state3.value) !== null && _config$state$value !== void 0 ? _config$state$value : config.defaultValue,
+      initialError: error.filter(_ref2 => {
+        var [name] = _ref2;
+        return name !== '' && getSubmissionType(name) === null;
+      })
+    };
+  });
   var [noValidate, setNoValidate] = useState(config.noValidate || !config.fallbackNative);
+  useEffect(() => {
+    configRef.current = config;
+  });
   useEffect(() => {
     setNoValidate(true);
   }, []);
   useEffect(() => {
-    // Initialize form validation messages
-    if (ref.current) {
-      validate === null || validate === void 0 ? void 0 : validate(ref.current);
-    } // Revalidate the form when input value is changed
+    var form = ref.current;
 
+    if (!form || !config.state) {
+      return;
+    }
 
+    setFormError(form, config.state);
+
+    if (!form.reportValidity()) {
+      focusFirstInvalidField(form);
+    }
+
+    requestSubmit(form);
+  }, [config.state]);
+  useEffect(() => {
+    // Revalidate the form when input value is changed
     var handleInput = event => {
       var field = event.target;
       var form = ref.current;
+      var formConfig = configRef.current;
 
       if (!form || !isFieldElement(field) || field.form !== form) {
         return;
       }
 
-      validate === null || validate === void 0 ? void 0 : validate(form);
-
-      if (!config.noValidate) {
-        if (config.initialReport === 'onChange') {
-          field.dataset.conformTouched = 'true';
-        } // Field validity might be changed due to cross reference
-
+      if (formConfig.initialReport === 'onChange') {
+        field.dataset.conformTouched = 'true';
+      }
 
-        for (var _field of form.elements) {
-          if (isFieldElement(_field) && _field.dataset.conformTouched) {
-            // Report latest error for all touched fields
-            _field.checkValidity();
-          }
-        }
+      if (field.dataset.conformTouched) {
+        requestValidate(form, field.name);
       }
     };
 
     var handleBlur = event => {
       var field = event.target;
       var form = ref.current;
+      var formConfig = configRef.current;
+
+      if (!form || !isFieldElement(field) || field.form !== form) {
+        return;
+      }
+
+      if (formConfig.initialReport === 'onBlur' && !field.dataset.conformTouched) {
+        field.dataset.conformTouched = 'true';
+        requestValidate(form, field.name);
+      }
+    };
+
+    var handleInvalid = event => {
+      var form = getFormElement(ref.current);
+      var field = event.target;
 
-      if (!form || !isFieldElement(field) || field.form !== form || config.noValidate || config.initialReport !== 'onBlur') {
+      if (!form || !isFieldElement(field) || field.form !== form || field.name !== '') {
         return;
       }
 
-      field.dataset.conformTouched = 'true';
-      field.reportValidity();
+      event.preventDefault();
+
+      if (field.dataset.conformTouched) {
+        setError(field.validationMessage);
+      }
     };
 
     var handleReset = event => {
       var form = ref.current;
+      var formConfig = configRef.current;
 
       if (!form || event.target !== form) {
         return;
@@ -74,17 +118,15 @@ function useForm() {
       for (var field of form.elements) {
         if (isFieldElement(field)) {
           delete field.dataset.conformTouched;
+          field.setCustomValidity('');
         }
       }
-      /**
-       * The reset event is triggered before form reset happens.
-       * This make sure the form to be revalidated with initial values.
-       */
-
 
-      setTimeout(() => {
-        validate === null || validate === void 0 ? void 0 : validate(form);
-      }, 0);
+      setError('');
+      setFieldsetConfig({
+        defaultValue: formConfig.defaultValue,
+        initialError: []
+      });
     };
     /**
      * The input event handler will be triggered in capturing phase in order to
@@ -96,58 +138,93 @@ function useForm() {
 
     document.addEventListener('input', handleInput, true);
     document.addEventListener('blur', handleBlur, true);
+    document.addEventListener('invalid', handleInvalid, true);
     document.addEventListener('reset', handleReset);
     return () => {
       document.removeEventListener('input', handleInput, true);
       document.removeEventListener('blur', handleBlur, true);
+      document.removeEventListener('invalid', handleInvalid, true);
       document.removeEventListener('reset', handleReset);
     };
-  }, [validate, config.initialReport, config.noValidate]);
+  }, []);
   return {
     ref,
-    noValidate,
-
-    onSubmit(event) {
-      var form = event.currentTarget;
-      var nativeEvent = event.nativeEvent;
-      var submitter = nativeEvent.submitter instanceof HTMLButtonElement || nativeEvent.submitter instanceof HTMLInputElement ? nativeEvent.submitter : null; // Validating the form with the submitter value
-
-      validate === null || validate === void 0 ? void 0 : validate(form, submitter);
-      /**
-       * It checks defaultPrevented to confirm if the submission is intentional
-       * This is utilized by `useFieldList` to modify the list state when the submit
-       * event is captured and revalidate the form with new fields without triggering
-       * a form submission at the same time.
-       */
+    error,
+    props: {
+      ref,
+      noValidate,
+
+      onSubmit(event) {
+        var form = event.currentTarget;
+        var nativeEvent = event.nativeEvent;
+        var submitter = nativeEvent.submitter;
+
+        for (var element of form.elements) {
+          if (isFieldElement(element) && element.name === '') {
+            setError(element.validationMessage);
+            break;
+          }
+        }
+        /**
+         * It checks defaultPrevented to confirm if the submission is intentional
+         * This is utilized by `useFieldList` to modify the list state when the submit
+         * event is captured and revalidate the form with new fields without triggering
+         * a form submission at the same time.
+         */
 
-      if (!config.noValidate && !(submitter !== null && submitter !== void 0 && submitter.formNoValidate) && !event.defaultPrevented) {
-        var focused = false;
 
-        for (var field of form.elements) {
-          if (isFieldElement(field)) {
-            // Mark the field as touched
-            field.dataset.conformTouched = 'true'; // Focus on the first invalid field
+        if (!submitter || event.defaultPrevented) {
+          event.preventDefault();
+          return;
+        }
 
-            if (!focused && !field.validity.valid && field.tagName !== 'BUTTON') {
-              field.focus();
-              focused = true;
+        var formData = getFormData(form, submitter);
+        var submission = parse(formData);
+        var context = {
+          form,
+          formData,
+          submission
+        }; // Touch all fields only if the submitter is not a command button
+
+        if (!submission.type) {
+          for (var field of form.elements) {
+            if (isFieldElement(field)) {
+              // Mark the field as touched
+              field.dataset.conformTouched = 'true';
             }
           }
-        } // Check the validity of the form
+        }
 
+        try {
+          if (!config.noValidate && !submitter.formNoValidate) {
+            var _config$onValidate;
 
-        if (!event.currentTarget.reportValidity()) {
-          event.preventDefault();
+            (_config$onValidate = config.onValidate) === null || _config$onValidate === void 0 ? void 0 : _config$onValidate.call(config, context);
+
+            if (!form.reportValidity()) {
+              focusFirstInvalidField(form);
+              event.preventDefault();
+            }
+          }
+        } catch (e) {
+          if (e !== form) {
+            console.warn(e);
+          }
         }
-      }
 
-      if (!event.defaultPrevented) {
-        var _config$onSubmit;
+        if (!event.defaultPrevented) {
+          if (config.mode !== 'server-validation' && submission.type === 'validate') {
+            event.preventDefault();
+          } else {
+            var _config$onSubmit;
 
-        (_config$onSubmit = config.onSubmit) === null || _config$onSubmit === void 0 ? void 0 : _config$onSubmit.call(config, event);
+            (_config$onSubmit = config.onSubmit) === null || _config$onSubmit === void 0 ? void 0 : _config$onSubmit.call(config, event, context);
+          }
+        }
       }
-    }
 
+    },
+    config: fieldsetConfig
   };
 }
 /**
@@ -155,93 +232,86 @@ function useForm() {
  */
 
 function useFieldset(ref, config) {
-  var [error, setError] = useState(() => {
-    var result = {};
+  var configRef = useRef(config);
+  var [uncontrolledState, setUncontrolledState] = useState( // @ts-expect-error
+  () => {
+    var _config$defaultValue;
 
-    for (var [key, _error] of Object.entries((_config$initialError = config === null || config === void 0 ? void 0 : config.initialError) !== null && _config$initialError !== void 0 ? _config$initialError : {})) {
+    var initialError = {};
+
+    for (var [name, message] of (_config$initialError = config === null || config === void 0 ? void 0 : config.initialError) !== null && _config$initialError !== void 0 ? _config$initialError : []) {
       var _config$initialError;
 
-      if (_error !== null && _error !== void 0 && _error.message) {
-        result[key] = _error.message;
-      }
-    }
+      var [key, ...paths] = getPaths(name);
 
-    return result;
-  });
-  useEffect(() => {
-    /**
-     * Reset the error state of each field if its validity is changed.
-     *
-     * This is a workaround as no official way is provided to notify
-     * when the validity of the field is changed from `invalid` to `valid`.
-     */
-    var resetError = form => {
-      setError(prev => {
-        var next = prev;
+      if (typeof key === 'string') {
+        var _initialError$key;
 
-        for (var field of form.elements) {
-          if (isFieldElement(field)) {
-            var key = getKey(field.name, config === null || config === void 0 ? void 0 : config.name);
-
-            if (key) {
-              var _next$key, _next;
-
-              var prevMessage = (_next$key = (_next = next) === null || _next === void 0 ? void 0 : _next[key]) !== null && _next$key !== void 0 ? _next$key : '';
-              var nextMessage = field.validationMessage;
-              /**
-               * Techincally, checking prevMessage not being empty while nextMessage being empty
-               * is sufficient for our usecase. It checks if the message is changed instead to allow
-               * the hook to be useful independently.
-               */
-
-              if (prevMessage !== '' && prevMessage !== nextMessage) {
-                next = _objectSpread2(_objectSpread2({}, next), {}, {
-                  [key]: nextMessage
-                });
-              }
-            }
-          }
+        var scopedName = getName(paths);
+        var entries = (_initialError$key = initialError[key]) !== null && _initialError$key !== void 0 ? _initialError$key : [];
+
+        if (scopedName === '' && entries.length > 0 && entries[0][0] !== '') {
+          initialError[key] = [[scopedName, message], ...entries];
+        } else {
+          initialError[key] = [...entries, [scopedName, message]];
         }
+      }
+    }
 
-        return next;
-      });
+    return {
+      defaultValue: (_config$defaultValue = config === null || config === void 0 ? void 0 : config.defaultValue) !== null && _config$defaultValue !== void 0 ? _config$defaultValue : {},
+      initialError
     };
+  });
+  var [error, setError] = useState(() => {
+    var result = {};
 
-    var handleInput = event => {
-      var form = getFormElement(ref.current);
-      var field = event.target;
+    for (var [key, entries] of Object.entries(uncontrolledState.initialError)) {
+      var _entries$;
 
-      if (!form || !isFieldElement(field) || field.form !== form) {
-        return;
-      }
+      var [name, message] = (_entries$ = entries === null || entries === void 0 ? void 0 : entries[0]) !== null && _entries$ !== void 0 ? _entries$ : [];
 
-      resetError(form);
-    };
+      if (name === '') {
+        result[key] = message !== null && message !== void 0 ? message : '';
+      }
+    }
 
+    return result;
+  });
+  useEffect(() => {
+    configRef.current = config;
+  });
+  useEffect(() => {
     var invalidHandler = event => {
+      var _configRef$current$na, _configRef$current;
+
       var form = getFormElement(ref.current);
       var field = event.target;
+      var fieldsetName = (_configRef$current$na = (_configRef$current = configRef.current) === null || _configRef$current === void 0 ? void 0 : _configRef$current.name) !== null && _configRef$current$na !== void 0 ? _configRef$current$na : '';
 
-      if (!form || !isFieldElement(field) || field.form !== form) {
+      if (!form || !isFieldElement(field) || field.form !== form || !field.name.startsWith(fieldsetName)) {
         return;
       }
 
-      var key = getKey(field.name, config === null || config === void 0 ? void 0 : config.name); // Update the error only if the field belongs to the fieldset
+      var [key, ...paths] = getPaths(fieldsetName.length > 0 ? field.name.slice(fieldsetName.length + 1) : field.name); // Update the error only if the field belongs to the fieldset
 
-      if (key) {
-        setError(prev => {
-          var _prev$key;
+      if (typeof key === 'string' && paths.length === 0) {
+        if (field.dataset.conformTouched) {
+          setError(prev => {
+            var _prev$key;
 
-          var prevMessage = (_prev$key = prev === null || prev === void 0 ? void 0 : prev[key]) !== null && _prev$key !== void 0 ? _prev$key : '';
+            var prevMessage = (_prev$key = prev === null || prev === void 0 ? void 0 : prev[key]) !== null && _prev$key !== void 0 ? _prev$key : '';
 
-          if (prevMessage === field.validationMessage) {
-            return prev;
-          }
+            if (prevMessage === field.validationMessage) {
+              return prev;
+            }
 
-          return _objectSpread2(_objectSpread2({}, prev), {}, {
-            [key]: field.validationMessage
+            return _objectSpread2(_objectSpread2({}, prev), {}, {
+              [key]: field.validationMessage
+            });
           });
-        });
+        }
+
         event.preventDefault();
       }
     };
@@ -251,53 +321,69 @@ function useFieldset(ref, config) {
 
       if (!form || event.target !== form) {
         return;
-      } // This helps resetting error that fullfilled by the submitter
+      }
+      /**
+       * Reset the error state of each field if its validity is changed.
+       *
+       * This is a workaround as no official way is provided to notify
+       * when the validity of the field is changed from `invalid` to `valid`.
+       */
+
 
+      setError(prev => {
+        var _configRef$current$na2, _configRef$current2;
+
+        var next = prev;
+        var fieldsetName = (_configRef$current$na2 = (_configRef$current2 = configRef.current) === null || _configRef$current2 === void 0 ? void 0 : _configRef$current2.name) !== null && _configRef$current$na2 !== void 0 ? _configRef$current$na2 : '';
+
+        for (var field of form.elements) {
+          if (isFieldElement(field) && field.name.startsWith(fieldsetName)) {
+            var _next$key, _next;
+
+            var key = fieldsetName ? field.name.slice(fieldsetName.length + 1) : field.name;
+            var prevMessage = (_next$key = (_next = next) === null || _next === void 0 ? void 0 : _next[key]) !== null && _next$key !== void 0 ? _next$key : '';
+            var nextMessage = field.validationMessage;
+
+            if (prevMessage !== '' && nextMessage === '') {
+              next = _objectSpread2(_objectSpread2({}, next), {}, {
+                [key]: ''
+              });
+            }
+          }
+        }
 
-      resetError(form);
+        return next;
+      });
     };
 
     var resetHandler = event => {
+      var _fieldsetConfig$defau;
+
       var form = getFormElement(ref.current);
 
       if (!form || event.target !== form) {
         return;
       }
 
+      var fieldsetConfig = configRef.current;
+      setUncontrolledState({
+        // @ts-expect-error
+        defaultValue: (_fieldsetConfig$defau = fieldsetConfig === null || fieldsetConfig === void 0 ? void 0 : fieldsetConfig.defaultValue) !== null && _fieldsetConfig$defau !== void 0 ? _fieldsetConfig$defau : {},
+        initialError: {}
+      });
       setError({});
-    };
+    }; // The invalid event does not bubble and so listening on the capturing pharse is needed
 
-    document.addEventListener('input', handleInput); // The invalid event does not bubble and so listening on the capturing pharse is needed
 
     document.addEventListener('invalid', invalidHandler, true);
     document.addEventListener('submit', submitHandler);
     document.addEventListener('reset', resetHandler);
     return () => {
-      document.removeEventListener('input', handleInput);
       document.removeEventListener('invalid', invalidHandler, true);
       document.removeEventListener('submit', submitHandler);
       document.removeEventListener('reset', resetHandler);
     };
-  }, [ref, config === null || config === void 0 ? void 0 : config.name]);
-  useEffect(() => {
-    setError(prev => {
-      var next = prev;
-
-      for (var [key, _error2] of Object.entries((_config$initialError2 = config === null || config === void 0 ? void 0 : config.initialError) !== null && _config$initialError2 !== void 0 ? _config$initialError2 : {})) {
-        var _config$initialError2;
-
-        if (next[key] !== (_error2 === null || _error2 === void 0 ? void 0 : _error2.message)) {
-          var _error2$message;
-
-          next = _objectSpread2(_objectSpread2({}, next), {}, {
-            [key]: (_error2$message = _error2 === null || _error2 === void 0 ? void 0 : _error2.message) !== null && _error2$message !== void 0 ? _error2$message : ''
-          });
-        }
-      }
-
-      return next;
-    });
-  }, [config === null || config === void 0 ? void 0 : config.name, config === null || config === void 0 ? void 0 : config.initialError]);
+  }, [ref]);
   /**
    * This allows us constructing the field at runtime as we have no information
    * about which fields would be available. The proxy will also help tracking
@@ -306,19 +392,20 @@ function useFieldset(ref, config) {
 
   return new Proxy({}, {
     get(_target, key) {
-      var _constraint, _config$defaultValue, _config$initialError$, _config$initialError3, _config$initialError4, _config$initialError5, _config$initialError6, _error$key;
+      var _fieldsetConfig$const, _error$key;
 
       if (typeof key !== 'string') {
         return;
       }
 
-      var constraint = config === null || config === void 0 ? void 0 : (_constraint = config.constraint) === null || _constraint === void 0 ? void 0 : _constraint[key];
+      var fieldsetConfig = config !== null && config !== void 0 ? config : {};
+      var constraint = (_fieldsetConfig$const = fieldsetConfig.constraint) === null || _fieldsetConfig$const === void 0 ? void 0 : _fieldsetConfig$const[key];
       var field = {
         config: _objectSpread2({
-          name: config !== null && config !== void 0 && config.name ? "".concat(config.name, ".").concat(key) : key,
-          form: config === null || config === void 0 ? void 0 : config.form,
-          defaultValue: config === null || config === void 0 ? void 0 : (_config$defaultValue = config.defaultValue) === null || _config$defaultValue === void 0 ? void 0 : _config$defaultValue[key],
-          initialError: (_config$initialError$ = config === null || config === void 0 ? void 0 : (_config$initialError3 = config.initialError) === null || _config$initialError3 === void 0 ? void 0 : (_config$initialError4 = _config$initialError3[key]) === null || _config$initialError4 === void 0 ? void 0 : _config$initialError4.details) !== null && _config$initialError$ !== void 0 ? _config$initialError$ : config === null || config === void 0 ? void 0 : (_config$initialError5 = config.initialError) === null || _config$initialError5 === void 0 ? void 0 : (_config$initialError6 = _config$initialError5[key]) === null || _config$initialError6 === void 0 ? void 0 : _config$initialError6.message
+          name: fieldsetConfig.name ? "".concat(fieldsetConfig.name, ".").concat(key) : key,
+          form: fieldsetConfig.form,
+          defaultValue: uncontrolledState.defaultValue[key],
+          initialError: uncontrolledState.initialError[key]
         }, constraint),
         error: (_error$key = error === null || error === void 0 ? void 0 : error[key]) !== null && _error$key !== void 0 ? _error$key : ''
       };
@@ -332,25 +419,55 @@ function useFieldset(ref, config) {
  * Returns a list of key and config, with a group of helpers
  * configuring buttons for list manipulation
  *
- * @see https://github.com/edmundhung/conform/tree/v0.3.1/packages/conform-react/README.md#usefieldlist
+ * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.1/packages/conform-react/README.md#usefieldlist
  */
 function useFieldList(ref, config) {
-  var [entries, setEntries] = useState(() => {
+  var configRef = useRef(config);
+  var [uncontrolledState, setUncontrolledState] = useState(() => {
     var _config$defaultValue2;
 
-    return Object.entries((_config$defaultValue2 = config.defaultValue) !== null && _config$defaultValue2 !== void 0 ? _config$defaultValue2 : [undefined]);
+    var initialError = [];
+
+    for (var [name, message] of (_config$initialError2 = config === null || config === void 0 ? void 0 : config.initialError) !== null && _config$initialError2 !== void 0 ? _config$initialError2 : []) {
+      var _config$initialError2;
+
+      var [index, ...paths] = getPaths(name);
+
+      if (typeof index === 'number') {
+        var _initialError$index;
+
+        var scopedName = getName(paths);
+
+        var _entries = (_initialError$index = initialError[index]) !== null && _initialError$index !== void 0 ? _initialError$index : [];
+
+        if (scopedName === '' && _entries.length > 0 && _entries[0][0] !== '') {
+          initialError[index] = [[scopedName, message], ..._entries];
+        } else {
+          initialError[index] = [..._entries, [scopedName, message]];
+        }
+      }
+    }
+
+    return {
+      defaultValue: (_config$defaultValue2 = config.defaultValue) !== null && _config$defaultValue2 !== void 0 ? _config$defaultValue2 : [],
+      initialError
+    };
   });
-  var list = entries.map((_ref, index) => {
-    var _config$defaultValue3, _config$initialError7, _config$initialError8;
+  var [entries, setEntries] = useState(() => {
+    var _config$defaultValue3;
 
-    var [key, defaultValue] = _ref;
+    return Object.entries((_config$defaultValue3 = config.defaultValue) !== null && _config$defaultValue3 !== void 0 ? _config$defaultValue3 : [undefined]);
+  });
+  var list = entries.map((_ref3, index) => {
+    var [key, defaultValue] = _ref3;
     return {
       key,
-      config: _objectSpread2(_objectSpread2({}, config), {}, {
+      config: {
         name: "".concat(config.name, "[").concat(index, "]"),
-        defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : (_config$defaultValue3 = config.defaultValue) === null || _config$defaultValue3 === void 0 ? void 0 : _config$defaultValue3[index],
-        initialError: (_config$initialError7 = config.initialError) === null || _config$initialError7 === void 0 ? void 0 : (_config$initialError8 = _config$initialError7[index]) === null || _config$initialError8 === void 0 ? void 0 : _config$initialError8.details
-      })
+        form: config.form,
+        defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : uncontrolledState.defaultValue[index],
+        initialError: uncontrolledState.initialError[index]
+      }
     };
   });
   /***
@@ -363,9 +480,10 @@ function useFieldList(ref, config) {
       return function () {
         var payload = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
         return {
-          name: listCommandKey,
-          value: serializeListCommand(config.name, {
+          name: 'conform/list',
+          value: JSON.stringify({
             type,
+            scope: config.name,
             payload
           }),
           form: config.form,
@@ -376,56 +494,45 @@ function useFieldList(ref, config) {
 
   });
   useEffect(() => {
-    setEntries(prevEntries => {
-      var _config$defaultValue4;
-
-      var nextEntries = Object.entries((_config$defaultValue4 = config.defaultValue) !== null && _config$defaultValue4 !== void 0 ? _config$defaultValue4 : [undefined]);
-
-      if (prevEntries.length !== nextEntries.length) {
-        return nextEntries;
-      }
-
-      for (var i = 0; i < prevEntries.length; i++) {
-        var [prevKey, prevValue] = prevEntries[i];
-        var [nextKey, nextValue] = nextEntries[i];
-
-        if (prevKey !== nextKey || prevValue !== nextValue) {
-          return nextEntries;
-        }
-      } // No need to rerender in this case
-
-
-      return prevEntries;
-    });
-
+    configRef.current = config;
+  });
+  useEffect(() => {
     var submitHandler = event => {
       var form = getFormElement(ref.current);
 
-      if (!form || event.target !== form || !(event.submitter instanceof HTMLButtonElement) || event.submitter.name !== listCommandKey) {
+      if (!form || event.target !== form || !(event.submitter instanceof HTMLButtonElement) || event.submitter.name !== 'conform/list') {
         return;
       }
 
-      var [name, command] = parseListCommand(event.submitter.value);
+      var command = parseListCommand(event.submitter.value);
 
-      if (name !== config.name) {
+      if (command.scope !== configRef.current.name) {
         // Ensure the scope of the listener are limited to specific field name
         return;
       }
 
-      switch (command.type) {
-        case 'append':
-        case 'prepend':
-        case 'replace':
-          command.payload.defaultValue = ["".concat(Date.now()), command.payload.defaultValue];
-          break;
-      }
-
-      setEntries(entries => updateList([...(entries !== null && entries !== void 0 ? entries : [])], command));
+      setEntries(entries => {
+        switch (command.type) {
+          case 'append':
+          case 'prepend':
+          case 'replace':
+            return updateList([...(entries !== null && entries !== void 0 ? entries : [])], _objectSpread2(_objectSpread2({}, command), {}, {
+              payload: _objectSpread2(_objectSpread2({}, command.payload), {}, {
+                defaultValue: ["".concat(Date.now()), command.payload.defaultValue]
+              })
+            }));
+
+          default:
+            {
+              return updateList([...(entries !== null && entries !== void 0 ? entries : [])], command);
+            }
+        }
+      });
       event.preventDefault();
     };
 
     var resetHandler = event => {
-      var _config$defaultValue5;
+      var _fieldConfig$defaultV, _fieldConfig$defaultV2;
 
       var form = getFormElement(ref.current);
 
@@ -433,7 +540,12 @@ function useFieldList(ref, config) {
         return;
       }
 
-      setEntries(Object.entries((_config$defaultValue5 = config.defaultValue) !== null && _config$defaultValue5 !== void 0 ? _config$defaultValue5 : []));
+      var fieldConfig = configRef.current;
+      setUncontrolledState({
+        defaultValue: (_fieldConfig$defaultV = fieldConfig.defaultValue) !== null && _fieldConfig$defaultV !== void 0 ? _fieldConfig$defaultV : [],
+        initialError: []
+      });
+      setEntries(Object.entries((_fieldConfig$defaultV2 = fieldConfig.defaultValue) !== null && _fieldConfig$defaultV2 !== void 0 ? _fieldConfig$defaultV2 : [undefined]));
     };
 
     document.addEventListener('submit', submitHandler, true);
@@ -442,7 +554,7 @@ function useFieldList(ref, config) {
       document.removeEventListener('submit', submitHandler, true);
       document.removeEventListener('reset', resetHandler);
     };
-  }, [ref, config.name, config.defaultValue]);
+  }, [ref]);
   return [list, control];
 }
 
@@ -451,14 +563,19 @@ function useFieldList(ref, config) {
  * This is particular useful when integrating dropdown and datepicker whichs
  * introduces custom input mode.
  *
- * @see https://github.com/edmundhung/conform/tree/v0.3.1/packages/conform-react/README.md#usecontrolledinput
+ * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.1/packages/conform-react/README.md#usecontrolledinput
  */
-function useControlledInput(field) {
-  var _field$defaultValue;
+function useControlledInput(config) {
+  var _config$defaultValue4;
 
   var ref = useRef(null);
   var inputRef = useRef(null);
-  var [value, setValue] = useState("".concat((_field$defaultValue = field.defaultValue) !== null && _field$defaultValue !== void 0 ? _field$defaultValue : ''));
+  var configRef = useRef(config);
+  var [uncontrolledState, setUncontrolledState] = useState({
+    defaultValue: config.defaultValue,
+    initialError: config.initialError
+  });
+  var [value, setValue] = useState("".concat((_config$defaultValue4 = config.defaultValue) !== null && _config$defaultValue4 !== void 0 ? _config$defaultValue4 : ''));
 
   var handleChange = eventOrValue => {
     if (!ref.current) {
@@ -485,6 +602,31 @@ function useControlledInput(field) {
     event.preventDefault();
   };
 
+  useEffect(() => {
+    configRef.current = config;
+  });
+  useEffect(() => {
+    var resetHandler = event => {
+      var _configRef$current$de;
+
+      var form = getFormElement(ref.current);
+
+      if (!form || event.target !== form) {
+        return;
+      }
+
+      setUncontrolledState({
+        defaultValue: configRef.current.defaultValue,
+        initialError: configRef.current.initialError
+      });
+      setValue("".concat((_configRef$current$de = configRef.current.defaultValue) !== null && _configRef$current$de !== void 0 ? _configRef$current$de : ''));
+    };
+
+    document.addEventListener('reset', resetHandler);
+    return () => {
+      document.removeEventListener('reset', resetHandler);
+    };
+  }, []);
   return [_objectSpread2({
     ref,
     style: {
@@ -505,7 +647,7 @@ function useControlledInput(field) {
       (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
     }
 
-  }, input(field, {
+  }, input(_objectSpread2(_objectSpread2({}, config), uncontrolledState), {
     type: 'text'
   })), {
     ref: inputRef,