fix: Don't reset form fields if reset event is cancelled. (#7603)

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

* tests, handle bubble preventdefault and stoppropagation

* fix: Allow multiple form elements with useFormReset

* simplify case again

---------

Co-authored-by: Robert Snow <rsnow@adobe.com>
Co-authored-by: Robert Snow <snowystinger@gmail.com>

Author: nanto

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

@@ -19,8 +19,9 @@ export function useFormReset<T>(
   initialValue: T,
   onReset: (value: T) => void
 ): void {
-  let handleReset = useEffectEvent(() => {
-    if (onReset) {
+
+  let handleReset = useEffectEvent((e: Event) => {
+    if (onReset && !e.defaultPrevented) {
       onReset(initialValue);
     }
   });

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

@@ -0,0 +1,137 @@
+/*
+ * 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.skip('should not call onReset if reset is cancelled', async () => {
+    // Simpler case at the moment, but you have to setup a capture listener to prevent the default behavior.
+    // Matching native behavior is too much of a change until someone asks for it.
+    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 onResetCapture={(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();
+  });
+});