@verbb/formie-browser 1.0.14 → 1.0.15

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

@@ -58,6 +58,9 @@ type ComboboxSelect = HTMLSelectElement & {
 
 type FieldState = {
     addressRoot: HTMLElement;
+    isCpEdit: boolean;
+    initialCountry: string;
+    initialValue: string;
     stateField: HTMLElement;
     stateControl: AddressStateControl;
     countryControl: HTMLInputElement | HTMLSelectElement | null;
@@ -105,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 {
@@ -130,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 {
@@ -181,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;
     }
@@ -204,14 +211,13 @@ 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 {
@@ -320,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',
@@ -340,7 +347,7 @@ 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 {
@@ -461,11 +468,16 @@ function setFieldVisibility(fieldState: FieldState, visible: boolean): void {
     const { stateField, stateControl, required } = fieldState;
 
     toggleThemeClasses(stateField, stateField, 'conditionalHidden', !visible);
-    stateField.toggleAttribute('data-formie-conditionally-hidden', !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;
     }
 
@@ -479,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');
@@ -509,7 +521,7 @@ function showFetchingUI(fieldState: FieldState): void {
     fieldState.stateControl.setAttribute('tabindex', '-1');
 
     toggleThemeClasses(fieldState.stateField, fieldState.stateField, 'conditionalHidden', false);
-    fieldState.stateField.removeAttribute('data-formie-conditionally-hidden');
+    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]');
@@ -546,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) {
@@ -595,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?.();
@@ -608,7 +624,7 @@ async function applyCountryState(
 
         hideFetchingUI(fieldState);
 
-        if (hideWhenUnused) {
+        if (hideWhenUnused && !preserveStoredValue) {
             setFieldVisibility(fieldState, false);
             setControlValue(fieldState.stateControl, '');
             syncAutofillAnchor(fieldState, '');
@@ -623,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;
         }
 
@@ -644,14 +660,17 @@ async function applyCountryState(
         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, '');
@@ -755,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),
@@ -772,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) => {
@@ -830,6 +856,7 @@ function initAddressStateField(field: HTMLElement, options: AddressStateOptions)
 
         if (isStateControl && !isAnchor) {
             syncAutofillAnchor(fieldState, target.value);
+            fieldState.pendingStateValue = target.value;
         }
 
         stashPendingStateValue(fieldState);
@@ -891,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);
@@ -907,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();

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

@@ -6,6 +6,7 @@ import { dispatchFieldEvent, getModuleFieldContainers } from '#modules/fields/sh
 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';
@@ -116,6 +117,8 @@ 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, select);
 

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

@@ -47,9 +47,10 @@ function clearConditionNodeValues(node: Element): void {
 }
 
 function setVisibilityState(node: Element, hidden: boolean): boolean {
-    const isPage = node.hasAttribute('data-formie-page');
-    const hiddenAttr = isPage ? PAGE_HIDDEN_ATTR : CONDITIONAL_HIDDEN_ATTR;
-    const hiddenClasses = getThemeClasses(node, isPage ? 'pageHidden' : 'conditionalHidden');
+    // Navigation owns page-hidden. A matching condition must not reveal an
+    // inactive page, or clear its values just because the visitor moved on.
+    const hiddenAttr = CONDITIONAL_HIDDEN_ATTR;
+    const hiddenClasses = getThemeClasses(node, 'conditionalHidden');
     const wasHidden = node.hasAttribute(hiddenAttr);
 
     if (hidden) {
@@ -190,9 +191,7 @@ function clearCpMutedState(node: Element): void {
 
 function clearHideState(node: Element): void {
     node.removeAttribute(CONDITIONAL_HIDDEN_ATTR);
-    node.removeAttribute(PAGE_HIDDEN_ATTR);
     node.classList.remove(...getThemeClasses(node, 'conditionalHidden'));
-    node.classList.remove(...getThemeClasses(node, 'pageHidden'));
 }
 
 function syncAncestorRows(node: Element): void {

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

@@ -10,6 +10,7 @@ import {
 import type { ConditionEntry, ConditionInput } from '#modules/fields/conditions/types';
 import { getConditionInputEventNames } from '#modules/fields/conditions/values';
 import { createDebug } from '#utils/debug';
+import { getFormStateEventName } from '#utils/event-names';
 
 const debug = createDebug('conditions');
 
@@ -212,8 +213,13 @@ export const conditionsModule: BrowserModuleDefinition = {
                 };
 
                 ctx.form.addEventListener('reset', resetHandler);
+                // Canonical resets have already restored values. Settle conditions
+                // before the unload guard captures the form's new clean state.
+                const stateResetEvent = getFormStateEventName('reset');
+                ctx.form.addEventListener(stateResetEvent, evaluateAll);
                 sourceUnbinds.push(() => {
                     ctx.form?.removeEventListener('reset', resetHandler);
+                    ctx.form?.removeEventListener(stateResetEvent, evaluateAll);
                 });
 
                 // CP status menu (etc.) updates `data-formie-submission` and fires this event.

package/src/js/modules/fields/date-picker.ts

@@ -90,8 +90,9 @@ function normalizeOffsetDate(input: string | null | undefined, type: 'min' | 'ma
         return null;
     }
 
-    if (!Number.isNaN(Date.parse(input))) {
-        return new Date(input);
+    const absoluteDate = parseSubmissionDate(input);
+    if (absoluteDate) {
+        return absoluteDate;
     }
 
     // Form config may express relative min/max bounds like "+2 weeks", which are
@@ -209,7 +210,9 @@ function formatSubmissionDate(date: Date, options: DatePickerOptions): string {
 }
 
 function parseSubmissionDate(value: string): Date | null {
-    const parsed = new Date(value);
+    // Date-only field values represent a local calendar day. JavaScript otherwise
+    // parses YYYY-MM-DD as UTC and shifts the picker to yesterday west of UTC.
+    const parsed = new Date(/^\d{4}-\d{2}-\d{2}$/.test(value) ? `${value}T00:00:00` : value);
 
     if (Number.isNaN(parsed.getTime())) {
         return null;

package/src/js/modules/fields/file-upload.ts

@@ -30,6 +30,9 @@ type UploadedAsset = {
     assetId: number | null;
     filename: string;
     url?: string | null;
+    uploadUid?: string | null;
+    attachToken?: string | null;
+    viewToken?: string | null;
 };
 
 type FileUploadHydrateResponse = {
@@ -151,6 +154,9 @@ function normalizeUploadedAsset(candidate: unknown): UploadedAsset | null {
         assetId,
         filename,
         url,
+        uploadUid: toTrimmedString(candidate.uploadUid) || null,
+        attachToken: toTrimmedString(candidate.attachToken) || null,
+        viewToken: toTrimmedString(candidate.viewToken ?? candidate.uploadToken) || null,
     };
 }
 
@@ -190,6 +196,9 @@ function readUploadedAssetsFromHiddenInputs(field: HTMLElement, input: HTMLInput
         return {
             assetId: toPositiveInt(hiddenInput.getAttribute(HIDDEN_INPUT_VALUE_ATTR)) ?? toPositiveInt(hiddenInput.value),
             filename: '',
+            viewToken: hiddenInput.getAttribute('data-formie-file-upload-token'),
+            uploadUid: hiddenInput.name.endsWith('[uploadUid]') ? hiddenInput.value : null,
+            attachToken: getHiddenInputs(field).find((entry) => entry.name === hiddenInput.name.replace(/\[uploadUid\]$/, '[attachToken]'))?.value,
         };
     }).filter((asset) => {
         return asset.assetId !== null;
@@ -203,6 +212,7 @@ function mergeUploadedAssets(assetIds: UploadedAsset[], summaryItems: UploadedAs
 
     return assetIds.map((asset, index) => {
         return {
+            ...asset,
             assetId: asset.assetId,
             filename: summaryItems[index]?.filename || '',
         };
@@ -248,8 +258,8 @@ function registerValidators(form: HTMLFormElement | null): void {
         });
 
         validator.addValidator('fileSizeMinLimit', ({ input }) => {
-            const sizeLimit = parseFloat(input.getAttribute('data-formie-size-min-limit') || '');
-            const sizeBytes = sizeLimit * 1000 * 1000;
+            const maxFileSize = parseFloat(input.getAttribute('data-formie-size-min-limit') || '');
+            const sizeBytes = maxFileSize * 1000 * 1000;
 
             if (input.type !== 'file' || !sizeBytes || !('files' in input) || !input.files?.length) {
                 return true;
@@ -266,8 +276,8 @@ function registerValidators(form: HTMLFormElement | null): void {
         });
 
         validator.addValidator('fileSizeMaxLimit', ({ input }) => {
-            const sizeLimit = parseFloat(input.getAttribute('data-formie-size-max-limit') || '');
-            const sizeBytes = sizeLimit * 1000 * 1000;
+            const maxFileSize = parseFloat(input.getAttribute('data-formie-size-max-limit') || '');
+            const sizeBytes = maxFileSize * 1000 * 1000;
 
             if (input.type !== 'file' || !sizeBytes || !('files' in input) || !input.files?.length) {
                 return true;
@@ -366,12 +376,26 @@ function updateUploadedAssetInputs(field: HTMLElement, input: HTMLInputElement,
 
         const hiddenInput = document.createElement('input');
         hiddenInput.type = 'hidden';
-        hiddenInput.name = `${baseName}[${index}][assetId]`;
-        hiddenInput.value = String(asset.assetId);
+        const hasCapability = asset.uploadUid && asset.attachToken;
+        hiddenInput.name = `${baseName}[${index}][${hasCapability ? 'uploadUid' : 'assetId'}]`;
+        hiddenInput.value = hasCapability ? asset.uploadUid! : String(asset.assetId);
         hiddenInput.setAttribute(HIDDEN_INPUT_ENTRY_ATTR, 'true');
         hiddenInput.setAttribute(HIDDEN_INPUT_VALUE_ATTR, String(asset.assetId));
+        if (asset.viewToken) {
+            hiddenInput.setAttribute('data-formie-file-upload-token', asset.viewToken);
+        }
         insertionPoint.insertAdjacentElement('afterend', hiddenInput);
         insertionPoint = hiddenInput;
+
+        if (hasCapability) {
+            const tokenInput = document.createElement('input');
+            tokenInput.type = 'hidden';
+            tokenInput.name = `${baseName}[${index}][attachToken]`;
+            tokenInput.value = asset.attachToken!;
+            tokenInput.setAttribute(HIDDEN_INPUT_ENTRY_ATTR, 'true');
+            insertionPoint.insertAdjacentElement('afterend', tokenInput);
+            insertionPoint = tokenInput;
+        }
     });
 
     input.value = '';
@@ -391,7 +415,7 @@ function getFormHandle(form: HTMLFormElement | null): string {
     return form.getAttribute('data-formie-handle')?.trim() || '';
 }
 
-function buildHydrateFormData(field: HTMLElement, input: HTMLInputElement, assetIds: number[]): FormData {
+function buildHydrateFormData(field: HTMLElement, input: HTMLInputElement, assets: UploadedAsset[]): FormData {
     const form = input.form;
     const body = new FormData();
     const handle = getFormHandle(form);
@@ -411,8 +435,13 @@ function buildHydrateFormData(field: HTMLElement, input: HTMLInputElement, asset
         body.append('submissionUid', submissionUidInput.value.trim());
     }
 
-    assetIds.forEach((assetId) => {
-        body.append('assetIds[]', String(assetId));
+    assets.forEach((asset) => {
+        if (asset.assetId) {
+            body.append('assetIds[]', String(asset.assetId));
+            if (asset.viewToken) {
+                body.append(`uploadTokens[${asset.assetId}]`, asset.viewToken);
+            }
+        }
     });
 
     return body;
@@ -433,7 +462,7 @@ async function hydrateUploadedAssets(field: HTMLElement, input: HTMLInputElement
     const response = await requestJson<FileUploadHydrateResponse>(hydrateEndpoint, {
         profile: field.closest('form')?.dataset.formieRequestProfile as import('@verbb/formie-core').BrowserRequestOptions['profile'],
         method: 'POST',
-        body: buildHydrateFormData(field, input, assetIds),
+        body: buildHydrateFormData(field, input, uploadedAssets),
     });
     const hydratedAssets = normalizeUploadedAssets(response.assets);
 
@@ -452,6 +481,7 @@ async function hydrateUploadedAssets(field: HTMLElement, input: HTMLInputElement
 
         const hydratedAsset = hydratedMap.get(asset.assetId)!;
         return {
+            ...asset,
             assetId: asset.assetId,
             filename: hydratedAsset.filename || asset.filename,
             url: hydratedAsset.url ?? asset.url,
@@ -480,24 +510,24 @@ function getUploadedAssetsFromEvent(event: Event, matcher: FileUploadEventMatche
 
     if (detailInputKey !== '' && detailInputKey === matcher.inputKey) {
         matchedByInputKey = true;
-        candidates.push(detail.assets, detail.assetIds, detail.data);
+        candidates.push(detail.uploadedAssets, detail.assets, detail.assetIds, detail.data);
     }
 
     if (detailInputName !== '' && detailInputName === matcher.inputName) {
         matchedByInputName = true;
-        candidates.push(detail.assets, detail.assetIds, detail.data);
+        candidates.push(detail.uploadedAssets, detail.assets, detail.assetIds, detail.data);
     }
 
     if (detailFieldHandle === matcher.fieldHandle) {
         matchedByFieldHandle = true;
-        candidates.push(detail.assets, detail.assetIds, detail.data);
+        candidates.push(detail.uploadedAssets, detail.assets, detail.assetIds, detail.data);
     }
 
     if (nestedData) {
         const nestedAssetCandidates = [
+            nestedData.uploadedAssets,
             nestedData.assets,
             nestedData.assetIds,
-            nestedData.uploadedAssets,
             nestedData.data,
         ];
 

package/src/js/modules/fields/phone-country.ts

@@ -18,7 +18,7 @@ ensureModuleStyles(MODULE_ID, [intlTelInputCss]);
 
 type PhoneCountryOptions = {
     countryDefaultValue?: string;
-    countryAllowed?: string[];
+    allowedCountryCodes?: string[];
     countryPreselectFromIp?: boolean;
     countryFromIpAction?: string;
     language?: string;
@@ -93,7 +93,7 @@ function buildOptions(options: PhoneCountryOptions, form: HTMLFormElement | null
         loadUtils: () => import('intl-tel-input/utils'),
     };
 
-    const allowedCountries = (options.countryAllowed || [])
+    const allowedCountries = (options.allowedCountryCodes || [])
         .map((item) => {
             return item.toLowerCase();
         })

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

@@ -32,6 +32,18 @@ function getRowCount(field: HTMLElement): number {
     return field.querySelectorAll(ROW_SELECTOR).length;
 }
 
+function focusRow(row: Element | null): boolean {
+    const control = Array.from(row?.querySelectorAll<HTMLElement>(
+        'input:not([type="hidden"]), select, textarea, button, a[href], [role="button"], [role="combobox"], [role="textbox"], [contenteditable="true"]',
+    ) || []).find((element) => {
+        return element.tabIndex >= 0 && !element.matches(':disabled')
+            && !element.closest('[hidden], [inert]') && element.getClientRects().length > 0;
+    });
+
+    control?.focus();
+    return !!control;
+}
+
 function syncAddButton(addButton: HTMLButtonElement | null, rowCount: number): void {
     if (!addButton) {
         return;
@@ -46,7 +58,7 @@ function syncAddButton(addButton: HTMLButtonElement | null, rowCount: number): v
     addButton.disabled = false;
 }
 
-function bindRepeaterField(field: HTMLElement): () => void {
+function bindRepeaterField(field: HTMLElement, isCpEdit: boolean): () => void {
     const container = field.matches(CONTAINER_SELECTOR)
         ? field
         : field.querySelector(CONTAINER_SELECTOR);
@@ -57,6 +69,9 @@ function bindRepeaterField(field: HTMLElement): () => void {
         return () => {};
     }
 
+    const form = field.closest('form');
+    let disposed = false;
+    let generation = 0;
     const removeHandlers = new Map<HTMLElement, EventListener>();
     // Start after the highest existing row id so SSR rows and client-added rows
     // keep producing unique `__ROW__` replacements across one repeater instance.
@@ -84,8 +99,17 @@ function bindRepeaterField(field: HTMLElement): () => void {
                     return;
                 }
 
+                const restoreFocus = row.contains(document.activeElement)
+                    && (!isCpEdit || (event instanceof MouseEvent && event.detail === 0));
+                const nextRow = row.nextElementSibling;
+                const previousRow = row.previousElementSibling;
                 row.remove();
                 syncAddButton(addButton instanceof HTMLButtonElement ? addButton : null, getRowCount(field));
+                // Removing the focused control otherwise sends keyboard users back
+                // to the document body. Keep them in the nearest surviving row.
+                if (restoreFocus && !focusRow(nextRow) && !focusRow(previousRow)) {
+                    if (addButton instanceof HTMLButtonElement) addButton.focus();
+                }
                 debug.log('Row removed.', {
                     rowCount: getRowCount(field),
                 });
@@ -100,7 +124,7 @@ function bindRepeaterField(field: HTMLElement): () => void {
         });
     };
 
-    const addRow = async() => {
+    const addRow = async(focusNewRow = false) => {
         if (!(addButton instanceof HTMLButtonElement)) {
             return;
         }
@@ -130,11 +154,16 @@ function bindRepeaterField(field: HTMLElement): () => void {
             return;
         }
 
+        const addedGeneration = generation;
         container.appendChild(row);
         // Give downstream field modules a tick to see the new row before we emit
         // the public append/init-row lifecycle events used for nested enhancements.
         await sleep(50);
+        if (disposed || addedGeneration !== generation || !row.isConnected) return;
         bindRemoveButtons();
+        // Rows are inserted before Add, so leaving focus there skips the new
+        // inputs on Tab. Do not steal focus if the user moved on while mounting.
+        if (focusNewRow && document.activeElement === addButton) focusRow(row);
         syncAddButton(addButton, getRowCount(field));
         debug.log('Row appended.', {
             rowCount: getRowCount(field),
@@ -151,7 +180,10 @@ function bindRepeaterField(field: HTMLElement): () => void {
 
     const addHandler = (event: Event) => {
         event.preventDefault();
-        void addRow();
+        // Pointer additions in the CP should not focus Craft's field wrappers
+        // and show a focus ring around the newly inserted field.
+        const focusNewRow = !isCpEdit || (event instanceof MouseEvent && event.detail === 0);
+        void addRow(focusNewRow);
     };
 
     if (addButton instanceof HTMLButtonElement) {
@@ -170,6 +202,23 @@ function bindRepeaterField(field: HTMLElement): () => void {
         }
     }
 
+    const initialRows = Array.from(container.children).map((row) => row.cloneNode(true));
+
+    const onReset = (event: Event) => {
+        queueMicrotask(() => {
+            if (event.defaultPrevented || disposed) return;
+            generation++;
+            removeHandlers.forEach((handler, button) => button.removeEventListener('click', handler));
+            removeHandlers.clear();
+            // Replace rows so removed initial rows return and added rows disappear.
+            // The module loader disposes old controls and hydrates the new rows.
+            container.replaceChildren(...initialRows.map((row) => row.cloneNode(true)));
+            bindRemoveButtons();
+            syncAddButton(addButton instanceof HTMLButtonElement ? addButton : null, getRowCount(field));
+        });
+    };
+    form?.addEventListener('reset', onReset);
+
     dispatchFieldEvent(field, MODULE_ID, 'init', {
         repeater: field,
     });
@@ -178,6 +227,8 @@ function bindRepeaterField(field: HTMLElement): () => void {
     });
 
     return () => {
+        disposed = true;
+        form?.removeEventListener('reset', onReset);
         if (addButton instanceof HTMLButtonElement) {
             addButton.removeEventListener('click', addHandler);
         }
@@ -211,7 +262,7 @@ export const repeaterModule: BrowserModuleDefinition = {
             });
 
         const destroyBindings = fields.map((field) => {
-            return bindRepeaterField(field);
+            return bindRepeaterField(field, ctx.surface === 'cp-edit');
         });
         debug.log('Module setup.', { fieldCount: fields.length });