@samline/forms 2.7.2 → 2.9.0

package/dist/index.cjs

@@ -41,7 +41,7 @@ module.exports = __toCommonJS(src_exports);
 
 // src/api/append.ts
 var createAppend = (state2, helpers) => ({ tag, content, class: className, atStart = false }) => {
-  if (!state2.element) return null;
+  if (!state2.element || state2.isDestroyed) return null;
   helpers.clearFieldCache();
   if (className) {
     const classSelector = className.trim().split(/\s+/)[0];
@@ -77,6 +77,7 @@ var createAddCleanup = (state2, _helpers) => (cleanup) => {
 
 // src/api/auto-submit.ts
 var createAutoSubmit = (state2, helpers) => (next = true) => {
+  if (state2.isDestroyed) return state2.api;
   state2.autoSubmitEnabled = next !== false;
   if (!state2.autoSubmitEnabled && state2.autoSubmitTimer) {
     clearTimeout(state2.autoSubmitTimer);
@@ -89,6 +90,7 @@ var createAutoSubmit = (state2, helpers) => (next = true) => {
 
 // src/api/clear-errors.ts
 var createClearErrors = (state2, helpers) => (fields) => {
+  if (state2.isDestroyed) return state2.api;
   if (!fields) {
     state2.manualErrors = {};
     helpers.syncVisualState();
@@ -215,6 +217,7 @@ var isFormatChar = (char) => {
   return true;
 };
 var restoreCursor = (field, position) => {
+  if (field.ownerDocument.activeElement !== field) return;
   const max = field.value.length;
   const safe = clamp(position, 0, max);
   const apply = () => {
@@ -517,6 +520,7 @@ var createDestroy = (state2, _helpers) => () => {
     }
   }
   state2.watchedFields.clear();
+  state2.groupWatchers.clear();
   state2.subscribers.clear();
   state2.submitHandlers.clear();
   state2.fieldCache.clear();
@@ -609,7 +613,7 @@ var mergeErrors = (left, right) => {
 var createGetState = (state2, helpers) => () => {
   const values = helpers.getValues();
   const errors = cloneErrors(helpers.getMergedErrors());
-  const filledFields = helpers.getTrackedFieldNames().filter((name) => {
+  const filledFields = Object.keys(values).filter((name) => {
     const value = values[name];
     if (Array.isArray(value)) return value.length > 0;
     if (typeof value === "string") return value.trim().length > 0;
@@ -744,9 +748,9 @@ var writeFieldValue = (fields, value) => {
       continue;
     }
     if (field instanceof HTMLSelectElement && field.multiple) {
-      const selectedValues = normalizedArray ?? [normalizedValue];
+      const selectedValues2 = normalizedArray ?? [normalizedValue];
       for (const option of field.options) {
-        option.selected = selectedValues.includes(option.value);
+        option.selected = selectedValues2.includes(option.value);
       }
       continue;
     }
@@ -781,7 +785,7 @@ var submitForm = (form2) => {
 var createGetValue = (state2, helpers) => (name) => readFieldValue(helpers.getFieldsByName(name));
 
 // src/api/observe.ts
-var createObserve = (state2, helpers) => (field, callback) => {
+var observeField = (state2, field, callback) => {
   const callbacks = state2.watchedFields.get(field) ?? /* @__PURE__ */ new Set();
   callbacks.add(callback);
   state2.watchedFields.set(field, callbacks);
@@ -796,47 +800,72 @@ var createObserve = (state2, helpers) => (field, callback) => {
     }
   };
 };
+var observeFields = (state2, fields, callback) => {
+  const names = Array.from(new Set(fields));
+  if (names.length === 0) return () => void 0;
+  const entry = { fields: names, callback };
+  state2.groupWatchers.add(entry);
+  if (state2.element) {
+    const values = Object.fromEntries(names.map((name) => [name, state2.api.getValue(name)]));
+    callback(values, null, state2.element, state2.api.getState());
+  }
+  return () => {
+    state2.groupWatchers.delete(entry);
+  };
+};
+var createObserve = (state2, _helpers) => {
+  function observe(field, callback) {
+    if (state2.isDestroyed) return () => void 0;
+    return Array.isArray(field) ? observeFields(state2, field, callback) : observeField(state2, field, callback);
+  }
+  return observe;
+};
 
 // src/api/on-submit.ts
 var createOnSubmit = (state2, _helpers) => (callback, preventDefault = true) => {
+  if (state2.isDestroyed) return state2.api;
   state2.submitHandlers.add({ callback, preventDefault });
   return state2.api;
 };
 
 // src/api/prefill.ts
-var createPrefill = (state2, _helpers) => (fieldName) => {
-  if (!state2.element) return state2.api;
+var createPrefill = (state2, helpers) => (fieldName) => {
+  if (!state2.element || state2.isDestroyed) return state2.api;
   const params = new URLSearchParams(window.location.search);
-  params.forEach((value, key) => {
-    if (fieldName && fieldName !== key) return;
-    state2.api.setValue(key, value);
-  });
+  const keys = Array.from(new Set(params.keys())).filter(
+    (key) => !fieldName || fieldName === key
+  );
+  if (keys.length === 0) return state2.api;
+  state2.autoSubmitSuspended = true;
+  try {
+    for (const key of keys) {
+      const values = params.getAll(key);
+      state2.api.setValue(key, values.length > 1 ? values : values[0]);
+    }
+  } finally {
+    state2.autoSubmitSuspended = false;
+  }
+  helpers.scheduleAutoSubmit();
   return state2.api;
 };
 
 // src/api/reset.ts
 var createReset = (state2, helpers) => () => {
-  if (!state2.element) return state2.api;
-  state2.element.reset();
-  resetFormattedFields(state2);
-  state2.manualErrors = {};
-  state2.validationErrors = {};
-  state2.validationGroupErrors = {};
-  state2.validationElementErrors.clear();
-  clearAttributes(state2.element, [
-    state2.attributes.error,
-    state2.attributes.filled,
-    "aria-invalid"
-  ]);
-  helpers.syncVisualState();
-  helpers.notifySubscribers();
+  if (!state2.element || state2.isDestroyed) return state2.api;
+  state2.isResetting = true;
+  try {
+    state2.element.reset();
+  } finally {
+    state2.isResetting = false;
+  }
+  helpers.applyReset();
   return state2.api;
 };
 
 // src/api/validate.ts
 var createValidate = (state2, helpers) => (fields) => {
+  if (state2.isDestroyed) return { isValid: true, errors: {} };
   state2.isValidated = true;
-  helpers.syncVisualState(fields);
   return helpers.validateNames(fields);
 };
 
@@ -845,6 +874,7 @@ var createRevalidate = createValidate;
 
 // src/api/set-errors.ts
 var createSetErrors = (state2, helpers) => (fields) => {
+  if (state2.isDestroyed) return state2.api;
   if (Array.isArray(fields)) {
     state2.manualErrors = {
       ...state2.manualErrors,
@@ -861,8 +891,78 @@ var createSetErrors = (state2, helpers) => (fields) => {
   return state2.api;
 };
 
+// src/api/set-options.ts
+var isGroup = (entry) => typeof entry === "object" && entry !== null && Array.isArray(entry.options);
+var createOption = (entry) => {
+  const option = document.createElement("option");
+  if (typeof entry === "object") {
+    option.value = String(entry.value);
+    option.textContent = entry.label ?? String(entry.value);
+    option.disabled = Boolean(entry.disabled);
+    if (entry.selected) option.defaultSelected = true;
+  } else {
+    option.value = String(entry);
+    option.textContent = String(entry);
+  }
+  return option;
+};
+var buildNodes = (options) => {
+  const nodes = [];
+  let hasExplicitSelection = false;
+  const track = (option) => {
+    if (option.defaultSelected) hasExplicitSelection = true;
+    return option;
+  };
+  for (const entry of options) {
+    if (entry === null || entry === void 0) continue;
+    if (isGroup(entry)) {
+      const group = document.createElement("optgroup");
+      group.label = entry.label;
+      group.disabled = Boolean(entry.disabled);
+      for (const child of entry.options) {
+        if (child === null || child === void 0) continue;
+        group.appendChild(track(createOption(child)));
+      }
+      nodes.push(group);
+      continue;
+    }
+    nodes.push(track(createOption(entry)));
+  }
+  return { nodes, hasExplicitSelection };
+};
+var selectedValues = (select) => Array.from(select.selectedOptions, (option) => option.value);
+var restoreSelection = (select, previous) => {
+  if (previous.length === 0) return;
+  const options = Array.from(select.options);
+  if (select.multiple) {
+    for (const option of options) option.selected = previous.includes(option.value);
+    return;
+  }
+  const match = options.find((option) => option.value === previous[0]);
+  if (match) match.selected = true;
+};
+var sameValues = (left, right) => left.length === right.length && left.every((value, index) => value === right[index]);
+var createSetOptions = (state2, helpers) => (name, options, config = {}) => {
+  if (!state2.element || state2.isDestroyed) return state2.api;
+  const selects = helpers.getFieldsByName(name).filter((field) => field instanceof HTMLSelectElement);
+  if (selects.length === 0) return state2.api;
+  const keepValue = config.keepValue ?? true;
+  const changed = [];
+  for (const select of selects) {
+    const previous = selectedValues(select);
+    const { nodes, hasExplicitSelection } = buildNodes(options);
+    select.replaceChildren(...nodes);
+    if (keepValue && !hasExplicitSelection) restoreSelection(select, previous);
+    if (!sameValues(previous, selectedValues(select))) changed.push(select);
+  }
+  helpers.commitOwnMutations(selects);
+  changed[0]?.dispatchEvent(new Event("input", { bubbles: true }));
+  return state2.api;
+};
+
 // src/api/set-value.ts
 var createSetValue = (state2, helpers) => (name, value) => {
+  if (state2.isDestroyed) return state2.api;
   const fields = helpers.getFieldsByName(name);
   if (fields.length === 0) return state2.api;
   writeFieldValue(fields, value);
@@ -874,6 +974,7 @@ var createSetValue = (state2, helpers) => (name, value) => {
 
 // src/api/subscribe.ts
 var createSubscribe = (state2, _helpers) => (listener) => {
+  if (state2.isDestroyed) return () => void 0;
   state2.subscribers.add(listener);
   listener(state2.api.getState());
   return () => {
@@ -882,28 +983,46 @@ var createSubscribe = (state2, _helpers) => (listener) => {
 };
 
 // src/api/unwatch.ts
-var createUnwatch = (state2, _helpers) => (field, callback) => {
-  if (!field) {
-    state2.watchedFields.clear();
-    return state2.api;
-  }
-  if (!callback) {
-    state2.watchedFields.delete(field);
+var sameFields = (left, right) => left.length === right.size && left.every((name) => right.has(name));
+var createUnwatch = (state2, _helpers) => {
+  function unwatch(field, callback) {
+    if (field === void 0 || field === "") {
+      state2.watchedFields.clear();
+      state2.groupWatchers.clear();
+      return state2.api;
+    }
+    if (Array.isArray(field)) {
+      const names = new Set(field);
+      for (const entry of Array.from(state2.groupWatchers)) {
+        if (!sameFields(entry.fields, names)) continue;
+        if (callback && entry.callback !== callback) continue;
+        state2.groupWatchers.delete(entry);
+      }
+      return state2.api;
+    }
+    if (!callback) {
+      state2.watchedFields.delete(field);
+      return state2.api;
+    }
+    const callbacks = state2.watchedFields.get(field);
+    callbacks?.delete(callback);
+    if (callbacks && callbacks.size === 0) {
+      state2.watchedFields.delete(field);
+    }
     return state2.api;
   }
-  const callbacks = state2.watchedFields.get(field);
-  callbacks?.delete(callback);
-  if (callbacks && callbacks.size === 0) {
-    state2.watchedFields.delete(field);
-  }
-  return state2.api;
+  return unwatch;
 };
 
 // src/api/watch.ts
-var createWatch = (state2, helpers) => (field, callback) => {
+var createWatch = (state2, helpers) => {
   const observe = createObserve(state2, helpers);
-  observe(field, callback);
-  return state2.api;
+  function watch(field, callback) {
+    if (Array.isArray(field)) observe(field, callback);
+    else observe(field, callback);
+    return state2.api;
+  }
+  return watch;
 };
 
 // src/core/validation.ts
@@ -1071,6 +1190,7 @@ var createFormController = (target, options = {}) => {
     attributes,
     validators: normalizedOptions.validators ?? {},
     watchedFields: /* @__PURE__ */ new Map(),
+    groupWatchers: /* @__PURE__ */ new Set(),
     subscribers: /* @__PURE__ */ new Set(),
     submitHandlers: /* @__PURE__ */ new Set(),
     fieldCache: /* @__PURE__ */ new Map(),
@@ -1084,6 +1204,9 @@ var createFormController = (target, options = {}) => {
     submitCount: 0,
     pendingSubmitCount: 0,
     autoSubmitTimer: null,
+    isAutoSubmitting: false,
+    autoSubmitSuspended: false,
+    isResetting: false,
     isDestroyed: false,
     listeners: [],
     mutationObserver: null,
@@ -1128,12 +1251,20 @@ var createFormController = (target, options = {}) => {
     state2.fieldCache.set(name, fields);
     return fields;
   };
-  const getTrackedFieldNames = () => {
-    if (!state2.element) return Object.keys(state2.validators);
-    const names = new Set(Object.keys(state2.validators));
+  const indexFieldsByName = () => {
+    const index = /* @__PURE__ */ new Map();
+    if (!state2.element) return index;
     for (const field of getNamedFields(state2.element)) {
-      names.add(field.name);
+      const bucket = index.get(field.name);
+      if (bucket) bucket.push(field);
+      else index.set(field.name, [field]);
     }
+    return index;
+  };
+  const getTrackedFieldNames = (index = indexFieldsByName()) => {
+    if (!state2.element) return Object.keys(state2.validators);
+    const names = new Set(Object.keys(state2.validators));
+    for (const name of index.keys()) names.add(name);
     for (const [canonical, entry] of state2.formattedFields) {
       names.add(canonical);
       if (entry.displayName && entry.displayName !== canonical) {
@@ -1144,8 +1275,9 @@ var createFormController = (target, options = {}) => {
   };
   const getValues = () => {
     const values = {};
-    for (const name of getTrackedFieldNames()) {
-      values[name] = readFieldValue(getFieldsByName(name));
+    const index = indexFieldsByName();
+    for (const name of getTrackedFieldNames(index)) {
+      values[name] = readFieldValue(index.get(name) ?? []);
     }
     return values;
   };
@@ -1229,7 +1361,7 @@ var createFormController = (target, options = {}) => {
     }
     return affected;
   };
-  const emitFieldWatchers = (name) => {
+  const emitSingleWatchers = (name) => {
     if (!state2.element || !state2.api) return;
     const callbacks = state2.watchedFields.get(name);
     if (!callbacks || callbacks.size === 0) return;
@@ -1238,29 +1370,85 @@ var createFormController = (target, options = {}) => {
     const snapshot = state2.api.getState();
     callbacks.forEach((callback) => callback(value, fieldElement, state2.element, snapshot));
   };
+  const emitGroupWatchers = (names) => {
+    if (!state2.element || !state2.api || state2.groupWatchers.size === 0) return;
+    let snapshot;
+    for (const entry of Array.from(state2.groupWatchers)) {
+      const changed = names ? names.find((name) => entry.fields.includes(name)) : null;
+      if (changed === void 0) continue;
+      snapshot ?? (snapshot = state2.api.getState());
+      const values = Object.fromEntries(
+        entry.fields.map((field) => [field, state2.api.getValue(field)])
+      );
+      entry.callback(values, changed, state2.element, snapshot);
+    }
+  };
+  const emitFieldWatchers = (name) => {
+    emitSingleWatchers(name);
+    emitGroupWatchers([name]);
+  };
+  const runAutoSubmit = () => {
+    state2.autoSubmitTimer = null;
+    if (!state2.element || state2.isDestroyed || !state2.autoSubmitEnabled) return;
+    state2.isAutoSubmitting = true;
+    try {
+      submitForm(state2.element);
+    } finally {
+      state2.isAutoSubmitting = false;
+    }
+  };
   const scheduleAutoSubmit = () => {
-    if (!state2.element || !state2.autoSubmitEnabled) return;
+    if (!state2.element || !state2.autoSubmitEnabled || state2.autoSubmitSuspended) return;
     if (state2.autoSubmitTimer) clearTimeout(state2.autoSubmitTimer);
+    state2.autoSubmitTimer = null;
     if (state2.autoSubmitDebounce > 0) {
-      state2.autoSubmitTimer = setTimeout(
-        () => submitForm(state2.element),
-        state2.autoSubmitDebounce
-      );
+      state2.autoSubmitTimer = setTimeout(runAutoSubmit, state2.autoSubmitDebounce);
       return;
     }
-    submitForm(state2.element);
+    runAutoSubmit();
+  };
+  const selectSnapshots = /* @__PURE__ */ new WeakMap();
+  const readSelectSnapshot = (select) => Array.from(select.selectedOptions, (option) => option.value).join("\0");
+  const snapshotSelect = (select) => {
+    selectSnapshots.set(select, readSelectSnapshot(select));
+  };
+  const snapshotAllSelects = () => {
+    if (!state2.element) return;
+    for (const field of getNamedFields(state2.element)) {
+      if (field instanceof HTMLSelectElement) snapshotSelect(field);
+    }
+  };
+  const emitAllFieldWatchers = () => {
+    for (const name of Array.from(state2.watchedFields.keys())) emitSingleWatchers(name);
+    emitGroupWatchers(null);
+  };
+  const applyReset = () => {
+    if (!state2.element || state2.isDestroyed) return;
+    clearFieldCache();
+    resetFormattedFields(state2);
+    state2.manualErrors = {};
+    state2.validationErrors = {};
+    state2.validationGroupErrors = {};
+    state2.validationElementErrors.clear();
+    clearAttributes(state2.element, [attributes.error, attributes.filled, "aria-invalid"]);
+    syncVisualState();
+    snapshotAllSelects();
+    emitAllFieldWatchers();
+    notifySubscribers();
   };
   const helpers = {
     notifySubscribers,
     clearFieldCache,
     getFieldsByName,
-    getTrackedFieldNames,
+    getTrackedFieldNames: () => getTrackedFieldNames(),
     getValues,
     getMergedErrors,
     syncVisualState,
     validateNames,
     emitFieldWatchers,
-    scheduleAutoSubmit
+    scheduleAutoSubmit,
+    applyReset,
+    commitOwnMutations: (selects) => commitOwnMutations(selects)
   };
   const handleDelegatedEvent = (event) => {
     const target2 = event.target;
@@ -1268,6 +1456,7 @@ var createFormController = (target, options = {}) => {
     const name = target2.name;
     if (!name) return;
     clearFieldCache();
+    if (target2 instanceof HTMLSelectElement) snapshotSelect(target2);
     const canonical = resolveCanonicalForName(state2, name) ?? name;
     const displayName = resolveDisplayNameForName(state2, name);
     if (normalizedOptions.clearManualErrorsOnChange) {
@@ -1278,8 +1467,9 @@ var createFormController = (target, options = {}) => {
     if (state2.isValidated && affectedValidationNames.some((field) => state2.validators[field] !== void 0)) {
       validateNames(affectedValidationNames);
     }
-    emitFieldWatchers(canonical);
-    if (canonical !== name) emitFieldWatchers(name);
+    emitSingleWatchers(canonical);
+    if (canonical !== name) emitSingleWatchers(name);
+    emitGroupWatchers(canonical !== name ? [canonical, name] : [canonical]);
     notifySubscribers();
     scheduleAutoSubmit();
   };
@@ -1289,6 +1479,23 @@ var createFormController = (target, options = {}) => {
     if (target2.form !== state2.element || state2.element?.contains(target2)) return;
     handleDelegatedEvent(event);
   };
+  const isFocusable = (candidate) => {
+    if (!candidate.isConnected || candidate.disabled || candidate.hidden) return false;
+    return !(candidate instanceof HTMLInputElement && candidate.type === "hidden");
+  };
+  const focusFirstInvalidField = (errors) => {
+    const candidates = [];
+    for (const name of Object.keys(errors)) {
+      const fields = getFieldsByName(resolveDisplayNameForName(state2, name)).filter(isFocusable);
+      const elementErrors = state2.validationElementErrors.get(name);
+      const field = fields.find((candidate) => elementErrors?.has(candidate)) ?? fields[0];
+      if (field) candidates.push(field);
+    }
+    candidates.sort(
+      (left, right) => left.compareDocumentPosition(right) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1
+    );
+    candidates[0]?.focus();
+  };
   const handleSubmitEvent = (event) => {
     if (!state2.element || state2.isDestroyed || !state2.api) return;
     if (normalizedOptions.clearErrorsOnSubmit) state2.manualErrors = {};
@@ -1299,23 +1506,7 @@ var createFormController = (target, options = {}) => {
     state2.submitCount += 1;
     notifySubscribers();
     if (!validation.isValid) {
-      for (const name of Object.keys(validation.errors)) {
-        const displayName = resolveDisplayNameForName(state2, name);
-        const fields = getFieldsByName(displayName);
-        const elementErrors = state2.validationElementErrors.get(name);
-        const field = fields.find((candidate2) => {
-          if (!candidate2.isConnected || candidate2.disabled || candidate2.hidden) return false;
-          if (candidate2 instanceof HTMLInputElement && candidate2.type === "hidden") return false;
-          return elementErrors?.has(candidate2);
-        }) ?? fields.find((candidate2) => {
-          if (!candidate2.isConnected || candidate2.disabled || candidate2.hidden) return false;
-          return !(candidate2 instanceof HTMLInputElement && candidate2.type === "hidden");
-        });
-        if (field) {
-          field.focus();
-          break;
-        }
-      }
+      if (!state2.isAutoSubmitting) focusFirstInvalidField(validation.errors);
       return;
     }
     const candidate = event;
@@ -1328,7 +1519,13 @@ var createFormController = (target, options = {}) => {
     try {
       for (const handler of handlers) {
         const result = handler.callback(state2.element, data, formData, snapshot);
-        if (result && typeof result.then === "function") pending.push(Promise.resolve(result));
+        if (result && typeof result.then === "function") {
+          pending.push(
+            Promise.resolve(result).catch((error) => {
+              console.error("[forms] submit handler failed", error);
+            })
+          );
+        }
       }
     } catch (error) {
       synchronousError = error;
@@ -1344,15 +1541,71 @@ var createFormController = (target, options = {}) => {
     }
     if (hasSynchronousError) throw synchronousError;
   };
+  const handleResetEvent = (event) => {
+    if (state2.isResetting) return;
+    const timer = setTimeout(() => {
+      state2.cleanups.delete(cancel);
+      if (!event.defaultPrevented) applyReset();
+    }, 0);
+    const cancel = () => clearTimeout(timer);
+    state2.cleanups.add(cancel);
+  };
+  const touchesFields = (node) => node instanceof Element && (isFieldElement(node) || node.querySelector("input, select, textarea") !== null);
+  const isStructural = (record) => record.type === "attributes" || Array.from(record.addedNodes).some(touchesFields) || Array.from(record.removedNodes).some(touchesFields);
+  const isOptionNode = (node) => node instanceof HTMLOptionElement || node instanceof HTMLOptGroupElement;
+  const optionListOwner = (record) => {
+    if (record.type !== "childList") return null;
+    const touchesOptions = Array.from(record.addedNodes).some(isOptionNode) || Array.from(record.removedNodes).some(isOptionNode);
+    if (!touchesOptions) return null;
+    const target2 = record.target;
+    if (target2 instanceof HTMLSelectElement) return target2;
+    if (target2 instanceof HTMLOptGroupElement && target2.parentElement instanceof HTMLSelectElement) {
+      return target2.parentElement;
+    }
+    return null;
+  };
+  const handleMutations = (records) => {
+    if (state2.isDestroyed) return;
+    const structural = records.some(isStructural);
+    const changedNames = /* @__PURE__ */ new Set();
+    for (const record of records) {
+      const select = optionListOwner(record);
+      if (!select || !select.name) continue;
+      const next = readSelectSnapshot(select);
+      if (selectSnapshots.get(select) !== next) changedNames.add(select.name);
+      selectSnapshots.set(select, next);
+    }
+    if (!structural && changedNames.size === 0) return;
+    clearFieldCache();
+    if (structural) {
+      snapshotAllSelects();
+      if (state2.isValidated) validateNames();
+      else syncVisualState();
+    } else {
+      const affected = /* @__PURE__ */ new Set();
+      for (const name of changedNames) {
+        for (const field of getAffectedValidationNames(name)) affected.add(field);
+      }
+      const names = Array.from(affected);
+      syncVisualState(Array.from(changedNames));
+      if (state2.isValidated && names.some((field) => state2.validators[field] !== void 0)) {
+        validateNames(names);
+      }
+    }
+    for (const name of changedNames) emitFieldWatchers(name);
+    notifySubscribers();
+  };
+  const commitOwnMutations = (selects) => {
+    selects.forEach(snapshotSelect);
+    const pending = state2.mutationObserver?.takeRecords() ?? [];
+    const foreign = pending.filter(
+      (record) => !selects.some((select) => select.contains(record.target))
+    );
+    if (foreign.length > 0) handleMutations(foreign);
+  };
   const startMutationObserver = () => {
     if (!state2.element || typeof MutationObserver === "undefined") return;
-    state2.mutationObserver = new MutationObserver(() => {
-      clearFieldCache();
-      if (state2.isValidated) {
-        validateNames();
-      } else syncVisualState();
-      notifySubscribers();
-    });
+    state2.mutationObserver = new MutationObserver(handleMutations);
     state2.mutationObserver.observe(state2.element, {
       childList: true,
       subtree: true,
@@ -1381,6 +1634,7 @@ var createFormController = (target, options = {}) => {
     setErrors: createSetErrors(state2, helpers),
     clearErrors: createClearErrors(state2, helpers),
     setValue: createSetValue(state2, helpers),
+    setOptions: createSetOptions(state2, helpers),
     getValue: createGetValue(state2, helpers),
     getField: createGetField(state2, helpers),
     validate: createValidate(state2, helpers),
@@ -1399,6 +1653,8 @@ var createFormController = (target, options = {}) => {
     addListener2(state2.element, "input", handleDelegatedEvent);
     addListener2(document, "input", handleExternalDelegatedEvent);
     addListener2(state2.element, "submit", handleSubmitEvent);
+    addListener2(state2.element, "reset", handleResetEvent);
+    snapshotAllSelects();
     startMutationObserver();
   }
   if (normalizedOptions.autoSubmit) {