@conform-to/react 0.4.1 → 0.5.0-pre.0

package/README.md

@@ -324,7 +324,7 @@ function ExampleForm() {
 
 ### useFieldList
 
-It returns a list of key and config, with helpers to configure command buttons with [list command](/docs/submission.md#list-command).
+It returns a list of key, config and error, with helpers to configure [list command](/docs/submission.md#list-command) button.
 
 ```tsx
 import { useFieldset, useFieldList } from '@conform-to/react';
@@ -333,33 +333,24 @@ import { useRef } from 'react';
 /**
  * Consider the schema as follow:
  */
-type Book = {
-  name: string;
-  isbn: string;
-};
-
-type Collection = {
-  books: Book[];
+type Schema = {
+  list: string[];
 };
 
 function CollectionFieldset() {
-  const ref = useRef();
-  const { books } = useFieldset<Collection>(ref);
-  const [bookList, command] = useFieldList(ref, books.config);
+  const ref = useRef<HTMLFieldsetElement>(null);
+  const fieldset = useFieldset<Collection>(ref);
+  const [list, command] = useFieldList(ref, fieldset.list.config);
 
   return (
     <fieldset ref={ref}>
-      {bookList.map((book, index) => (
-        <div key={book.key}>
-          {/* To setup the fields */}
-          <input
-            name={`${book.config.name}.name`}
-            defaultValue={book.config.defaultValue.name}
-          />
-          <input
-            name={`${book.config.name}.isbn`}
-            defaultValue={book.config.defaultValue.isbn}
-          />
+      {list.map((item, index) => (
+        <div key={item.key}>
+          {/* Setup an input per item */}
+          <input {...conform.input(item.config)} />
+
+          {/* Error of each book */}
+          <span>{item.error}</span>
 
           {/* To setup a delete button */}
           <button {...command.remove({ index })}>Delete</button>
@@ -367,79 +358,86 @@ function CollectionFieldset() {
       ))}
 
       {/* To setup a button that can append a new row with optional default value */}
-      <button {...command.append({ defaultValue: { name: '', isbn: '' } })}>
-        add
-      </button>
+      <button {...command.append({ defaultValue: '' })}>add</button>
     </fieldset>
   );
 }
 ```
 
-This hook can also be used in combination with `useFieldset` to distribute the config:
+This hook can also be used in combination with `useFieldset` for nested list:
 
 ```tsx
-import { useForm, useFieldset, useFieldList } from '@conform-to/react';
+import {
+  type FieldConfig,
+  useForm,
+  useFieldset,
+  useFieldList,
+} from '@conform-to/react';
 import { useRef } from 'react';
 
+/**
+ * Consider the schema as follow:
+ */
+type Schema = {
+  list: Array<Item>;
+};
+
+type Item = {
+  title: string;
+  description: string;
+};
+
 function CollectionFieldset() {
-  const ref = useRef();
-  const { books } = useFieldset<Collection>(ref);
-  const [bookList, command] = useFieldList(ref, books.config);
+  const ref = useRef<HTMLFieldsetElement>(null);
+  const fieldset = useFieldset<Collection>(ref);
+  const [list, command] = useFieldList(ref, fieldset.list.config);
 
   return (
     <fieldset ref={ref}>
-      {bookList.map((book, index) => (
-        <div key={book.key}>
-          {/* `book.config` is a FieldConfig object similar to `books` */}
-          <BookFieldset {...book.config} />
-
-          {/* To setup a delete button */}
-          <button {...command.remove({ index })}>Delete</button>
+      {list.map((item, index) => (
+        <div key={item.key}>
+          {/* Pass the item config to another fieldset*/}
+          <ItemFieldset {...item.config} />
         </div>
       ))}
-
-      {/* To setup a button that can append a new row */}
-      <button {...command.append()}>add</button>
     </fieldset>
   );
 }
 
-/**
- * This is basically the BookFieldset component from
- * the `useFieldset` example, but setting all the
- * options with the component props instead
- */
-function BookFieldset({ name, form, defaultValue, error }) {
-  const ref = useRef();
-  const { name, isbn } = useFieldset(ref, {
-    name,
-    form,
-    defaultValue,
-    error,
-  });
+function ItemFieldset(config: FieldConfig<Item>) {
+  const ref = useRef<HTMLFieldsetElement>(null);
+  const { title, description } = useFieldset(ref, config);
 
-  return <fieldset ref={ref}>{/* ... */}</fieldset>;
+  return (
+    <fieldset ref={ref}>
+      <input {...conform.input(title.config)} />
+      <span>{title.error}</span>
+
+      <input {...conform.input(description.config)} />
+      <span>{description.error}</span>
+    </fieldset>
+  );
 }
 ```
 
 <details>
-  <summary>What can I do with `controls`?</summary>
+  <summary>What can I do with `command`?</summary>
 
 ```tsx
 // To append a new row with optional defaultValue
-<button {...controls.append({ defaultValue })}>Append</button>;
+<button {...command.append({ defaultValue })}>Append</button>;
 
 // To prepend a new row with optional defaultValue
-<button {...controls.prepend({ defaultValue })}>Prepend</button>;
+<button {...command.prepend({ defaultValue })}>Prepend</button>;
 
 // To remove a row by index
-<button {...controls.remove({ index })}>Remove</button>;
+<button {...command.remove({ index })}>Remove</button>;
 
 // To replace a row with another defaultValue
-<button {...controls.replace({ index, defaultValue })}>Replace</button>;
+<button {...command.replace({ index, defaultValue })}>Replace</button>;
 
 // To reorder a particular row to an another index
-<button {...controls.reorder({ from, to })}>Reorder</button>;
+<button {...command.reorder({ from, to })}>Reorder</button>;
 ```
 
 </details>

package/helpers.d.ts

@@ -1,5 +1,5 @@
-import { type FieldConfig, type Primitive } from '@conform-to/dom';
-import { type HTMLInputTypeAttribute } from 'react';
+import type { FieldConfig } from '@conform-to/dom';
+import type { HTMLInputTypeAttribute } from 'react';
 interface FieldProps {
     name: string;
     form?: string;
@@ -28,10 +28,20 @@ interface TextareaProps extends FieldProps {
     maxLength?: number;
     defaultValue?: string;
 }
-export declare function input<Schema extends Primitive>(config: FieldConfig<Schema>, { type, value }?: {
-    type?: HTMLInputTypeAttribute;
+declare type InputOptions = {
+    type: 'checkbox' | 'radio';
     value?: string;
+} | {
+    type: 'file';
+    value?: never;
+} | {
+    type?: Exclude<HTMLInputTypeAttribute, 'button' | 'submit' | 'hidden' | 'file'>;
+    value?: never;
+};
+export declare function input<Schema extends File | File[]>(config: FieldConfig<Schema>, options: {
+    type: 'file';
 }): InputProps<Schema>;
-export declare function select<Schema extends Primitive | Array<Primitive>>(config: FieldConfig<Schema>): SelectProps;
-export declare function textarea<Schema extends Primitive>(config: FieldConfig<Schema>): TextareaProps;
+export declare function input<Schema extends any>(config: FieldConfig<Schema>, options?: InputOptions): InputProps<Schema>;
+export declare function select<Schema>(config: FieldConfig<Schema>): SelectProps;
+export declare function textarea<Schema>(config: FieldConfig<Schema>): TextareaProps;
 export {};

package/helpers.js

@@ -3,13 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 function input(config) {
-  var {
-    type,
-    value
-  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var isCheckboxOrRadio = type === 'checkbox' || type === 'radio';
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var attributes = {
-    type,
+    type: options.type,
     name: config.name,
     form: config.form,
     required: config.required,
@@ -24,10 +20,11 @@ function input(config) {
   if (config.initialError && config.initialError.length > 0) {
     attributes.autoFocus = true;
   }
-  if (isCheckboxOrRadio) {
-    attributes.value = value !== null && value !== void 0 ? value : 'on';
+  if (options.type === 'checkbox' || options.type === 'radio') {
+    var _options$value;
+    attributes.value = (_options$value = options.value) !== null && _options$value !== void 0 ? _options$value : 'on';
     attributes.defaultChecked = config.defaultValue === attributes.value;
-  } else {
+  } else if (options.type !== 'file') {
     attributes.defaultValue = config.defaultValue;
   }
   return attributes;

package/hooks.d.ts

@@ -129,6 +129,7 @@ declare type ListCommandPayload<Schema, Type extends ListCommand<FieldValue<Sche
 export declare function useFieldList<Payload = any>(ref: RefObject<HTMLFormElement | HTMLFieldSetElement>, config: FieldConfig<Array<Payload>>): [
     Array<{
         key: string;
+        error: string | undefined;
         config: FieldConfig<Payload>;
     }>,
     {

package/hooks.js

@@ -48,11 +48,7 @@ function useForm() {
     if (!form || !config.state) {
       return;
     }
-    dom.setFormError(form, config.state);
-    if (!form.reportValidity()) {
-      dom.focusFirstInvalidField(form);
-    }
-    dom.requestSubmit(form);
+    dom.reportSubmission(form, config.state);
   }, [config.state]);
   react.useEffect(() => {
     // Revalidate the form when input value is changed
@@ -85,7 +81,7 @@ function useForm() {
     var handleInvalid = event => {
       var form = dom.getFormElement(ref.current);
       var field = event.target;
-      if (!form || !dom.isFieldElement(field) || field.form !== form || field.name !== '') {
+      if (!form || !dom.isFieldElement(field) || field.form !== form || field.name !== '__form__') {
         return;
       }
       event.preventDefault();
@@ -141,12 +137,6 @@ function useForm() {
         var form = event.currentTarget;
         var nativeEvent = event.nativeEvent;
         var submitter = nativeEvent.submitter;
-        for (var element of form.elements) {
-          if (dom.isFieldElement(element) && element.name === '' && element.willValidate) {
-            setError(element.validationMessage);
-            break;
-          }
-        }
 
         /**
          * It checks defaultPrevented to confirm if the submission is intentional
@@ -154,8 +144,7 @@ function useForm() {
          * event is captured and revalidate the form with new fields without triggering
          * a form submission at the same time.
          */
-        if (!submitter || event.defaultPrevented) {
-          event.preventDefault();
+        if (event.defaultPrevented) {
           return;
         }
         try {
@@ -176,14 +165,10 @@ function useForm() {
                *
                * This is mainly used to showcase the constraint validation API.
                */
-              dom.setFormError(form, {
-                type: 'submit',
-                value: {},
-                error: []
-              });
-              for (var _element of form.elements) {
-                if (dom.isFieldElement(_element) && _element.willValidate) {
-                  submission.error.push([_element.name, _element.validationMessage]);
+              for (var element of form.elements) {
+                if (dom.isFieldElement(element) && element.willValidate) {
+                  element.setCustomValidity('');
+                  submission.error.push([element.name, element.validationMessage]);
                 }
               }
             }
@@ -198,7 +183,7 @@ function useForm() {
               }
             }
           }
-          if (!config.noValidate && !submitter.formNoValidate && dom.hasError(submission.error) || submission.type === 'validate' && config.mode !== 'server-validation') {
+          if (!config.noValidate && !(submitter !== null && submitter !== void 0 && submitter.formNoValidate) && dom.hasError(submission.error) || submission.type === 'validate' && config.mode !== 'server-validation') {
             event.preventDefault();
           } else {
             var _config$onSubmit;
@@ -208,10 +193,7 @@ function useForm() {
             });
           }
           if (event.defaultPrevented) {
-            dom.setFormError(form, submission);
-            if (!form.reportValidity()) {
-              dom.focusFirstInvalidField(form);
-            }
+            dom.reportSubmission(form, submission);
           }
         } catch (e) {
           console.warn(e);
@@ -294,38 +276,6 @@ function useFieldset(ref, config) {
         event.preventDefault();
       }
     };
-    var submitHandler = event => {
-      var form = dom.getFormElement(ref.current);
-      if (!form || event.target !== form) {
-        return;
-      }
-
-      /**
-       * 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;
-        var next = prev;
-        var fieldsetName = (_configRef$current$na2 = configRef.current.name) !== null && _configRef$current$na2 !== void 0 ? _configRef$current$na2 : '';
-        for (var field of form.elements) {
-          if (dom.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 = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, next), {}, {
-                [key]: ''
-              });
-            }
-          }
-        }
-        return next;
-      });
-    };
     var resetHandler = event => {
       var _fieldsetConfig$defau;
       var form = dom.getFormElement(ref.current);
@@ -343,11 +293,9 @@ function useFieldset(ref, config) {
 
     // 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('invalid', invalidHandler, true);
-      document.removeEventListener('submit', submitHandler);
       document.removeEventListener('reset', resetHandler);
     };
   }, [ref]);
@@ -408,6 +356,7 @@ function useFieldList(ref, config) {
       initialError
     };
   });
+  var [error, setError] = react.useState(() => uncontrolledState.initialError.map(error => error === null || error === void 0 ? void 0 : error[0][1]));
   var [entries, setEntries] = react.useState(() => {
     var _config$defaultValue3;
     return Object.entries((_config$defaultValue3 = config.defaultValue) !== null && _config$defaultValue3 !== void 0 ? _config$defaultValue3 : [undefined]);
@@ -416,6 +365,7 @@ function useFieldList(ref, config) {
     var [key, defaultValue] = _ref3;
     return {
       key,
+      error: error[index],
       config: {
         name: "".concat(config.name, "[").concat(index, "]"),
         form: config.form,
@@ -450,6 +400,31 @@ function useFieldList(ref, config) {
     configRef.current = config;
   });
   react.useEffect(() => {
+    var invalidHandler = event => {
+      var _configRef$current$na2;
+      var form = dom.getFormElement(ref.current);
+      var field = event.target;
+      var prefix = (_configRef$current$na2 = configRef.current.name) !== null && _configRef$current$na2 !== void 0 ? _configRef$current$na2 : '';
+      if (!form || !dom.isFieldElement(field) || field.form !== form || !field.name.startsWith(prefix)) {
+        return;
+      }
+      var [index, ...paths] = dom.getPaths(prefix.length > 0 ? field.name.slice(prefix.length) : field.name);
+
+      // Update the error only if the field belongs to the fieldset
+      if (typeof index === 'number' && paths.length === 0) {
+        if (field.dataset.conformTouched) {
+          setError(prev => {
+            var _prev$index;
+            var prevMessage = (_prev$index = prev === null || prev === void 0 ? void 0 : prev[index]) !== null && _prev$index !== void 0 ? _prev$index : '';
+            if (prevMessage === field.validationMessage) {
+              return prev;
+            }
+            return [...prev.slice(0, index), field.validationMessage, ...prev.slice(index + 1)];
+          });
+        }
+        event.preventDefault();
+      }
+    };
     var submitHandler = event => {
       var form = dom.getFormElement(ref.current);
       if (!form || event.target !== form || !(event.submitter instanceof HTMLButtonElement) || event.submitter.name !== 'conform/list') {
@@ -476,6 +451,22 @@ function useFieldList(ref, config) {
             }
         }
       });
+      setError(error => {
+        switch (command.type) {
+          case 'append':
+          case 'prepend':
+          case 'replace':
+            return dom.updateList([...error], _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, command), {}, {
+              payload: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, command.payload), {}, {
+                defaultValue: undefined
+              })
+            }));
+          default:
+            {
+              return dom.updateList([...error], command);
+            }
+        }
+      });
       event.preventDefault();
     };
     var resetHandler = event => {
@@ -490,11 +481,14 @@ function useFieldList(ref, config) {
         initialError: []
       });
       setEntries(Object.entries((_fieldConfig$defaultV2 = fieldConfig.defaultValue) !== null && _fieldConfig$defaultV2 !== void 0 ? _fieldConfig$defaultV2 : [undefined]));
+      setError([]);
     };
     document.addEventListener('submit', submitHandler, true);
+    document.addEventListener('invalid', invalidHandler, true);
     document.addEventListener('reset', resetHandler);
     return () => {
       document.removeEventListener('submit', submitHandler, true);
+      document.removeEventListener('invalid', invalidHandler, true);
       document.removeEventListener('reset', resetHandler);
     };
   }, [ref]);

package/module/helpers.js

@@ -1,11 +1,7 @@
 function input(config) {
-  var {
-    type,
-    value
-  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var isCheckboxOrRadio = type === 'checkbox' || type === 'radio';
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var attributes = {
-    type,
+    type: options.type,
     name: config.name,
     form: config.form,
     required: config.required,
@@ -20,10 +16,11 @@ function input(config) {
   if (config.initialError && config.initialError.length > 0) {
     attributes.autoFocus = true;
   }
-  if (isCheckboxOrRadio) {
-    attributes.value = value !== null && value !== void 0 ? value : 'on';
+  if (options.type === 'checkbox' || options.type === 'radio') {
+    var _options$value;
+    attributes.value = (_options$value = options.value) !== null && _options$value !== void 0 ? _options$value : 'on';
     attributes.defaultChecked = config.defaultValue === attributes.value;
-  } else {
+  } else if (options.type !== 'file') {
     attributes.defaultValue = config.defaultValue;
   }
   return attributes;

package/module/hooks.js

@@ -1,5 +1,5 @@
 import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.js';
-import { getSubmissionType, setFormError, focusFirstInvalidField, requestSubmit, isFieldElement, getFormData, parse, hasError, getPaths, getName, requestValidate, getFormElement, parseListCommand, updateList } from '@conform-to/dom';
+import { getSubmissionType, reportSubmission, getFormData, parse, isFieldElement, hasError, getPaths, getName, requestValidate, getFormElement, parseListCommand, updateList } from '@conform-to/dom';
 import { useRef, useState, useEffect } from 'react';
 import { input } from './helpers.js';
 
@@ -44,11 +44,7 @@ function useForm() {
     if (!form || !config.state) {
       return;
     }
-    setFormError(form, config.state);
-    if (!form.reportValidity()) {
-      focusFirstInvalidField(form);
-    }
-    requestSubmit(form);
+    reportSubmission(form, config.state);
   }, [config.state]);
   useEffect(() => {
     // Revalidate the form when input value is changed
@@ -81,7 +77,7 @@ function useForm() {
     var handleInvalid = event => {
       var form = getFormElement(ref.current);
       var field = event.target;
-      if (!form || !isFieldElement(field) || field.form !== form || field.name !== '') {
+      if (!form || !isFieldElement(field) || field.form !== form || field.name !== '__form__') {
         return;
       }
       event.preventDefault();
@@ -137,12 +133,6 @@ function useForm() {
         var form = event.currentTarget;
         var nativeEvent = event.nativeEvent;
         var submitter = nativeEvent.submitter;
-        for (var element of form.elements) {
-          if (isFieldElement(element) && element.name === '' && element.willValidate) {
-            setError(element.validationMessage);
-            break;
-          }
-        }
 
         /**
          * It checks defaultPrevented to confirm if the submission is intentional
@@ -150,8 +140,7 @@ function useForm() {
          * event is captured and revalidate the form with new fields without triggering
          * a form submission at the same time.
          */
-        if (!submitter || event.defaultPrevented) {
-          event.preventDefault();
+        if (event.defaultPrevented) {
           return;
         }
         try {
@@ -172,14 +161,10 @@ function useForm() {
                *
                * This is mainly used to showcase the constraint validation API.
                */
-              setFormError(form, {
-                type: 'submit',
-                value: {},
-                error: []
-              });
-              for (var _element of form.elements) {
-                if (isFieldElement(_element) && _element.willValidate) {
-                  submission.error.push([_element.name, _element.validationMessage]);
+              for (var element of form.elements) {
+                if (isFieldElement(element) && element.willValidate) {
+                  element.setCustomValidity('');
+                  submission.error.push([element.name, element.validationMessage]);
                 }
               }
             }
@@ -194,7 +179,7 @@ function useForm() {
               }
             }
           }
-          if (!config.noValidate && !submitter.formNoValidate && hasError(submission.error) || submission.type === 'validate' && config.mode !== 'server-validation') {
+          if (!config.noValidate && !(submitter !== null && submitter !== void 0 && submitter.formNoValidate) && hasError(submission.error) || submission.type === 'validate' && config.mode !== 'server-validation') {
             event.preventDefault();
           } else {
             var _config$onSubmit;
@@ -204,10 +189,7 @@ function useForm() {
             });
           }
           if (event.defaultPrevented) {
-            setFormError(form, submission);
-            if (!form.reportValidity()) {
-              focusFirstInvalidField(form);
-            }
+            reportSubmission(form, submission);
           }
         } catch (e) {
           console.warn(e);
@@ -290,38 +272,6 @@ function useFieldset(ref, config) {
         event.preventDefault();
       }
     };
-    var submitHandler = event => {
-      var form = getFormElement(ref.current);
-      if (!form || event.target !== form) {
-        return;
-      }
-
-      /**
-       * 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;
-        var next = prev;
-        var fieldsetName = (_configRef$current$na2 = configRef.current.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]: ''
-              });
-            }
-          }
-        }
-        return next;
-      });
-    };
     var resetHandler = event => {
       var _fieldsetConfig$defau;
       var form = getFormElement(ref.current);
@@ -339,11 +289,9 @@ function useFieldset(ref, config) {
 
     // 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('invalid', invalidHandler, true);
-      document.removeEventListener('submit', submitHandler);
       document.removeEventListener('reset', resetHandler);
     };
   }, [ref]);
@@ -404,6 +352,7 @@ function useFieldList(ref, config) {
       initialError
     };
   });
+  var [error, setError] = useState(() => uncontrolledState.initialError.map(error => error === null || error === void 0 ? void 0 : error[0][1]));
   var [entries, setEntries] = useState(() => {
     var _config$defaultValue3;
     return Object.entries((_config$defaultValue3 = config.defaultValue) !== null && _config$defaultValue3 !== void 0 ? _config$defaultValue3 : [undefined]);
@@ -412,6 +361,7 @@ function useFieldList(ref, config) {
     var [key, defaultValue] = _ref3;
     return {
       key,
+      error: error[index],
       config: {
         name: "".concat(config.name, "[").concat(index, "]"),
         form: config.form,
@@ -446,6 +396,31 @@ function useFieldList(ref, config) {
     configRef.current = config;
   });
   useEffect(() => {
+    var invalidHandler = event => {
+      var _configRef$current$na2;
+      var form = getFormElement(ref.current);
+      var field = event.target;
+      var prefix = (_configRef$current$na2 = configRef.current.name) !== null && _configRef$current$na2 !== void 0 ? _configRef$current$na2 : '';
+      if (!form || !isFieldElement(field) || field.form !== form || !field.name.startsWith(prefix)) {
+        return;
+      }
+      var [index, ...paths] = getPaths(prefix.length > 0 ? field.name.slice(prefix.length) : field.name);
+
+      // Update the error only if the field belongs to the fieldset
+      if (typeof index === 'number' && paths.length === 0) {
+        if (field.dataset.conformTouched) {
+          setError(prev => {
+            var _prev$index;
+            var prevMessage = (_prev$index = prev === null || prev === void 0 ? void 0 : prev[index]) !== null && _prev$index !== void 0 ? _prev$index : '';
+            if (prevMessage === field.validationMessage) {
+              return prev;
+            }
+            return [...prev.slice(0, index), field.validationMessage, ...prev.slice(index + 1)];
+          });
+        }
+        event.preventDefault();
+      }
+    };
     var submitHandler = event => {
       var form = getFormElement(ref.current);
       if (!form || event.target !== form || !(event.submitter instanceof HTMLButtonElement) || event.submitter.name !== 'conform/list') {
@@ -472,6 +447,22 @@ function useFieldList(ref, config) {
             }
         }
       });
+      setError(error => {
+        switch (command.type) {
+          case 'append':
+          case 'prepend':
+          case 'replace':
+            return updateList([...error], _objectSpread2(_objectSpread2({}, command), {}, {
+              payload: _objectSpread2(_objectSpread2({}, command.payload), {}, {
+                defaultValue: undefined
+              })
+            }));
+          default:
+            {
+              return updateList([...error], command);
+            }
+        }
+      });
       event.preventDefault();
     };
     var resetHandler = event => {
@@ -486,11 +477,14 @@ function useFieldList(ref, config) {
         initialError: []
       });
       setEntries(Object.entries((_fieldConfig$defaultV2 = fieldConfig.defaultValue) !== null && _fieldConfig$defaultV2 !== void 0 ? _fieldConfig$defaultV2 : [undefined]));
+      setError([]);
     };
     document.addEventListener('submit', submitHandler, true);
+    document.addEventListener('invalid', invalidHandler, true);
     document.addEventListener('reset', resetHandler);
     return () => {
       document.removeEventListener('submit', submitHandler, true);
+      document.removeEventListener('invalid', invalidHandler, true);
       document.removeEventListener('reset', resetHandler);
     };
   }, [ref]);

package/package.json

@@ -2,7 +2,7 @@
 	"name": "@conform-to/react",
 	"description": "Conform view adapter for react",
 	"license": "MIT",
-	"version": "0.4.1",
+	"version": "0.5.0-pre.0",
 	"main": "index.js",
 	"module": "module/index.js",
 	"repository": {
@@ -19,7 +19,7 @@
 		"url": "https://github.com/edmundhung/conform/issues"
 	},
 	"dependencies": {
-		"@conform-to/dom": "0.4.1"
+		"@conform-to/dom": "0.5.0-pre.0"
 	},
 	"peerDependencies": {
 		"react": ">=16.8"