@verbb/formie-browser 1.0.13 → 1.0.15

package/src/js/modules/fields/address-state.ts

@@ -1,7 +1,10 @@
-import type { FormieModuleDefinition } from '#contracts/modules';
+import { browserRequest, type BrowserRequestOptions } from '@verbb/formie-core';
+import { getFormBrowserRequestOptions } from '#utils/request-profile';
+import type { BrowserModuleDefinition } from '#contracts/modules';
 import { ADDRESS_SELECTORS } from '#modules/address/constants';
 import { initFormieCombobox } from '#modules/fields/combobox';
 import { dispatchFieldEvent, getModuleFieldContainers } from '#modules/fields/shared';
+import { getThemeClasses, toggleThemeClasses } from '#theme/theme-classes';
 import { createDebug } from '#utils/debug';
 
 const STATE_DYNAMIC_SELECTOR = '[data-formie-address-state-dynamic]';
@@ -55,6 +58,9 @@ type ComboboxSelect = HTMLSelectElement & {
 
 type FieldState = {
     addressRoot: HTMLElement;
+    isCpEdit: boolean;
+    initialCountry: string;
+    initialValue: string;
     stateField: HTMLElement;
     stateControl: AddressStateControl;
     countryControl: HTMLInputElement | HTMLSelectElement | null;
@@ -102,7 +108,8 @@ function getStateControl(field: HTMLElement): AddressStateControl | null {
 }
 
 function getFieldLabel(field: HTMLElement): HTMLElement | null {
-    return field.querySelector('[data-formie-field-label]');
+    return field.querySelector('[data-formie-field-label]')
+        || (field.querySelector('[data-formie-address-state-cp]') ? field.querySelector(':scope > .heading > label') : null);
 }
 
 function dispatchControlEvents(control: AddressStateControl): void {
@@ -127,13 +134,15 @@ function syncComboboxValue(control: AddressStateControl, value: string): void {
 }
 
 function setControlValue(control: AddressStateControl, value: string): void {
-    if (control.value !== value) {
-        control.value = value;
+    const previousValue = control.value;
+    control.value = value;
+    syncComboboxValue(control, control.value);
+
+    // A select rejects values outside its options. Dispatch only actual changes
+    // so an unmatched autofill value cannot recursively trigger reconciliation.
+    if (control.value !== previousValue) {
         dispatchControlEvents(control);
-        return;
     }
-
-    syncComboboxValue(control, value);
 }
 
 function syncAutofillAnchor(fieldState: FieldState, value: string): void {
@@ -178,6 +187,7 @@ function ensureAutofillAnchor(fieldState: FieldState): HTMLInputElement {
         anchor.setAttribute('tabindex', '-1');
         anchor.setAttribute('aria-hidden', 'true');
         anchor.className = 'formie-sr-only';
+        anchor.hidden = fieldState.isCpEdit;
         fieldState.addressRoot.appendChild(anchor);
         fieldState.autofillAnchor = anchor;
     }
@@ -201,18 +211,17 @@ function reconcileAutofillValue(fieldState: FieldState): void {
     }
 
     const subdivisions = fieldState.lastSubdivisions;
-    const resolved = subdivisions.length > 0
-        ? (resolveOptionMatch(pending, subdivisions) || pending)
+    const resolved = fieldState.stateControl instanceof HTMLSelectElement
+        ? (resolveOptionMatch(pending, subdivisions) || '')
         : pending;
 
-    setControlValue(fieldState.stateControl, resolved);
-    syncComboboxValue(fieldState.stateControl, resolved);
     syncAutofillAnchor(fieldState, resolved);
     fieldState.pendingStateValue = resolved;
+    setControlValue(fieldState.stateControl, resolved);
 }
 
 function buildSubdivisionsUrl(action: string, country: string, optionLabel: string, optionValue: string): string {
-    const url = new URL(action.startsWith('/') ? action : `/actions/${action}`, window.location.origin);
+    const url = new URL(/^https?:\/\//.test(action) || action.startsWith('/') ? action : `/actions/${action}`, window.location.origin);
     url.searchParams.set('country', country);
     url.searchParams.set('optionLabel', optionLabel);
     url.searchParams.set('optionValue', optionValue);
@@ -238,6 +247,7 @@ async function fetchSubdivisions(
     optionLabel: string,
     optionValue: string,
     action: string,
+    requestOptions: BrowserRequestOptions,
 ): Promise<SubdivisionsResponse | null> {
     const cacheKey = getSubdivisionsCacheKey(country, optionLabel, optionValue, action);
 
@@ -248,11 +258,11 @@ async function fetchSubdivisions(
     if (!subdivisionInflight.has(cacheKey)) {
         subdivisionInflight.set(cacheKey, (async() => {
             try {
-                const response = await fetch(buildSubdivisionsUrl(action, country, optionLabel, optionValue), {
+                const response = await browserRequest(buildSubdivisionsUrl(action, country, optionLabel, optionValue), {
                     headers: {
                         Accept: 'application/json',
                     },
-                });
+                }, requestOptions);
 
                 if (!response.ok) {
                     subdivisionDataCache.set(cacheKey, null);
@@ -316,6 +326,7 @@ function copyControlAttributes(source: AddressStateControl, target: AddressState
         'data-formie-input-type',
         'data-formie-input-error-state',
         'data-formie-address-state-dynamic',
+        'data-formie-address-state-cp',
         'data-formie-address-state-hide-when-unused',
         'data-formie-address-state-use-searchable',
         'data-formie-address-state-use-datalist',
@@ -336,15 +347,17 @@ function copyControlAttributes(source: AddressStateControl, target: AddressState
 }
 
 function applyTextThemeClasses(template: AddressStateControl, input: HTMLInputElement): void {
-    input.className = template.className;
+    input.className = template.hasAttribute('data-formie-address-state-cp') ? 'text fullwidth' : template.className;
 }
 
 function applySelectThemeClasses(template: AddressStateControl, select: HTMLSelectElement): void {
     const classes: string[] = [...SELECT_THEME_CLASSES];
 
-    if (template.classList.contains('formie-input-error')) {
-        classes.push('formie-input-error');
-    }
+    getThemeClasses(template, 'fieldControlError').forEach((className) => {
+        if (template.classList.contains(className)) {
+            classes.push(className);
+        }
+    });
 
     select.className = classes.join(' ');
 }
@@ -454,12 +467,17 @@ function syncDatalist(
 function setFieldVisibility(fieldState: FieldState, visible: boolean): void {
     const { stateField, stateControl, required } = fieldState;
 
-    stateField.classList.toggle('formie-conditionally-hidden', !visible);
-    stateField.toggleAttribute('data-formie-conditionally-hidden', !visible);
+    toggleThemeClasses(stateField, stateField, 'conditionalHidden', !visible);
+    // Use module-owned visibility: the generic hidden attribute unmounts modules,
+    // which would remove the country listener needed to show this field again.
+    stateField.toggleAttribute('data-formie-address-state-hidden', !visible);
+
 
     if (!visible) {
         stateControl.required = false;
-        stateControl.disabled = true;
+        // Keep the empty value in Craft's serialized form data so hiding the
+        // field during initialization does not count as an unsaved edit.
+        stateControl.disabled = !fieldState.isCpEdit;
         return;
     }
 
@@ -473,7 +491,7 @@ function ensureFetchingAnnouncement(fieldState: FieldState): HTMLElement {
     }
 
     const announcement = document.createElement('div');
-    announcement.className = 'formie-sr-only';
+    announcement.className = fieldState.isCpEdit ? 'visually-hidden' : 'formie-sr-only';
     announcement.setAttribute('data-formie-address-state-fetching-announce', 'true');
     announcement.setAttribute('aria-live', 'polite');
     announcement.setAttribute('aria-atomic', 'true');
@@ -502,8 +520,8 @@ function showFetchingUI(fieldState: FieldState): void {
     fieldState.stateControl.setAttribute('aria-hidden', 'true');
     fieldState.stateControl.setAttribute('tabindex', '-1');
 
-    fieldState.stateField.classList.remove('formie-conditionally-hidden');
-    fieldState.stateField.removeAttribute('data-formie-conditionally-hidden');
+    toggleThemeClasses(fieldState.stateField, fieldState.stateField, 'conditionalHidden', false);
+    fieldState.stateField.removeAttribute('data-formie-address-state-hidden');
     fieldState.stateField.setAttribute('data-formie-address-state-skeleton-active', 'true');
 
     const controlWrapper = fieldState.stateField.querySelector('[data-formie-field-control]');
@@ -540,7 +558,7 @@ function updateFieldLabel(stateField: HTMLElement, label: string): void {
         return;
     }
 
-    const required = labelEl.querySelector('[data-formie-field-required]');
+    const required = labelEl.querySelector('[data-formie-field-required], .required');
     labelEl.textContent = label;
 
     if (required) {
@@ -589,6 +607,10 @@ async function applyCountryState(
     const country = fieldState.countryControl?.value?.trim() || '';
     stashPendingStateValue(fieldState);
     const currentValue = getEffectiveStateValue(fieldState);
+    // Opening an existing submission must not discard a historical state value
+    // merely because current country metadata no longer includes it.
+    const preserveStoredValue = fieldState.isCpEdit && !!currentValue
+        && country === fieldState.initialCountry && currentValue === fieldState.initialValue;
     const fetchGeneration = ++fieldState.fetchGeneration;
 
     fieldState.comboboxCleanup?.();
@@ -602,7 +624,7 @@ async function applyCountryState(
 
         hideFetchingUI(fieldState);
 
-        if (hideWhenUnused) {
+        if (hideWhenUnused && !preserveStoredValue) {
             setFieldVisibility(fieldState, false);
             setControlValue(fieldState.stateControl, '');
             syncAutofillAnchor(fieldState, '');
@@ -617,7 +639,7 @@ async function applyCountryState(
             const textControl = createTextControl(fieldState.stateControl, currentValue);
             fieldState.stateControl = replaceControl(fieldState.stateControl, textControl);
         } else {
-            fieldState.stateControl.disabled = true;
+            fieldState.stateControl.disabled = !fieldState.isCpEdit && !preserveStoredValue;
             fieldState.stateControl.placeholder = placeholder || fieldState.stateControl.placeholder;
         }
 
@@ -632,20 +654,23 @@ async function applyCountryState(
         showFetchingUI(fieldState);
     }
 
-    const response = await fetchSubdivisions(country, optionLabel, optionValue, subdivisionsAction);
+    const response = await fetchSubdivisions(country, optionLabel, optionValue, subdivisionsAction, getFormBrowserRequestOptions(fieldState.addressRoot.closest('form')));
 
     if (fetchGeneration !== fieldState.fetchGeneration) {
         return;
     }
 
-    const subdivisions = response?.subdivisions || [];
+    const subdivisions = [...(response?.subdivisions || [])];
+    if (preserveStoredValue && subdivisions.length && !resolveOptionMatch(currentValue, subdivisions)) {
+        subdivisions.push({ label: currentValue, value: currentValue });
+    }
     const administrativeAreaUsed = response?.administrativeAreaUsed ?? true;
     const administrativeAreaLabel = response?.administrativeAreaLabel || 'State / Province';
     fieldState.lastSubdivisions = subdivisions;
 
     hideFetchingUI(fieldState);
 
-    if (hideWhenUnused && !administrativeAreaUsed) {
+    if (hideWhenUnused && !administrativeAreaUsed && !preserveStoredValue) {
         setFieldVisibility(fieldState, false);
         setControlValue(fieldState.stateControl, '');
         syncAutofillAnchor(fieldState, '');
@@ -749,6 +774,9 @@ function initAddressStateField(field: HTMLElement, options: AddressStateOptions)
 
     const fieldState: FieldState = {
         addressRoot,
+        isCpEdit: stateControl.hasAttribute('data-formie-address-state-cp'),
+        initialCountry: getCountryControl(addressRoot)?.value?.trim() || '',
+        initialValue: stateControl.value?.trim() || '',
         stateField: field,
         stateControl,
         countryControl: getCountryControl(addressRoot),
@@ -766,6 +794,10 @@ function initAddressStateField(field: HTMLElement, options: AddressStateOptions)
         lastSubdivisions: [],
     };
 
+    const initialStateValue = stateControl.value;
+    const form = field.closest('form');
+    let disposed = false;
+    let resetTimer: number | null = null;
     ensureAutofillAnchor(fieldState);
 
     const refresh = (force = false) => {
@@ -824,6 +856,7 @@ function initAddressStateField(field: HTMLElement, options: AddressStateOptions)
 
         if (isStateControl && !isAnchor) {
             syncAutofillAnchor(fieldState, target.value);
+            fieldState.pendingStateValue = target.value;
         }
 
         stashPendingStateValue(fieldState);
@@ -885,12 +918,31 @@ function initAddressStateField(field: HTMLElement, options: AddressStateOptions)
         syncAutofillAnchor(fieldState, stateValue);
 
         void applyCountryState(fieldState, options).then(() => {
-            setControlValue(fieldState.stateControl, stateValue);
-            syncComboboxValue(fieldState.stateControl, stateValue);
+            // Keep the normalized option value, which may differ from a provider's
+            // abbreviation (for example "CA" when options store "California").
+            reconcileAutofillValue(fieldState);
             fieldState.lastCountry = fieldState.countryControl?.value?.trim() || '';
         });
     };
 
+    const onReset = (event: Event) => {
+        if (resetTimer !== null) window.clearTimeout(resetTimer);
+        // Enhanced selects finish their own reset in microtasks. Rebuild the
+        // dependent options after those controls have restored the country.
+        resetTimer = window.setTimeout(() => {
+            resetTimer = null;
+            if (event.defaultPrevented || disposed) return;
+            clearScheduledAutofillTimers(fieldState);
+            // The current select may contain another country's options. Keep the
+            // original value pending until the reset country's options are ready.
+            fieldState.stateControl.value = '';
+            fieldState.pendingStateValue = initialStateValue;
+            syncAutofillAnchor(fieldState, initialStateValue);
+            refresh(true);
+        }, 0);
+    };
+    form?.addEventListener('reset', onReset);
+
     fieldState.countryControl?.addEventListener('change', onCountryChange);
     fieldState.countryControl?.addEventListener('input', onCountryChange);
     addressRoot.addEventListener('input', onAddressInput);
@@ -901,10 +953,15 @@ function initAddressStateField(field: HTMLElement, options: AddressStateOptions)
     addressRoot.addEventListener('formie:address:loqate:populate', onProviderPopulate);
     addressRoot.addEventListener('formie:address:place-kit:populate', onProviderPopulate);
 
-    refresh();
+    // Apply the empty-country visibility state on first mount as well.
+    refresh(true);
     scheduleAutofillSweep(fieldState, options);
 
     return () => {
+        disposed = true;
+        if (resetTimer !== null) window.clearTimeout(resetTimer);
+        fieldState.fetchGeneration++;
+        form?.removeEventListener('reset', onReset);
         clearScheduledAutofillTimers(fieldState);
         hideFetchingUI(fieldState);
         fieldState.skeletonEl?.remove();
@@ -923,8 +980,10 @@ function initAddressStateField(field: HTMLElement, options: AddressStateOptions)
     };
 }
 
-export const addressStateModule: FormieModuleDefinition = {
-    id: MODULE_ID,
+export const addressStateModule: BrowserModuleDefinition = {
+    moduleId: `formie:${MODULE_ID}`,
+    version: 2,
+    surfaces: ['server-rendered', 'client-rendered', 'cp-edit'],
     kind: 'field',
     match: (ctx) => {
         return !!ctx.target.querySelector(STATE_DYNAMIC_SELECTOR);

package/src/js/modules/fields/calculations.ts

@@ -9,7 +9,7 @@ import {
     type CalculationVariableEntry,
 } from '@verbb/formie-core';
 
-import type { FormieModuleDefinition } from '#contracts/modules';
+import type { BrowserModuleDefinition } from '#contracts/modules';
 import { dispatchFieldEvent, getModuleFieldContainers } from '#modules/fields/shared';
 import { buildFieldValueRegistry, fieldKeyToInputName, normalizeFieldKey, resolveFieldReferenceLive } from '#utils/field-references';
 import { getRowScopedWatchNames, resolveRowScopedFieldReference, type RowScopeParams } from '#utils/field-references.row-scope';
@@ -263,8 +263,10 @@ function bindCalculationsField(root: Element, field: HTMLElement, input: HTMLInp
     };
 }
 
-export const calculationsModule: FormieModuleDefinition = {
-    id: MODULE_ID,
+export const calculationsModule: BrowserModuleDefinition = {
+    moduleId: `formie:${MODULE_ID}`,
+    version: 2,
+    surfaces: ['server-rendered', 'client-rendered', 'cp-edit'],
     kind: 'field',
     match: (ctx) => {
         return !!ctx.target.querySelector(INPUT_SELECTOR);

package/src/js/modules/fields/checkbox-radio.ts

@@ -1,5 +1,5 @@
-import type { FormieModuleDefinition } from '#contracts/modules';
-import { dispatchFieldEvent, escapeSelectorValue, releaseFormValidators, retainFormValidators } from '#modules/fields/shared';
+import type { BrowserModuleDefinition } from '#contracts/modules';
+import { dispatchFieldEvent, releaseFormValidators, retainFormValidators } from '#modules/fields/shared';
 import { createDebug } from '#utils/debug';
 
 const FIELD_SELECTOR = '[data-formie-checkboxes-field-layout], [data-formie-radio-field-layout]';
@@ -213,19 +213,7 @@ function unregisterValidators(form: HTMLFormElement | null): void {
     releaseFormValidators(form, VALIDATOR_SCOPE, [CHECKBOX_MINMAX_VALIDATOR, OTHER_OPTION_TEXT_VALIDATOR]);
 }
 
-function syncCheckedAttribute(input: HTMLInputElement): void {
-    if (input.checked) {
-        input.setAttribute('checked', '');
-    } else {
-        input.removeAttribute('checked');
-    }
-}
-
-function syncRequiredCheckboxes(field: HTMLElement): void {
-    const requiredCheckboxes = Array.from(field.querySelectorAll('input[type="checkbox"][required][data-formie-checkbox-input]')).filter((input): input is HTMLInputElement => {
-        return input instanceof HTMLInputElement;
-    });
-
+function syncRequiredCheckboxes(requiredCheckboxes: HTMLInputElement[]): void {
     if (!requiredCheckboxes.length) {
         return;
     }
@@ -299,27 +287,11 @@ function toggleCheckboxGroup(field: HTMLElement, toggle: HTMLInputElement): void
         // Re-emit change/input so downstream modules (conditions, calculations,
         // validation) react exactly as if the user toggled each box manually.
         input.checked = toggle.checked;
-        syncCheckedAttribute(input);
         input.dispatchEvent(new Event('change', { bubbles: true }));
         input.dispatchEvent(new Event('input', { bubbles: true }));
     });
 }
 
-function syncRadioGroup(input: HTMLInputElement, field: HTMLElement): void {
-    if (!input.checked || !input.name) {
-        syncCheckedAttribute(input);
-        return;
-    }
-
-    const group = Array.from(field.querySelectorAll(`input[type="radio"][name="${escapeSelectorValue(input.name)}"]`)).filter((radio): radio is HTMLInputElement => {
-        return radio instanceof HTMLInputElement;
-    });
-
-    group.forEach((radio) => {
-        syncCheckedAttribute(radio);
-    });
-}
-
 function bindField(field: HTMLElement): () => void {
     const inputs = Array.from(field.querySelectorAll('input[type="checkbox"], input[type="radio"]')).filter((input): input is HTMLInputElement => {
         return input instanceof HTMLInputElement;
@@ -330,20 +302,28 @@ function bindField(field: HTMLElement): () => void {
         return () => {};
     }
 
+    const requiredCheckboxes = inputs.filter((input) => input.type === 'checkbox' && input.required);
+    const form = field.closest('form');
+    const onReset = (event: Event) => {
+        // Native reset restores checked properties after the reset event returns.
+        queueMicrotask(() => {
+            if (!event.defaultPrevented) {
+                syncRequiredCheckboxes(requiredCheckboxes);
+                enforceMaxOptions(field);
+                syncOtherOptionField(field);
+            }
+        });
+    };
+    form?.addEventListener('reset', onReset);
+
     const listeners = inputs.map((input) => {
         const eventName = input.type === 'radio' ? 'change' : 'click';
         const handler = () => {
-            syncCheckedAttribute(input);
-
             if (input.type === 'checkbox' && isToggleCheckbox(input)) {
                 toggleCheckboxGroup(field, input);
             }
 
-            if (input.type === 'radio') {
-                syncRadioGroup(input, field);
-            }
-
-            syncRequiredCheckboxes(field);
+            syncRequiredCheckboxes(requiredCheckboxes);
             enforceMaxOptions(field);
             queueMicrotask(() => {
                 syncOtherOptionField(field);
@@ -356,7 +336,6 @@ function bindField(field: HTMLElement): () => void {
         };
 
         input.addEventListener(eventName, handler);
-        syncCheckedAttribute(input);
 
         return () => {
             input.removeEventListener(eventName, handler);
@@ -365,7 +344,7 @@ function bindField(field: HTMLElement): () => void {
 
     const destroyOtherOptionBinding = bindOtherOptionField(field);
 
-    syncRequiredCheckboxes(field);
+    syncRequiredCheckboxes(requiredCheckboxes);
     enforceMaxOptions(field);
     syncOtherOptionField(field);
     dispatchFieldEvent(field, MODULE_ID, 'init', {
@@ -376,12 +355,15 @@ function bindField(field: HTMLElement): () => void {
         listeners.forEach((unbind) => {
             unbind();
         });
+        form?.removeEventListener('reset', onReset);
         destroyOtherOptionBinding();
     };
 }
 
-export const checkboxRadioModule: FormieModuleDefinition = {
-    id: MODULE_ID,
+export const checkboxRadioModule: BrowserModuleDefinition = {
+    moduleId: `formie:${MODULE_ID}`,
+    version: 2,
+    surfaces: ['server-rendered', 'client-rendered', 'cp-edit'],
     kind: 'field',
     match: (ctx) => {
         return ctx.target instanceof HTMLElement && (

package/src/js/modules/fields/combobox.ts

@@ -1,10 +1,12 @@
 import TomSelect from 'tom-select/dist/esm/tom-select.complete.js';
 
-import type { FormieModuleDefinition } from '#contracts/modules';
+import type { BrowserModuleDefinition } from '#contracts/modules';
 import comboboxThemeCss from '#theme-css/fields/_combobox.css?inline';
 import { dispatchFieldEvent, getModuleFieldContainers } from '#modules/fields/shared';
 import { ensureModuleStyles } from '#modules/styles';
+import { getThemeClasses } from '#theme/theme-classes';
 import { createDebug } from '#utils/debug';
+import { VALIDATION_SKIP_ATTR } from '#validation/skip';
 
 const SELECT_SELECTOR = 'select[data-formie-combobox-input]';
 const MODULE_ID = 'combobox';
@@ -15,7 +17,6 @@ ensureModuleStyles(MODULE_ID, [comboboxThemeCss]);
 const NATIVE_THEME_CLASSES = [
     'formie-select',
     'formie-dropdown-input',
-    'formie-input-error',
 ] as const;
 
 export type FormieComboboxOptions = {
@@ -35,7 +36,7 @@ type SelectElement = HTMLSelectElement & {
 function stripNativeThemeClasses(select: HTMLSelectElement): string[] {
     const removed: string[] = [];
 
-    NATIVE_THEME_CLASSES.forEach((className) => {
+    [...NATIVE_THEME_CLASSES, ...getThemeClasses(select, 'fieldControlError')].forEach((className) => {
         if (select.classList.contains(className)) {
             select.classList.remove(className);
             removed.push(className);
@@ -51,8 +52,8 @@ function restoreNativeThemeClasses(select: HTMLSelectElement, classNames: string
     });
 }
 
-function cleanLeakedThemeClasses(element: HTMLElement): void {
-    NATIVE_THEME_CLASSES.forEach((className) => {
+function cleanLeakedThemeClasses(element: HTMLElement, source: HTMLSelectElement): void {
+    [...NATIVE_THEME_CLASSES, ...getThemeClasses(source, 'fieldControlError')].forEach((className) => {
         element.classList.remove(className);
     });
 }
@@ -78,6 +79,8 @@ function removeEmptyOptionFromCombobox(instance: TomSelectInstance): void {
 export function initFormieCombobox(select: SelectElement, options: FormieComboboxOptions = {}): () => void {
     select._formieTomSelect?.destroy();
 
+    const initialValues = Array.from(select.selectedOptions, (option) => option.value).filter(Boolean);
+    const form = select.form;
     const multiple = options.multiple === true;
     const restoredClasses = stripNativeThemeClasses(select);
     const placeholder = resolvePlaceholder(select, options.placeholder);
@@ -114,11 +117,13 @@ export function initFormieCombobox(select: SelectElement, options: FormieCombobo
     });
 
     const instance = new TomSelect(select, mergedOptions) as TomSelectInstance;
+    // The search query is temporary; the native select carries the field value.
+    instance.control_input.setAttribute(VALIDATION_SKIP_ATTR, '');
     removeEmptyOptionFromCombobox(instance);
-    cleanLeakedThemeClasses(instance.wrapper);
+    cleanLeakedThemeClasses(instance.wrapper, select);
 
     if (instance.dropdown) {
-        cleanLeakedThemeClasses(instance.dropdown);
+        cleanLeakedThemeClasses(instance.dropdown, select);
     }
 
     // Tom Select keeps the native select as a preceding sibling; ensure it never
@@ -127,6 +132,17 @@ export function initFormieCombobox(select: SelectElement, options: FormieCombobo
 
     select._formieTomSelect = instance;
 
+    const onReset = (event: Event) => {
+        // Tom Select replaces native options, so retain the original selection
+        // and restore its display after the browser resets the backing select.
+        queueMicrotask(() => {
+            if (!event.defaultPrevented) {
+                instance.setValue(initialValues);
+            }
+        });
+    };
+    form?.addEventListener('reset', onReset);
+
     debug.log('Initialized.', {
         inputName: select.name,
         multiple,
@@ -138,6 +154,7 @@ export function initFormieCombobox(select: SelectElement, options: FormieCombobo
     });
 
     return () => {
+        form?.removeEventListener('reset', onReset);
         instance.destroy();
         select.style.removeProperty('display');
         restoreNativeThemeClasses(select, restoredClasses);
@@ -148,8 +165,10 @@ export function initFormieCombobox(select: SelectElement, options: FormieCombobo
     };
 }
 
-export const comboboxModule: FormieModuleDefinition = {
-    id: MODULE_ID,
+export const comboboxModule: BrowserModuleDefinition = {
+    moduleId: `formie:${MODULE_ID}`,
+    version: 2,
+    surfaces: ['server-rendered', 'client-rendered', 'cp-edit'],
     kind: 'field',
     match: (ctx) => {
         return !!ctx.target.querySelector(SELECT_SELECTOR);

package/src/js/modules/fields/conditions/config.ts

@@ -13,7 +13,7 @@ function parseConditionSource(value: unknown): ConditionSource | null {
     return {
         raw: typeof candidate.raw === 'string' ? candidate.raw : '',
         target: typeof candidate.target === 'string' ? candidate.target : '',
-        handle: typeof candidate.handle === 'string' ? candidate.handle : '',
+        handle: typeof candidate.domHandle === 'string' ? candidate.domHandle : typeof candidate.handle === 'string' ? candidate.handle : '',
         selector: typeof candidate.selector === 'string' ? candidate.selector : '',
         defaultValue: typeof candidate.defaultValue === 'string' ? candidate.defaultValue : '',
         transformerId: typeof candidate.transformerId === 'string' ? candidate.transformerId : '',
@@ -45,35 +45,32 @@ export function parseConditionSettings(node: Element): ParsedConditionSettings |
 
     try {
         const parsed = JSON.parse(raw) as Record<string, unknown>;
-        const conditions = Array.isArray(parsed.conditions)
-            ? parsed.conditions.filter((condition): condition is ConditionDefinition => {
-                if (!condition || typeof condition !== 'object') {
-                    return false;
-                }
-
-                const candidate = condition as Record<string, unknown>;
-                return typeof candidate.field === 'string' && typeof candidate.condition === 'string';
-            }).map((condition) => {
-                const candidate = condition as Record<string, unknown>;
-
+        const effect = String(parsed.effect ?? parsed.showRule ?? 'show');
+        const valid = (parsed.version == null || parsed.version === 1) && ['all', 'any'].includes(String(parsed.mode ?? parsed.conditionRule ?? 'all')) && ['show', 'hide', 'enable', 'disable'].includes(effect);
+        const rawRules = valid ? parsed.rules ?? parsed.conditions : [null];
+        const conditions = Array.isArray(rawRules)
+            ? rawRules.map((row) => {
+                const candidate = row && typeof row === 'object' ? row as Record<string, unknown> : {};
                 return {
-                    field: condition.field,
+                    field: typeof candidate.field === 'string' ? candidate.field : '',
                     source: parseConditionSource(candidate.source),
-                    condition: condition.condition,
-                    value: condition.value,
+                    condition: String(candidate.operator ?? candidate.condition ?? ''),
+                    valueType: candidate.valueType as ConditionDefinition['valueType'],
+                    browserSafe: candidate.browserSafe !== false,
+                    value: candidate.value,
                 };
             })
-            : [];
+            : [{ field: '', condition: '', value: null, browserSafe: false }];
 
         return {
-            showRule: parsed.showRule === 'hide' ? 'hide' : 'show',
-            conditionRule: parsed.conditionRule === 'any' ? 'any' : 'all',
+            showRule: ['hide', 'enable', 'disable'].includes(effect) ? effect as ParsedConditionSettings['showRule'] : 'show',
+            conditionRule: (parsed.mode ?? parsed.conditionRule) === 'any' ? 'any' : 'all',
             clearOnHide: parsed.clearOnHide !== false,
             isNested: Boolean(parsed.isNested),
             conditions,
         };
     } catch (error) {
-        console.error('[formie] Invalid condition JSON.', error);
-        return null;
+        console.error('[formie] Invalid condition JSON.');
+        return { showRule: 'show', conditionRule: 'all', clearOnHide: true, isNested: false, conditions: [{ field: '', condition: '', browserSafe: false }] };
     }
 }