fix: Don't reset form fields if reset event is cancelled.

packages/@react-aria/utils/src/useFormReset.ts

@@ -14,23 +14,50 @@ import {RefObject} from '@react-types/shared';
 import {useEffect, useRef} from 'react';
 import {useEffectEvent} from './useEffectEvent';
 
+type ResetEvent = Event & {
+  reactAriaReDispatched?: boolean,
+  reactAriaShouldReset?: boolean
+};
+
 export function useFormReset<T>(
   ref: RefObject<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | null> | undefined,
   initialValue: T,
   onReset: (value: T) => void
 ): void {
   let resetValue = useRef(initialValue);
-  let handleReset = useEffectEvent(() => {
-    if (onReset) {
+
+  /**
+   * Because event.stopPropagation() does not preventDefault and because we attach directly to the form element unlike React
+   * we need to create a new event which lets us monitor stopPropagation and preventDefault. This allows us to call onReset
+   * as the browser would natively.
+   */
+  let formListener = useEffectEvent((e: ResetEvent) => {
+    if (e.reactAriaReDispatched || e.target !== ref?.current?.form) {
+       // This is the re-dispatched event. Or it's for a different form.
+      return;
+    }
+    if (e.reactAriaShouldReset === undefined) {
+      let event: ResetEvent = new Event('reset', {bubbles: true, cancelable: true});
+      event.reactAriaReDispatched = true;
+      if (e.defaultPrevented) {
+        event.preventDefault();
+      }
+      e.stopPropagation();
+      e.preventDefault();
+
+      e.reactAriaShouldReset = e.target?.dispatchEvent(event) ?? false;
+    };
+    if (onReset && e.reactAriaShouldReset) {
       onReset(resetValue.current);
     }
   });
 
   useEffect(() => {
     let form = ref?.current?.form;
-    form?.addEventListener('reset', handleReset);
+    let document = form?.ownerDocument;
+    document?.addEventListener('reset', formListener, true);
     return () => {
-      form?.removeEventListener('reset', handleReset);
+      document?.removeEventListener('reset', formListener, true);
     };
-  }, [ref, handleReset]);
+  }, [ref, formListener]);
 }

packages/@react-aria/utils/test/useFormReset.test.tsx

@@ -0,0 +1,135 @@
+/*
+ * Copyright 2025 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {fireEvent, render} from '@react-spectrum/test-utils-internal';
+import React, {useRef} from 'react';
+import {useFormReset} from '../';
+
+describe('useFormReset', () => {
+  it('should call onReset on reset', () => {
+    const onReset = jest.fn();
+    const Form = () => {
+      const ref = useRef<HTMLInputElement>(null);
+      useFormReset(ref, '', onReset);
+      return (
+        <form>
+          <input ref={ref} type="text" />
+          <button type="reset">Reset</button>
+        </form>
+      );
+    };
+    const {getByRole} = render(<Form />);
+    const button = getByRole('button');
+    fireEvent.click(button);
+    expect(onReset).toHaveBeenCalled();
+  });
+
+  it('should call onReset on reset even if event is stopped', () => {
+    const onReset = jest.fn();
+    const Form = () => {
+      const ref = useRef<HTMLInputElement>(null);
+      useFormReset(ref, '', onReset);
+      return (
+        <form onReset={(e) => e.stopPropagation()}>
+          <input ref={ref} type="text" />
+          <button type="reset">Reset</button>
+        </form>
+      );
+    };
+    const {getByRole} = render(<Form />);
+    const button = getByRole('button');
+    fireEvent.click(button);
+    expect(onReset).toHaveBeenCalled();
+  });
+
+  it('should call every onReset on reset', () => {
+    const onReset1 = jest.fn();
+    const onReset2 = jest.fn();
+    const Form = () => {
+      const ref1 = useRef<HTMLInputElement>(null);
+      useFormReset(ref1, '', onReset1);
+      const ref2 = useRef<HTMLInputElement>(null);
+      useFormReset(ref2, '', onReset2);
+      return (
+        <form>
+          <input ref={ref1} type="text" />
+          <input ref={ref2} type="text" />
+          <button type="reset">Reset</button>
+        </form>
+      );
+    };
+    const {getByRole} = render(<Form />);
+    const button = getByRole('button');
+    fireEvent.click(button);
+    expect(onReset1).toHaveBeenCalled();
+    expect(onReset2).toHaveBeenCalled();
+  });
+
+  it('should not call onReset if reset is cancelled', async () => {
+    const onReset = jest.fn();
+    const Form = () => {
+      const ref = useRef<HTMLInputElement>(null);
+      useFormReset(ref, '', onReset);
+      return (
+        <form onReset={(e) => e.preventDefault()}>
+          <input ref={ref} type="text" />
+          <button type="reset">Reset</button>
+        </form>
+      );
+    };
+    const {getByRole} = render(<Form />);
+    const button = getByRole('button');
+    fireEvent.click(button);
+    expect(onReset).not.toHaveBeenCalled();
+  });
+
+  it('should not call onReset if reset is cancelled in capture phase', async () => {
+    const onReset = jest.fn();
+    const Form = () => {
+      const ref = useRef<HTMLInputElement>(null);
+      useFormReset(ref, '', onReset);
+      return (
+        <form onResetCapture={(e) => e.preventDefault()}>
+          <input ref={ref} type="text" />
+          <button type="reset">Reset</button>
+        </form>
+      );
+    };
+    const {getByRole} = render(<Form />);
+    const button = getByRole('button');
+    fireEvent.click(button);
+    expect(onReset).not.toHaveBeenCalled();
+  });
+
+  it('should not call any onReset if reset is cancelled', () => {
+    const onReset1 = jest.fn();
+    const onReset2 = jest.fn();
+    const Form = () => {
+      const ref1 = useRef<HTMLInputElement>(null);
+      useFormReset(ref1, '', onReset1);
+      const ref2 = useRef<HTMLInputElement>(null);
+      useFormReset(ref2, '', onReset2);
+      return (
+        <form onReset={(e) => e.preventDefault()}>
+          <input ref={ref1} type="text" />
+          <input ref={ref2} type="text" />
+          <button type="reset">Reset</button>
+        </form>
+      );
+    };
+    const {getByRole} = render(<Form />);
+    const button = getByRole('button');
+    fireEvent.click(button);
+    expect(onReset1).not.toHaveBeenCalled();
+    expect(onReset2).not.toHaveBeenCalled();
+  });
+});