@conform-to/react 0.3.0 → 0.4.0-pre.0

package/hooks.js

@@ -11,64 +11,107 @@ var helpers = require('./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.0/packages/conform-react/README.md#useform
+ * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.0/packages/conform-react/README.md#useform
  */
 function useForm() {
   var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var {
-    validate
-  } = config;
+  var configRef = react.useRef(config);
   var ref = react.useRef(null);
+  var [error, setError] = react.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] = react.useState(() => {
+    var _config$state$error2, _config$state2, _config$state3, _config$state$value, _config$state4;
+
+    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 : [];
+    var scope = (_config$state3 = config.state) === null || _config$state3 === void 0 ? void 0 : _config$state3.scope;
+    return {
+      defaultValue: (_config$state$value = (_config$state4 = config.state) === null || _config$state4 === void 0 ? void 0 : _config$state4.value) !== null && _config$state$value !== void 0 ? _config$state$value : config.defaultValue,
+      initialError: error.filter(_ref2 => {
+        var [name] = _ref2;
+        return name !== '' && dom.getSubmissionType(name) === null && (!scope || scope.includes(name));
+      })
+    };
+  });
   var [noValidate, setNoValidate] = react.useState(config.noValidate || !config.fallbackNative);
+  react.useEffect(() => {
+    configRef.current = config;
+  });
   react.useEffect(() => {
     setNoValidate(true);
   }, []);
   react.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;
+    }
+
+    if (!dom.reportValidity(form, config.state)) {
+      dom.focusFirstInvalidField(form, config.state.scope);
+    }
 
+    dom.requestSubmit(form);
+  }, [config.state]);
+  react.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 || !dom.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 (dom.isFieldElement(_field) && _field.dataset.conformTouched) {
-            // Report latest error for all touched fields
-            _field.checkValidity();
-          }
-        }
+      if (field.dataset.conformTouched) {
+        dom.requestValidate(form, field.name);
       }
     };
 
     var handleBlur = event => {
       var field = event.target;
       var form = ref.current;
+      var formConfig = configRef.current;
 
-      if (!form || !dom.isFieldElement(field) || field.form !== form || config.noValidate || config.initialReport !== 'onBlur') {
+      if (!form || !dom.isFieldElement(field) || field.form !== form) {
         return;
       }
 
-      field.dataset.conformTouched = 'true';
-      field.reportValidity();
+      if (formConfig.initialReport === 'onBlur' && !field.dataset.conformTouched) {
+        field.dataset.conformTouched = 'true';
+        dom.requestValidate(form, field.name);
+      }
+    };
+
+    var handleInvalid = event => {
+      var form = dom.getFormElement(ref.current);
+      var field = event.target;
+
+      if (!form || !dom.isFieldElement(field) || field.form !== form || field.name !== '') {
+        return;
+      }
+
+      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;
@@ -78,17 +121,15 @@ function useForm() {
       for (var field of form.elements) {
         if (dom.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
@@ -100,51 +141,83 @@ 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.
-       */
-
-      if (!config.noValidate && !(submitter !== null && submitter !== void 0 && submitter.formNoValidate) && !event.defaultPrevented) {
-        // Mark all fields as touched
-        for (var field of form.elements) {
-          if (dom.isFieldElement(field)) {
-            field.dataset.conformTouched = 'true';
+    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 (dom.isFieldElement(element) && element.name === '') {
+            setError(element.validationMessage);
+            break;
           }
-        } // Check the validity of the form
+        }
+        /**
+         * 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 (!event.currentTarget.reportValidity()) {
+        if (!submitter || event.defaultPrevented) {
           event.preventDefault();
+          return;
+        }
+
+        var formData = dom.getFormData(form, submitter);
+        var submission = dom.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 (dom.isFieldElement(field)) {
+              // Mark the field as touched
+              field.dataset.conformTouched = 'true';
+            }
+          }
+        }
+
+        if (typeof config.onValidate === 'function' && !config.noValidate && !submitter.formNoValidate) {
+          try {
+            if (!config.onValidate(context)) {
+              dom.focusFirstInvalidField(form);
+              event.preventDefault();
+            }
+          } catch (e) {
+            console.warn(e);
+          }
         }
-      }
 
-      if (!event.defaultPrevented) {
-        var _config$onSubmit;
+        if (!event.defaultPrevented) {
+          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
   };
 }
 /**
@@ -152,19 +225,55 @@ function useForm() {
  */
 
 function useFieldset(ref, config) {
+  var configRef = react.useRef(config);
+  var [uncontrolledState, setUncontrolledState] = react.useState( // @ts-expect-error
+  () => {
+    var _config$defaultValue;
+
+    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;
+
+      var [key, ...paths] = dom.getPaths(name);
+
+      if (typeof key === 'string') {
+        var _initialError$key;
+
+        var scopedName = dom.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 {
+      defaultValue: (_config$defaultValue = config === null || config === void 0 ? void 0 : config.defaultValue) !== null && _config$defaultValue !== void 0 ? _config$defaultValue : {},
+      initialError
+    };
+  });
   var [error, setError] = react.useState(() => {
     var result = {};
 
-    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 _config$initialError;
+    for (var [key, entries] of Object.entries(uncontrolledState.initialError)) {
+      var _entries$;
 
-      if (_error !== null && _error !== void 0 && _error.message) {
-        result[key] = _error.message;
+      var [name, message] = (_entries$ = entries === null || entries === void 0 ? void 0 : entries[0]) !== null && _entries$ !== void 0 ? _entries$ : [];
+
+      if (name === '') {
+        result[key] = message !== null && message !== void 0 ? message : '';
       }
     }
 
     return result;
   });
+  react.useEffect(() => {
+    configRef.current = config;
+  });
   react.useEffect(() => {
     /**
      * Reset the error state of each field if its validity is changed.
@@ -174,13 +283,16 @@ function useFieldset(ref, config) {
      */
     var resetError = form => {
       setError(prev => {
+        var _configRef$current$na, _configRef$current;
+
         var next = prev;
+        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 : '';
 
         for (var field of form.elements) {
-          if (dom.isFieldElement(field)) {
-            var key = dom.getKey(field.name, config === null || config === void 0 ? void 0 : config.name);
+          if (dom.isFieldElement(field) && field.name.startsWith(fieldsetName)) {
+            var [key, ...paths] = dom.getPaths(fieldsetName.length > 0 ? field.name.slice(fieldsetName.length + 1) : field.name);
 
-            if (key) {
+            if (typeof key === 'string' && paths.length === 0) {
               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 : '';
@@ -216,29 +328,35 @@ function useFieldset(ref, config) {
     };
 
     var invalidHandler = event => {
+      var _configRef$current$na2, _configRef$current2;
+
       var form = dom.getFormElement(ref.current);
       var field = event.target;
+      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 : '';
 
-      if (!form || !dom.isFieldElement(field) || field.form !== form) {
+      if (!form || !dom.isFieldElement(field) || field.form !== form || !field.name.startsWith(fieldsetName)) {
         return;
       }
 
-      var key = dom.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] = dom.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 _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, prev), {}, {
-            [key]: field.validationMessage
+            return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, prev), {}, {
+              [key]: field.validationMessage
+            });
           });
-        });
+        }
+
         event.preventDefault();
       }
     };
@@ -255,12 +373,20 @@ function useFieldset(ref, config) {
     };
 
     var resetHandler = event => {
+      var _fieldsetConfig$defau;
+
       var form = dom.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({});
     };
 
@@ -275,26 +401,7 @@ function useFieldset(ref, config) {
       document.removeEventListener('submit', submitHandler);
       document.removeEventListener('reset', resetHandler);
     };
-  }, [ref, config === null || config === void 0 ? void 0 : config.name]);
-  react.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 = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.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
@@ -303,19 +410,20 @@ function useFieldset(ref, config) {
 
   return new Proxy({}, {
     get(_target, key) {
-      var _constraint, _config$defaultValue, _config$initialError3, _config$initialError4, _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: _rollupPluginBabelHelpers.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 === 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
+          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 : ''
       };
@@ -329,25 +437,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.0/packages/conform-react/README.md#usefieldlist
+ * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.0/packages/conform-react/README.md#usefieldlist
  */
 function useFieldList(ref, config) {
-  var [entries, setEntries] = react.useState(() => {
+  var configRef = react.useRef(config);
+  var [uncontrolledState, setUncontrolledState] = react.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] = dom.getPaths(name);
+
+      if (typeof index === 'number') {
+        var _initialError$index;
+
+        var scopedName = dom.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$initialError5, _config$initialError6;
+  var [entries, setEntries] = react.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: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.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$initialError5 = config.initialError) === null || _config$initialError5 === void 0 ? void 0 : (_config$initialError6 = _config$initialError5[index]) === null || _config$initialError6 === void 0 ? void 0 : _config$initialError6.details
-      })
+        form: config.form,
+        defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : uncontrolledState.defaultValue[index],
+        initialError: uncontrolledState.initialError[index]
+      }
     };
   });
   /***
@@ -360,9 +498,10 @@ function useFieldList(ref, config) {
       return function () {
         var payload = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
         return {
-          name: dom.listCommandKey,
-          value: dom.serializeListCommand(config.name, {
+          name: 'conform/list',
+          value: JSON.stringify({
             type,
+            scope: config.name,
             payload
           }),
           form: config.form,
@@ -373,56 +512,45 @@ function useFieldList(ref, config) {
 
   });
   react.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;
+  });
+  react.useEffect(() => {
     var submitHandler = event => {
       var form = dom.getFormElement(ref.current);
 
-      if (!form || event.target !== form || !(event.submitter instanceof HTMLButtonElement) || event.submitter.name !== dom.listCommandKey) {
+      if (!form || event.target !== form || !(event.submitter instanceof HTMLButtonElement) || event.submitter.name !== 'conform/list') {
         return;
       }
 
-      var [name, command] = dom.parseListCommand(event.submitter.value);
+      var command = dom.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 => dom.updateList([...(entries !== null && entries !== void 0 ? entries : [])], command));
+      setEntries(entries => {
+        switch (command.type) {
+          case 'append':
+          case 'prepend':
+          case 'replace':
+            return dom.updateList([...(entries !== null && entries !== void 0 ? entries : [])], _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, command), {}, {
+              payload: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, command.payload), {}, {
+                defaultValue: ["".concat(Date.now()), command.payload.defaultValue]
+              })
+            }));
+
+          default:
+            {
+              return dom.updateList([...(entries !== null && entries !== void 0 ? entries : [])], command);
+            }
+        }
+      });
       event.preventDefault();
     };
 
     var resetHandler = event => {
-      var _config$defaultValue5;
+      var _fieldConfig$defaultV, _fieldConfig$defaultV2;
 
       var form = dom.getFormElement(ref.current);
 
@@ -430,7 +558,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);
@@ -439,7 +572,7 @@ function useFieldList(ref, config) {
       document.removeEventListener('submit', submitHandler, true);
       document.removeEventListener('reset', resetHandler);
     };
-  }, [ref, config.name, config.defaultValue]);
+  }, [ref]);
   return [list, control];
 }
 
@@ -448,13 +581,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.0/packages/conform-react/README.md#usecontrolledinput
+ * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.0/packages/conform-react/README.md#usecontrolledinput
  */
-function useControlledInput(field) {
-  var _field$defaultValue;
+function useControlledInput(config) {
+  var _config$defaultValue4;
 
   var ref = react.useRef(null);
-  var [value, setValue] = react.useState("".concat((_field$defaultValue = field.defaultValue) !== null && _field$defaultValue !== void 0 ? _field$defaultValue : ''));
+  var inputRef = react.useRef(null);
+  var configRef = react.useRef(config);
+  var [uncontrolledState, setUncontrolledState] = react.useState({
+    defaultValue: config.defaultValue,
+    initialError: config.initialError
+  });
+  var [value, setValue] = react.useState("".concat((_config$defaultValue4 = config.defaultValue) !== null && _config$defaultValue4 !== void 0 ? _config$defaultValue4 : ''));
 
   var handleChange = eventOrValue => {
     if (!ref.current) {
@@ -481,12 +620,55 @@ function useControlledInput(field) {
     event.preventDefault();
   };
 
+  react.useEffect(() => {
+    configRef.current = config;
+  });
+  react.useEffect(() => {
+    var resetHandler = event => {
+      var _configRef$current$de;
+
+      var form = dom.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 [_rollupPluginBabelHelpers.objectSpread2({
     ref,
-    hidden: true
-  }, helpers.input(field, {
+    style: {
+      position: 'absolute',
+      width: '1px',
+      height: '1px',
+      padding: 0,
+      margin: '-1px',
+      overflow: 'hidden',
+      clip: 'rect(0,0,0,0)',
+      whiteSpace: 'nowrap',
+      borderWidth: 0
+    },
+
+    onFocus() {
+      var _inputRef$current;
+
+      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+    }
+
+  }, helpers.input(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, config), uncontrolledState), {
     type: 'text'
   })), {
+    ref: inputRef,
     value,
     onChange: handleChange,
     onBlur: handleBlur,