@conform-to/react 0.3.0 → 0.3.1

package/README.md

@@ -2,15 +2,18 @@
 
 > [React](https://github.com/facebook/react) adapter for [conform](https://github.com/edmundhung/conform)
 
+<!-- aside -->
+
 ## API Reference
 
-- [useForm](#useForm)
-- [useFieldset](#useFieldset)
-- [useFieldList](#useFieldList)
-- [useControlledInput](#useControlledInput)
+- [useForm](#useform)
+- [useFieldset](#usefieldset)
+- [useFieldList](#usefieldlist)
+- [useControlledInput](#usecontrolledinput)
+- [createValidate](#createvalidate)
 - [conform](#conform)
 
----
+<!-- /aside -->
 
 ### useForm
 
@@ -219,31 +222,31 @@ function BookFieldset() {
    * This would be 'Invalid ISBN' initially as specified
    * in the initialError config
    */
-  console.log(book.error);
+  console.log(isbn.error);
 
   /**
    * This would be `book.isbn` instead of `isbn`
    * if the `name` option is provided
    */
-  console.log(book.config.name);
+  console.log(isbn.config.name);
 
   /**
    * This would be `0340013818` if specified
    * on the `initalValue` option
    */
-  console.log(book.config.defaultValue);
+  console.log(isbn.config.defaultValue);
 
   /**
    * Initial error message
    * This would be 'Invalid ISBN' if specified
    */
-  console.log(book.config.initialError);
+  console.log(isbn.config.initialError);
 
   /**
    * This would be `random-form-id`
    * because of the `form` option provided
    */
-  console.log(book.config.form);
+  console.log(isbn.config.form);
 
   /**
    * Constraint of the field (required, minLength etc)
@@ -254,8 +257,8 @@ function BookFieldset() {
    *   pattern: '[0-9]{10,13}'
    * }
    */
-  console.log(book.config.required);
-  console.log(book.config.pattern);
+  console.log(isbn.config.required);
+  console.log(isbn.config.pattern);
 
   return <form {...formProps}>{/* ... */}</form>;
 }
@@ -353,7 +356,7 @@ type Collection = {
 function CollectionFieldset() {
   const ref = useRef();
   const { books } = useFieldset<Collection>(ref);
-  const [bookList, control] = useFieldList(ref, books);
+  const [bookList, control] = useFieldList(ref, books.config);
 
   return (
     <fieldset ref={ref}>
@@ -392,14 +395,14 @@ import { useRef } from 'react';
 function CollectionFieldset() {
   const ref = useRef();
   const { books } = useFieldset<Collection>(ref);
-  const [bookList, control] = useFieldList(ref, books);
+  const [bookList, control] = useFieldList(ref, books.config);
 
   return (
     <fieldset ref={ref}>
       {bookList.map((book, index) => (
         <div key={book.key}>
-          {/* `book.props` is a FieldConfig object similar to `books` */}
-          <BookFieldset {...book.config}>
+          {/* `book.config` is a FieldConfig object similar to `books` */}
+          <BookFieldset {...book.config} />
 
           {/* To setup a delete button */}
           <button {...control.remove({ index })}>Delete</button>
@@ -426,11 +429,7 @@ function BookFieldset({ name, form, defaultValue, error }) {
     error,
   });
 
-  return (
-    <fieldset ref={ref}>
-      {/* ... */}
-    </fieldset>
-  );
+  return <fieldset ref={ref}>{/* ... */}</fieldset>;
 }
 ```
 
@@ -470,7 +469,7 @@ import { useRef } from 'react';
 function MuiForm() {
   const ref = useRef();
   const { category } = useFieldset(schema);
-  const [inputProps, control] = useControlledInput(category);
+  const [inputProps, control] = useControlledInput(category.config);
 
   return (
     <fieldset ref={ref}>
@@ -480,6 +479,7 @@ function MuiForm() {
       {/* MUI Select is a controlled component */}
       <Select
         label="Category"
+        inputRef={control.ref}
         value={control.value}
         onChange={control.onChange}
         onBlur={control.onBlur}
@@ -499,6 +499,57 @@ function MuiForm() {
 
 ---
 
+### createValidate
+
+This help you configure a validate function to check the validity of each fields and setup custom messages using the Constraint Validation APIs.
+
+```tsx
+import { useForm, createValidate } from '@conform-to/react';
+
+export default function SignupForm() {
+  const formProps = useForm({
+    validate: createValidate((field, formData) => {
+      switch (field.name) {
+        case 'email':
+          if (field.validity.valueMissing) {
+            field.setCustomValidity('Email is required');
+          } else if (field.validity.typeMismatch) {
+            field.setCustomValidity('Please enter a valid email');
+          } else {
+            field.setCustomValidity('');
+          }
+          break;
+        case 'password':
+          if (field.validity.valueMissing) {
+            field.setCustomValidity('Password is required');
+          } else if (field.validity.tooShort) {
+            field.setCustomValidity(
+              'The password should be at least 10 characters long',
+            );
+          } else {
+            field.setCustomValidity('');
+          }
+          break;
+        case 'confirm-password': {
+          if (field.validity.valueMissing) {
+            field.setCustomValidity('Confirm Password is required');
+          } else if (field.value !== formData.get('password')) {
+            field.setCustomValidity('The password does not match');
+          } else {
+            field.setCustomValidity('');
+          }
+          break;
+        }
+      }
+    }),
+  });
+
+  return <form {...formProps}>{/* ... */}</form>;
+}
+```
+
+---
+
 ### conform
 
 It provides several helpers to configure a native input field quickly:
@@ -509,13 +560,13 @@ import { useRef } from 'react';
 
 function RandomForm() {
   const ref = useRef();
-  const { cateogry } = useFieldset(ref);
+  const { category } = useFieldset(ref);
 
   return (
     <fieldset ref={ref}>
-      <input {...conform.input(cateogry, { type: 'text' })} />
-      <textarea {...conform.textarea(cateogry)} />
-      <select {...conform.select(cateogry)}>{/* ... */}</select>
+      <input {...conform.input(category.config, { type: 'text' })} />
+      <textarea {...conform.textarea(category.config)} />
+      <select {...conform.select(category.config)}>{/* ... */}</select>
     </fieldset>
   );
 }
@@ -526,37 +577,37 @@ This is equivalent to:
 ```tsx
 function RandomForm() {
   const ref = useRef();
-  const { cateogry } = useFieldset(ref);
+  const { category } = useFieldset(ref);
 
   return (
     <fieldset ref={ref}>
       <input
         type="text"
-        name={cateogry.name}
-        form={cateogry.form}
-        defaultValue={cateogry.defaultValue}
-        requried={cateogry.required}
-        minLength={cateogry.minLength}
-        maxLength={cateogry.maxLength}
-        min={cateogry.min}
-        max={cateogry.max}
-        multiple={cateogry.multiple}
-        pattern={cateogry.pattern}
+        name={category.config.name}
+        form={category.config.form}
+        defaultValue={category.config.defaultValue}
+        requried={category.config.required}
+        minLength={category.config.minLength}
+        maxLength={category.config.maxLength}
+        min={category.config.min}
+        max={category.config.max}
+        multiple={category.config.multiple}
+        pattern={category.config.pattern}
       >
       <textarea
-        name={cateogry.name}
-        form={cateogry.form}
-        defaultValue={cateogry.defaultValue}
-        requried={cateogry.required}
-        minLength={cateogry.minLength}
-        maxLength={cateogry.maxLength}
+        name={category.config.name}
+        form={category.config.form}
+        defaultValue={category.config.defaultValue}
+        requried={category.config.required}
+        minLength={category.config.minLength}
+        maxLength={category.config.maxLength}
       />
       <select
-        name={cateogry.name}
-        form={cateogry.form}
-        defaultValue={cateogry.defaultValue}
-        requried={cateogry.required}
-        multiple={cateogry.multiple}
+        name={category.config.name}
+        form={category.config.form}
+        defaultValue={category.config.defaultValue}
+        requried={category.config.required}
+        multiple={category.config.multiple}
       >
         {/* ... */}
       </select>

package/helpers.js

@@ -22,6 +22,10 @@ function input(config) {
     multiple: config.multiple
   };
 
+  if (typeof config.initialError !== 'undefined') {
+    attributes.autoFocus = true;
+  }
+
   if (isCheckboxOrRadio) {
     attributes.value = value !== null && value !== void 0 ? value : 'on';
     attributes.defaultChecked = config.defaultValue === attributes.value;
@@ -34,25 +38,39 @@ function input(config) {
 function select(config) {
   var _config$defaultValue;
 
-  return {
+  var attributes = {
     name: config.name,
     form: config.form,
     defaultValue: config.multiple ? Array.isArray(config.defaultValue) ? config.defaultValue : [] : "".concat((_config$defaultValue = config.defaultValue) !== null && _config$defaultValue !== void 0 ? _config$defaultValue : ''),
     required: config.required,
-    multiple: config.multiple
+    multiple: config.multiple,
+    autoFocus: typeof config.initialError !== 'undefined' ? Boolean(config.initialError) : undefined
   };
+
+  if (typeof config.initialError !== 'undefined') {
+    attributes.autoFocus = true;
+  }
+
+  return attributes;
 }
 function textarea(config) {
   var _config$defaultValue2;
 
-  return {
+  var attributes = {
     name: config.name,
     form: config.form,
     defaultValue: "".concat((_config$defaultValue2 = config.defaultValue) !== null && _config$defaultValue2 !== void 0 ? _config$defaultValue2 : ''),
     required: config.required,
     minLength: config.minLength,
-    maxLength: config.maxLength
+    maxLength: config.maxLength,
+    autoFocus: Boolean(config.initialError)
   };
+
+  if (typeof config.initialError !== 'undefined') {
+    attributes.autoFocus = true;
+  }
+
+  return attributes;
 }
 
 exports.input = input;

package/hooks.d.ts

@@ -42,7 +42,7 @@ interface FormProps {
  * 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.3.1/packages/conform-react/README.md#useform
  */
 export declare function useForm(config?: FormConfig): FormProps;
 /**
@@ -83,7 +83,7 @@ export interface FieldsetConfig<Schema extends Record<string, any>> {
 /**
  * Returns all the information about the fieldset.
  *
- * @see https://github.com/edmundhung/conform/tree/v0.3.0/packages/conform-react/README.md#usefieldset
+ * @see https://github.com/edmundhung/conform/tree/v0.3.1/packages/conform-react/README.md#usefieldset
  */
 export declare function useFieldset<Schema extends Record<string, any>>(ref: RefObject<HTMLFormElement | HTMLFieldSetElement>, config?: FieldsetConfig<Schema>): Fieldset<Schema>;
 export declare function useFieldset<Schema extends Record<string, any>>(ref: RefObject<HTMLFormElement | HTMLFieldSetElement>, config?: FieldConfig<Schema>): Fieldset<Schema>;
@@ -110,7 +110,7 @@ interface ListControl<Schema> {
  * 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.3.1/packages/conform-react/README.md#usefieldlist
  */
 export declare function useFieldList<Payload = any>(ref: RefObject<HTMLFormElement | HTMLFieldSetElement>, config: FieldConfig<Array<Payload>>): [
     Array<{
@@ -122,7 +122,10 @@ export declare function useFieldList<Payload = any>(ref: RefObject<HTMLFormEleme
 interface ShadowInputProps extends InputHTMLAttributes<HTMLInputElement> {
     ref: RefObject<HTMLInputElement>;
 }
-interface InputControl {
+interface InputControl<Element extends {
+    focus: () => void;
+}> {
+    ref: RefObject<Element>;
     value: string;
     onChange: (eventOrValue: {
         target: {
@@ -137,7 +140,9 @@ interface InputControl {
  * 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.3.1/packages/conform-react/README.md#usecontrolledinput
  */
-export declare function useControlledInput<Schema extends Primitive = Primitive>(field: FieldConfig<Schema>): [ShadowInputProps, InputControl];
+export declare function useControlledInput<Element extends {
+    focus: () => void;
+} = HTMLInputElement, Schema extends Primitive = Primitive>(field: FieldConfig<Schema>): [ShadowInputProps, InputControl<Element>];
 export {};

package/hooks.js

@@ -11,7 +11,7 @@ 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.3.1/packages/conform-react/README.md#useform
  */
 function useForm() {
   var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -125,10 +125,17 @@ function useForm() {
        */
 
       if (!config.noValidate && !(submitter !== null && submitter !== void 0 && submitter.formNoValidate) && !event.defaultPrevented) {
-        // Mark all fields as touched
+        var focused = false;
+
         for (var field of form.elements) {
           if (dom.isFieldElement(field)) {
-            field.dataset.conformTouched = 'true';
+            // Mark the field as touched
+            field.dataset.conformTouched = 'true'; // Focus on the first invalid field
+
+            if (!focused && !field.validity.valid && field.tagName !== 'BUTTON') {
+              field.focus();
+              focused = true;
+            }
           }
         } // Check the validity of the form
 
@@ -303,7 +310,7 @@ function useFieldset(ref, config) {
 
   return new Proxy({}, {
     get(_target, key) {
-      var _constraint, _config$defaultValue, _config$initialError3, _config$initialError4, _error$key;
+      var _constraint, _config$defaultValue, _config$initialError$, _config$initialError3, _config$initialError4, _config$initialError5, _config$initialError6, _error$key;
 
       if (typeof key !== 'string') {
         return;
@@ -315,7 +322,7 @@ function useFieldset(ref, config) {
           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
+          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
         }, constraint),
         error: (_error$key = error === null || error === void 0 ? void 0 : error[key]) !== null && _error$key !== void 0 ? _error$key : ''
       };
@@ -329,7 +336,7 @@ 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.3.1/packages/conform-react/README.md#usefieldlist
  */
 function useFieldList(ref, config) {
   var [entries, setEntries] = react.useState(() => {
@@ -338,7 +345,7 @@ function useFieldList(ref, config) {
     return Object.entries((_config$defaultValue2 = config.defaultValue) !== null && _config$defaultValue2 !== void 0 ? _config$defaultValue2 : [undefined]);
   });
   var list = entries.map((_ref, index) => {
-    var _config$defaultValue3, _config$initialError5, _config$initialError6;
+    var _config$defaultValue3, _config$initialError7, _config$initialError8;
 
     var [key, defaultValue] = _ref;
     return {
@@ -346,7 +353,7 @@ function useFieldList(ref, config) {
       config: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, 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
+        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
       })
     };
   });
@@ -448,12 +455,13 @@ 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.3.1/packages/conform-react/README.md#usecontrolledinput
  */
 function useControlledInput(field) {
   var _field$defaultValue;
 
   var ref = react.useRef(null);
+  var inputRef = react.useRef(null);
   var [value, setValue] = react.useState("".concat((_field$defaultValue = field.defaultValue) !== null && _field$defaultValue !== void 0 ? _field$defaultValue : ''));
 
   var handleChange = eventOrValue => {
@@ -483,10 +491,28 @@ function useControlledInput(field) {
 
   return [_rollupPluginBabelHelpers.objectSpread2({
     ref,
-    hidden: true
+    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(field, {
     type: 'text'
   })), {
+    ref: inputRef,
     value,
     onChange: handleChange,
     onBlur: handleBlur,

package/module/helpers.js

@@ -18,6 +18,10 @@ function input(config) {
     multiple: config.multiple
   };
 
+  if (typeof config.initialError !== 'undefined') {
+    attributes.autoFocus = true;
+  }
+
   if (isCheckboxOrRadio) {
     attributes.value = value !== null && value !== void 0 ? value : 'on';
     attributes.defaultChecked = config.defaultValue === attributes.value;
@@ -30,25 +34,39 @@ function input(config) {
 function select(config) {
   var _config$defaultValue;
 
-  return {
+  var attributes = {
     name: config.name,
     form: config.form,
     defaultValue: config.multiple ? Array.isArray(config.defaultValue) ? config.defaultValue : [] : "".concat((_config$defaultValue = config.defaultValue) !== null && _config$defaultValue !== void 0 ? _config$defaultValue : ''),
     required: config.required,
-    multiple: config.multiple
+    multiple: config.multiple,
+    autoFocus: typeof config.initialError !== 'undefined' ? Boolean(config.initialError) : undefined
   };
+
+  if (typeof config.initialError !== 'undefined') {
+    attributes.autoFocus = true;
+  }
+
+  return attributes;
 }
 function textarea(config) {
   var _config$defaultValue2;
 
-  return {
+  var attributes = {
     name: config.name,
     form: config.form,
     defaultValue: "".concat((_config$defaultValue2 = config.defaultValue) !== null && _config$defaultValue2 !== void 0 ? _config$defaultValue2 : ''),
     required: config.required,
     minLength: config.minLength,
-    maxLength: config.maxLength
+    maxLength: config.maxLength,
+    autoFocus: Boolean(config.initialError)
   };
+
+  if (typeof config.initialError !== 'undefined') {
+    attributes.autoFocus = true;
+  }
+
+  return attributes;
 }
 
 export { input, select, textarea };

package/module/hooks.js

@@ -7,7 +7,7 @@ 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.0/packages/conform-react/README.md#useform
+ * @see https://github.com/edmundhung/conform/tree/v0.3.1/packages/conform-react/README.md#useform
  */
 function useForm() {
   var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -121,10 +121,17 @@ function useForm() {
        */
 
       if (!config.noValidate && !(submitter !== null && submitter !== void 0 && submitter.formNoValidate) && !event.defaultPrevented) {
-        // Mark all fields as touched
+        var focused = false;
+
         for (var field of form.elements) {
           if (isFieldElement(field)) {
-            field.dataset.conformTouched = 'true';
+            // Mark the field as touched
+            field.dataset.conformTouched = 'true'; // Focus on the first invalid field
+
+            if (!focused && !field.validity.valid && field.tagName !== 'BUTTON') {
+              field.focus();
+              focused = true;
+            }
           }
         } // Check the validity of the form
 
@@ -299,7 +306,7 @@ function useFieldset(ref, config) {
 
   return new Proxy({}, {
     get(_target, key) {
-      var _constraint, _config$defaultValue, _config$initialError3, _config$initialError4, _error$key;
+      var _constraint, _config$defaultValue, _config$initialError$, _config$initialError3, _config$initialError4, _config$initialError5, _config$initialError6, _error$key;
 
       if (typeof key !== 'string') {
         return;
@@ -311,7 +318,7 @@ function useFieldset(ref, config) {
           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
+          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
         }, constraint),
         error: (_error$key = error === null || error === void 0 ? void 0 : error[key]) !== null && _error$key !== void 0 ? _error$key : ''
       };
@@ -325,7 +332,7 @@ 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.3.1/packages/conform-react/README.md#usefieldlist
  */
 function useFieldList(ref, config) {
   var [entries, setEntries] = useState(() => {
@@ -334,7 +341,7 @@ function useFieldList(ref, config) {
     return Object.entries((_config$defaultValue2 = config.defaultValue) !== null && _config$defaultValue2 !== void 0 ? _config$defaultValue2 : [undefined]);
   });
   var list = entries.map((_ref, index) => {
-    var _config$defaultValue3, _config$initialError5, _config$initialError6;
+    var _config$defaultValue3, _config$initialError7, _config$initialError8;
 
     var [key, defaultValue] = _ref;
     return {
@@ -342,7 +349,7 @@ function useFieldList(ref, config) {
       config: _objectSpread2(_objectSpread2({}, 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
+        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
       })
     };
   });
@@ -444,12 +451,13 @@ 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.3.1/packages/conform-react/README.md#usecontrolledinput
  */
 function useControlledInput(field) {
   var _field$defaultValue;
 
   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 handleChange = eventOrValue => {
@@ -479,10 +487,28 @@ function useControlledInput(field) {
 
   return [_objectSpread2({
     ref,
-    hidden: true
+    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();
+    }
+
   }, input(field, {
     type: 'text'
   })), {
+    ref: inputRef,
     value,
     onChange: handleChange,
     onBlur: handleBlur,

package/package.json

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