feat: Add support for automatic reset after React 19 form actions (#8444)

Author: devongovett

packages/@react-aria/button/src/useToggleButtonGroup.ts

@@ -68,6 +68,7 @@ export function useToggleButtonGroupItem(props: AriaToggleButtonGroupItemOptions
 export function useToggleButtonGroupItem(props: AriaToggleButtonGroupItemOptions<ElementType>, state: ToggleGroupState, ref: RefObject<any>): ToggleButtonAria<HTMLAttributes<any>> {
   let toggleState: ToggleState = {
     isSelected: state.selectedKeys.has(props.id),
+    defaultSelected: false,
     setSelected(isSelected) {
       state.setSelected(props.id, isSelected);
     },

packages/@react-aria/checkbox/src/useCheckboxGroupItem.ts

@@ -30,6 +30,7 @@ export function useCheckboxGroupItem(props: AriaCheckboxGroupItemProps, state: C
   const toggleState = useToggleState({
     isReadOnly: props.isReadOnly || state.isReadOnly,
     isSelected: state.isSelected(props.value),
+    defaultSelected: state.defaultValue.includes(props.value),
     onChange(isSelected) {
       if (isSelected) {
         state.addValue(props.value);

packages/@react-aria/color/src/useColorArea.ts

@@ -69,12 +69,7 @@ export function useColorArea(props: AriaColorAreaOptions, state: ColorAreaState)
     }
   }, [inputXRef]);
 
-  useFormReset(inputXRef, [state.xValue, state.yValue], ([x, y]) => {
-    let newColor = state.value
-      .withChannelValue(state.channels.xChannel, x)
-      .withChannelValue(state.channels.yChannel, y);
-    state.setValue(newColor);
-  });
+  useFormReset(inputXRef, state.defaultValue, state.setValue);
 
   let [valueChangedViaKeyboard, setValueChangedViaKeyboard] = useState(false);
   let [valueChangedViaInputChangeEvent, setValueChangedViaInputChangeEvent] = useState(false);

packages/@react-aria/color/src/useColorField.ts

@@ -20,7 +20,7 @@ import {
   useCallback,
   useState
 } from 'react';
-import {mergeProps, useId} from '@react-aria/utils';
+import {mergeProps, useFormReset, useId} from '@react-aria/utils';
 import {privateValidationStateProp} from '@react-stately/form';
 import {useFocusWithin, useScrollWheel} from '@react-aria/interactions';
 import {useFormattedTextField} from '@react-aria/textfield';
@@ -108,14 +108,18 @@ export function useColorField(
     ...props,
     id: inputId,
     value: inputValue,
-    defaultValue: undefined,
+    // Intentionally invalid value that will be ignored by onChange during form reset
+    // This is handled separately below.
+    defaultValue: '!',
     validate: undefined,
     [privateValidationStateProp]: state,
     type: 'text',
     autoComplete: 'off',
     onChange
   }, state, ref);
 
+  useFormReset(ref, state.defaultColorValue, state.setColorValue);
+
   inputProps = mergeProps(inputProps, spinButtonProps, focusWithinProps, {
     role: 'textbox',
     'aria-valuemax': null,

packages/@react-aria/color/src/useColorWheel.ts

@@ -58,7 +58,7 @@ export function useColorWheel(props: AriaColorWheelOptions, state: ColorWheelSta
     }
   }, [inputRef]);
 
-  useFormReset(inputRef, state.hue, state.setHue);
+  useFormReset(inputRef, state.defaultValue, state.setValue);
 
   let currentPosition = useRef<{x: number, y: number} | null>(null);
 

packages/@react-aria/combobox/src/useComboBox.ts

@@ -210,6 +210,7 @@ export function useComboBox<T>(props: AriaComboBoxOptions<T>, state: ComboBoxSta
     onKeyDown: !isReadOnly ? chain(state.isOpen && collectionProps.onKeyDown, onKeyDown, props.onKeyDown) : props.onKeyDown,
     onBlur,
     value: state.inputValue,
+    defaultValue: state.defaultInputValue,
     onFocus,
     autoComplete: 'off',
     validate: undefined,

packages/@react-aria/datepicker/src/useDateField.ts

@@ -138,7 +138,7 @@ export function useDateField<T extends DateValue>(props: AriaDateFieldOptions<T>
     autoFocusRef.current = false;
   }, [focusManager]);
 
-  useFormReset(props.inputRef, state.value, state.setValue);
+  useFormReset(props.inputRef, state.defaultValue, state.setValue);
   useFormValidation({
     ...props,
     focus() {

packages/@react-aria/datepicker/src/useDatePicker.ts

@@ -136,6 +136,7 @@ export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>
       [roleSymbol]: 'presentation',
       'aria-describedby': ariaDescribedBy,
       value: state.value,
+      defaultValue: state.defaultValue,
       onChange: state.setValue,
       placeholderValue: props.placeholderValue,
       hideTimeZone: props.hideTimeZone,

packages/@react-aria/datepicker/src/useDateRangePicker.ts

@@ -183,6 +183,7 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
       ...startFieldProps,
       ...commonFieldProps,
       value: state.value?.start ?? null,
+      defaultValue: state.defaultValue?.start,
       onChange: start => state.setDateTime('start', start),
       autoFocus: props.autoFocus,
       name: props.startName,
@@ -201,6 +202,7 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
       ...endFieldProps,
       ...commonFieldProps,
       value: state.value?.end ?? null,
+      defaultValue: state.defaultValue?.end,
       onChange: end => state.setDateTime('end', end),
       name: props.endName,
       [privateValidationStateProp]: {

packages/@react-aria/form/src/useFormValidation.ts

@@ -13,7 +13,7 @@
 import {FormValidationState} from '@react-stately/form';
 import {RefObject, Validation, ValidationResult} from '@react-types/shared';
 import {setInteractionModality} from '@react-aria/interactions';
-import {useEffect} from 'react';
+import {useEffect, useRef} from 'react';
 import {useEffectEvent, useLayoutEffect} from '@react-aria/utils';
 
 type ValidatableElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
@@ -43,8 +43,11 @@ export function useFormValidation<T>(props: FormValidationProps<T>, state: FormV
     }
   });
 
+  let isIgnoredReset = useRef(false);
   let onReset = useEffectEvent(() => {
-    state.resetValidation();
+    if (!isIgnoredReset.current) {
+      state.resetValidation();
+    }
   });
 
   let onInvalid = useEffectEvent((e: Event) => {
@@ -82,13 +85,32 @@ export function useFormValidation<T>(props: FormValidationProps<T>, state: FormV
     }
 
     let form = input.form;
+
+    let reset = form?.reset;
+    if (form) {
+      // Try to detect React's automatic form reset behavior so we don't clear
+      // validation errors that are returned by server actions.
+      // To do this, we ignore programmatic form resets that occur outside a user event.
+      // This is best-effort. There may be false positives, e.g. setTimeout.
+      form.reset = () => {
+        // React uses MessageChannel for scheduling, so ignore 'message' events.
+        isIgnoredReset.current = !window.event || (window.event.type === 'message' && window.event.target instanceof MessagePort);
+        reset?.call(form);
+        isIgnoredReset.current = false;
+      };
+    }
+
     input.addEventListener('invalid', onInvalid);
     input.addEventListener('change', onChange);
     form?.addEventListener('reset', onReset);
     return () => {
       input!.removeEventListener('invalid', onInvalid);
       input!.removeEventListener('change', onChange);
       form?.removeEventListener('reset', onReset);
+      if (form) {
+        // @ts-ignore
+        form.reset = reset;
+      }
     };
   }, [ref, onInvalid, onChange, onReset, validationBehavior]);
 }