@conform-to/react 1.1.5 → 1.2.0

package/helpers.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { FormMetadata, FieldMetadata, Metadata, Pretty } from './context';
 type FormControlProps = {
-    key: string | undefined;
+    key?: string;
     id: string;
     name: string;
     form: string;

package/helpers.js

@@ -73,7 +73,6 @@ function getFieldsetProps(metadata, options) {
  */
 function getFormControlProps(metadata, options) {
   return simplify(_rollupPluginBabelHelpers.objectSpread2({
-    key: metadata.key,
     required: metadata.required || undefined
   }, getFieldsetProps(metadata, options)));
 }

package/helpers.mjs

@@ -69,7 +69,6 @@ function getFieldsetProps(metadata, options) {
  */
 function getFormControlProps(metadata, options) {
   return simplify(_objectSpread2({
-    key: metadata.key,
     required: metadata.required || undefined
   }, getFieldsetProps(metadata, options)));
 }

package/hooks.js

@@ -56,10 +56,61 @@ function useForm(options) {
       formId
     }));
   });
-  var subjectRef = context.useSubjectRef();
+  var subjectRef = context.useSubjectRef({
+    key: {
+      // Subscribe to all key changes so it will re-render and
+      // update the field value as soon as the DOM is updated
+      prefix: ['']
+    }
+  });
   var stateSnapshot = context.useFormState(context$1, subjectRef);
   var noValidate = useNoValidate(options.defaultNoValidate);
   var form = context.getFormMetadata(context$1, subjectRef, stateSnapshot, noValidate);
+  react.useEffect(() => {
+    var formElement = document.forms.namedItem(formId);
+    if (!formElement) {
+      return;
+    }
+    var getAll = value => {
+      if (typeof value === 'string') {
+        return [value];
+      }
+      if (Array.isArray(value) && value.every(item => typeof item === 'string')) {
+        return value;
+      }
+      return undefined;
+    };
+    var get = value => {
+      var _getAll;
+      return (_getAll = getAll(value)) === null || _getAll === void 0 ? void 0 : _getAll[0];
+    };
+    for (var element of formElement.elements) {
+      if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement) {
+        var prev = element.dataset.conform;
+        var next = stateSnapshot.key[element.name];
+        var defaultValue = stateSnapshot.initialValue[element.name];
+        if (prev === 'managed') {
+          // Skip fields managed by useInputControl()
+          continue;
+        }
+        if (typeof prev === 'undefined' || prev !== next) {
+          element.dataset.conform = next;
+          if ('options' in element) {
+            var _getAll2;
+            var value = (_getAll2 = getAll(defaultValue)) !== null && _getAll2 !== void 0 ? _getAll2 : [];
+            for (var option of element.options) {
+              option.selected = value.includes(option.value);
+            }
+          } else if ('checked' in element && (element.type === 'checkbox' || element.type === 'radio')) {
+            element.checked = get(defaultValue) === element.value;
+          } else {
+            var _get;
+            element.value = (_get = get(defaultValue)) !== null && _get !== void 0 ? _get : '';
+          }
+        }
+      }
+    }
+  }, [formId, stateSnapshot]);
   return [form, form.getFieldset()];
 }
 function useFormMetadata(formId) {

package/hooks.mjs

@@ -52,10 +52,61 @@ function useForm(options) {
       formId
     }));
   });
-  var subjectRef = useSubjectRef();
+  var subjectRef = useSubjectRef({
+    key: {
+      // Subscribe to all key changes so it will re-render and
+      // update the field value as soon as the DOM is updated
+      prefix: ['']
+    }
+  });
   var stateSnapshot = useFormState(context, subjectRef);
   var noValidate = useNoValidate(options.defaultNoValidate);
   var form = getFormMetadata(context, subjectRef, stateSnapshot, noValidate);
+  useEffect(() => {
+    var formElement = document.forms.namedItem(formId);
+    if (!formElement) {
+      return;
+    }
+    var getAll = value => {
+      if (typeof value === 'string') {
+        return [value];
+      }
+      if (Array.isArray(value) && value.every(item => typeof item === 'string')) {
+        return value;
+      }
+      return undefined;
+    };
+    var get = value => {
+      var _getAll;
+      return (_getAll = getAll(value)) === null || _getAll === void 0 ? void 0 : _getAll[0];
+    };
+    for (var element of formElement.elements) {
+      if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement) {
+        var prev = element.dataset.conform;
+        var next = stateSnapshot.key[element.name];
+        var defaultValue = stateSnapshot.initialValue[element.name];
+        if (prev === 'managed') {
+          // Skip fields managed by useInputControl()
+          continue;
+        }
+        if (typeof prev === 'undefined' || prev !== next) {
+          element.dataset.conform = next;
+          if ('options' in element) {
+            var _getAll2;
+            var value = (_getAll2 = getAll(defaultValue)) !== null && _getAll2 !== void 0 ? _getAll2 : [];
+            for (var option of element.options) {
+              option.selected = value.includes(option.value);
+            }
+          } else if ('checked' in element && (element.type === 'checkbox' || element.type === 'radio')) {
+            element.checked = get(defaultValue) === element.value;
+          } else {
+            var _get;
+            element.value = (_get = get(defaultValue)) !== null && _get !== void 0 ? _get : '';
+          }
+        }
+      }
+    }
+  }, [formId, stateSnapshot]);
   return [form, form.getFieldset()];
 }
 function useFormMetadata(formId) {

package/integrations.js

@@ -31,7 +31,7 @@ function createDummySelect(form, name, value) {
   var options = typeof value === 'string' ? [value] : value !== null && value !== void 0 ? value : [];
   select.name = name;
   select.multiple = true;
-  select.dataset.conform = 'true';
+  select.dataset.conform = 'managed';
 
   // To make sure the input is hidden but still focusable
   select.setAttribute('aria-hidden', 'true');
@@ -52,7 +52,7 @@ function createDummySelect(form, name, value) {
   return select;
 }
 function isDummySelect(element) {
-  return element.dataset.conform === 'true';
+  return element.dataset.conform === 'managed';
 }
 function updateFieldValue(element, value) {
   if (element instanceof HTMLInputElement && (element.type === 'checkbox' || element.type === 'radio')) {
@@ -216,21 +216,8 @@ function useControl(meta) {
     setValue(value);
     change(value);
   };
-  var refCallback = element => {
-    var _meta$key;
-    register(element);
-    if (!element) {
-      return;
-    }
-    var prevKey = element.dataset.conform;
-    var nextKey = "".concat((_meta$key = meta.key) !== null && _meta$key !== void 0 ? _meta$key : '');
-    if (prevKey !== nextKey) {
-      element.dataset.conform = nextKey;
-      updateFieldValue(element, value !== null && value !== void 0 ? value : '');
-    }
-  };
   return {
-    register: refCallback,
+    register,
     value,
     change: handleChange,
     focus,

package/integrations.mjs

@@ -27,7 +27,7 @@ function createDummySelect(form, name, value) {
   var options = typeof value === 'string' ? [value] : value !== null && value !== void 0 ? value : [];
   select.name = name;
   select.multiple = true;
-  select.dataset.conform = 'true';
+  select.dataset.conform = 'managed';
 
   // To make sure the input is hidden but still focusable
   select.setAttribute('aria-hidden', 'true');
@@ -48,7 +48,7 @@ function createDummySelect(form, name, value) {
   return select;
 }
 function isDummySelect(element) {
-  return element.dataset.conform === 'true';
+  return element.dataset.conform === 'managed';
 }
 function updateFieldValue(element, value) {
   if (element instanceof HTMLInputElement && (element.type === 'checkbox' || element.type === 'radio')) {
@@ -212,21 +212,8 @@ function useControl(meta) {
     setValue(value);
     change(value);
   };
-  var refCallback = element => {
-    var _meta$key;
-    register(element);
-    if (!element) {
-      return;
-    }
-    var prevKey = element.dataset.conform;
-    var nextKey = "".concat((_meta$key = meta.key) !== null && _meta$key !== void 0 ? _meta$key : '');
-    if (prevKey !== nextKey) {
-      element.dataset.conform = nextKey;
-      updateFieldValue(element, value !== null && value !== void 0 ? value : '');
-    }
-  };
   return {
-    register: refCallback,
+    register,
     value,
     change: handleChange,
     focus,

package/package.json

@@ -3,7 +3,7 @@
   "description": "Conform view adapter for react",
   "homepage": "https://conform.guide",
   "license": "MIT",
-  "version": "1.1.5",
+  "version": "1.2.0",
   "main": "index.js",
   "module": "index.mjs",
   "types": "index.d.ts",
@@ -30,7 +30,7 @@
     "url": "https://github.com/edmundhung/conform/issues"
   },
   "dependencies": {
-    "@conform-to/dom": "1.1.5"
+    "@conform-to/dom": "1.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.17.8",