From 23cefee66ceb95e6f6bfac5e67ec234f341817ca Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Thu, 19 Jun 2025 12:00:04 -0700
Subject: [PATCH 1/4] Allow onChange to bubble in Checkbox, Radio, and Switch

---
 packages/@react-aria/radio/src/useRadio.ts      |  3 +--
 packages/@react-aria/toggle/src/useToggle.ts    |  3 ---
 .../react-aria-components/test/Checkbox.test.js | 16 ++++++++++++++++
 .../test/RadioGroup.test.js                     | 17 +++++++++++++++++
 .../react-aria-components/test/Switch.test.js   | 16 ++++++++++++++++
 5 files changed, 50 insertions(+), 5 deletions(-)

diff --git a/packages/@react-aria/radio/src/useRadio.ts b/packages/@react-aria/radio/src/useRadio.ts
index 3c4f0220a22..ea5f74d586e 100644
--- a/packages/@react-aria/radio/src/useRadio.ts
+++ b/packages/@react-aria/radio/src/useRadio.ts
@@ -57,8 +57,7 @@ export function useRadio(props: AriaRadioProps, state: RadioGroupState, ref: Ref
 
   let checked = state.selectedValue === value;
 
-  let onChange = (e) => {
-    e.stopPropagation();
+  let onChange = () => {
     state.setSelectedValue(value);
   };
 
diff --git a/packages/@react-aria/toggle/src/useToggle.ts b/packages/@react-aria/toggle/src/useToggle.ts
index fee8b760286..9ca0ec5e9ef 100644
--- a/packages/@react-aria/toggle/src/useToggle.ts
+++ b/packages/@react-aria/toggle/src/useToggle.ts
@@ -51,9 +51,6 @@ export function useToggle(props: AriaToggleProps, state: ToggleState, ref: RefOb
   } = props;
 
   let onChange = (e) => {
-    // since we spread props on label, onChange will end up there as well as in here.
-    // so we have to stop propagation at the lowest level that we care about
-    e.stopPropagation();
     state.setSelected(e.target.checked);
   };
 
diff --git a/packages/react-aria-components/test/Checkbox.test.js b/packages/react-aria-components/test/Checkbox.test.js
index 6754c5dd5ef..52509bf95f3 100644
--- a/packages/react-aria-components/test/Checkbox.test.js
+++ b/packages/react-aria-components/test/Checkbox.test.js
@@ -244,4 +244,20 @@ describe('Checkbox', () => {
     expect(inputRef.current).toBe(getByRole('checkbox'));
     expect(contextInputRef.current).toBe(getByRole('checkbox'));
   });
+
+  it('should allow onChange event to bubble to the form', async () => {
+    let onChange = jest.fn();
+
+    let {getByRole} = render(
+      <form onChange={onChange}>
+        <Checkbox name="test">Test</Checkbox>
+      </form>
+    );
+
+    let checkbox = getByRole('checkbox');
+    await user.click(checkbox);
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange.mock.lastCall[0].target.name).toBe('test');
+  });
 });
diff --git a/packages/react-aria-components/test/RadioGroup.test.js b/packages/react-aria-components/test/RadioGroup.test.js
index bab80b346b3..fdb3a1b029f 100644
--- a/packages/react-aria-components/test/RadioGroup.test.js
+++ b/packages/react-aria-components/test/RadioGroup.test.js
@@ -557,4 +557,21 @@ describe('RadioGroup', () => {
     expect(inputRef.current).toBe(radio);
     expect(contextInputRef.current).toBe(radio);
   });
+
+  it('should allow onChange event to bubble to the form', async () => {
+    let onChange = jest.fn();
+
+    let {getAllByRole} = render(
+      <form onChange={onChange}>
+        <TestRadioGroup groupProps={{name: 'test'}} />
+      </form>
+    );
+
+    let radios = getAllByRole('radio');
+    await user.click(radios[1]);
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange.mock.lastCall[0].target.name).toBe('test');
+    expect(onChange.mock.lastCall[0].target.value).toBe('b');
+  });
 });
diff --git a/packages/react-aria-components/test/Switch.test.js b/packages/react-aria-components/test/Switch.test.js
index 987088625a8..7fdfd22187c 100644
--- a/packages/react-aria-components/test/Switch.test.js
+++ b/packages/react-aria-components/test/Switch.test.js
@@ -229,4 +229,20 @@ describe('Switch', () => {
     expect(inputRef.current).toBe(getByRole('switch'));
     expect(contextInputRef.current).toBe(getByRole('switch'));
   });
+
+  it('should allow onChange event to bubble to the form', async () => {
+    let onChange = jest.fn();
+
+    let {getByRole} = render(
+      <form onChange={onChange}>
+        <Switch name="test">Test</Switch>
+      </form>
+    );
+
+    let input = getByRole('switch');
+    await user.click(input);
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange.mock.lastCall[0].target.name).toBe('test');
+  });
 });

From 0489595ff2c3fc8c8b6cbb3bd3fce8241f7829eb Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Thu, 19 Jun 2025 12:03:17 -0700
Subject: [PATCH 2/4] Emit native change and input events when Select and
 Slider change

---
 .../@react-aria/select/src/HiddenSelect.tsx   | 12 +++++--
 .../@react-aria/slider/src/useSliderThumb.ts  | 22 ++++++++++--
 packages/@react-aria/utils/src/index.ts       |  1 +
 .../@react-aria/utils/src/useInputEvent.ts    | 34 +++++++++++++++++++
 .../picker/test/Picker.test.js                | 30 +++++++++++++++-
 .../combobox/src/useComboBoxState.ts          |  2 +-
 packages/@react-stately/select/package.json   |  1 +
 .../select/src/useSelectState.ts              | 13 +++++--
 .../slider/src/useSliderState.ts              | 19 +++++++++--
 packages/@react-stately/utils/src/index.ts    |  1 +
 .../@react-stately/utils/src/useStateEvent.ts | 33 ++++++++++++++++++
 .../test/ColorSlider.test.js                  | 29 ++++++++++++++++
 .../react-aria-components/test/Slider.test.js | 29 ++++++++++++++++
 13 files changed, 213 insertions(+), 13 deletions(-)
 create mode 100644 packages/@react-aria/utils/src/useInputEvent.ts
 create mode 100644 packages/@react-stately/utils/src/useStateEvent.ts

diff --git a/packages/@react-aria/select/src/HiddenSelect.tsx b/packages/@react-aria/select/src/HiddenSelect.tsx
index b0d61ddc2aa..3a561b464ed 100644
--- a/packages/@react-aria/select/src/HiddenSelect.tsx
+++ b/packages/@react-aria/select/src/HiddenSelect.tsx
@@ -14,7 +14,7 @@ import {FocusableElement, RefObject} from '@react-types/shared';
 import React, {JSX, ReactNode, useRef} from 'react';
 import {selectData} from './useSelect';
 import {SelectState} from '@react-stately/select';
-import {useFormReset} from '@react-aria/utils';
+import {useFormReset, useInputEvent} from '@react-aria/utils';
 import {useFormValidation} from '@react-aria/form';
 import {useVisuallyHidden} from '@react-aria/visually-hidden';
 
@@ -44,7 +44,7 @@ export interface HiddenSelectProps<T> extends AriaHiddenSelectProps {
 
 export interface AriaHiddenSelectOptions extends AriaHiddenSelectProps {
   /** A ref to the hidden `<select>` element. */
-  selectRef?: RefObject<HTMLSelectElement | null>
+  selectRef?: RefObject<HTMLSelectElement | HTMLInputElement | null>
 }
 
 export interface HiddenSelectAria {
@@ -75,6 +75,8 @@ export function useHiddenSelect<T>(props: AriaHiddenSelectOptions, state: Select
     focus: () => triggerRef.current?.focus()
   }, state, props.selectRef);
 
+  useInputEvent(props.selectRef!, state.onSelectionChange);
+
   // In Safari, the <select> cannot have `display: none` or `hidden` for autofill to work.
   // In Firefox, there must be a <label> to identify the <select> whereas other browsers
   // seem to identify it just by surrounding text.
@@ -100,7 +102,11 @@ export function useHiddenSelect<T>(props: AriaHiddenSelectOptions, state: Select
       required: validationBehavior === 'native' && isRequired,
       name,
       value: state.selectedKey ?? undefined,
-      onChange: (e: React.ChangeEvent<HTMLSelectElement>) => state.setSelectedKey(e.target.value)
+      onChange: (e: React.ChangeEvent<HTMLSelectElement>) => {
+        if (!e.nativeEvent['__reactAriaIgnore']) {
+          state.setSelectedKey(e.target.value);
+        }
+      }
     }
   };
 }
diff --git a/packages/@react-aria/slider/src/useSliderThumb.ts b/packages/@react-aria/slider/src/useSliderThumb.ts
index 75a1d29045c..d094744af17 100644
--- a/packages/@react-aria/slider/src/useSliderThumb.ts
+++ b/packages/@react-aria/slider/src/useSliderThumb.ts
@@ -1,5 +1,5 @@
 import {AriaSliderThumbProps} from '@react-types/slider';
-import {clamp, focusWithoutScrolling, mergeProps, useFormReset, useGlobalListeners} from '@react-aria/utils';
+import {clamp, focusWithoutScrolling, mergeProps, useFormReset, useGlobalListeners, useInputEvent} from '@react-aria/utils';
 import {DOMAttributes, RefObject} from '@react-types/shared';
 import {getSliderThumbId, sliderData} from './utils';
 import React, {ChangeEvent, InputHTMLAttributes, LabelHTMLAttributes, useCallback, useEffect, useRef} from 'react';
@@ -231,6 +231,22 @@ export function useSliderThumb(
     state.setThumbValue(index, v);
   });
 
+  let {onChange, onChangeEnd} = state;
+  useInputEvent<number>(inputRef, useCallback(fn => {
+    return onChange((changedIndex, value) => {
+      if (index === changedIndex) {
+        fn(value);
+      }
+    });
+  }, [onChange, index]), 'input');
+  useInputEvent<number>(inputRef, useCallback(fn => {
+    return onChangeEnd((changedIndex, value) => {
+      if (index === changedIndex) {
+        fn(value);
+      }
+    });
+  }, [onChangeEnd, index]), 'change');
+
   // We install mouse handlers for the drag motion on the thumb div, but
   // not the key handler for moving the thumb with the slider.  Instead,
   // we focus the range input, and let the browser handle the keyboard
@@ -253,7 +269,9 @@ export function useSliderThumb(
       'aria-describedby': [data['aria-describedby'], opts['aria-describedby']].filter(Boolean).join(' '),
       'aria-details': [data['aria-details'], opts['aria-details']].filter(Boolean).join(' '),
       onChange: (e: ChangeEvent<HTMLInputElement>) => {
-        state.setThumbValue(index, parseFloat(e.target.value));
+        if (!e.nativeEvent['__reactAriaIgnore']) {
+          state.setThumbValue(index, parseFloat(e.target.value));
+        }
       }
     }),
     thumbProps: {
diff --git a/packages/@react-aria/utils/src/index.ts b/packages/@react-aria/utils/src/index.ts
index a567ea89667..73d33bda098 100644
--- a/packages/@react-aria/utils/src/index.ts
+++ b/packages/@react-aria/utils/src/index.ts
@@ -51,5 +51,6 @@ export {CLEAR_FOCUS_EVENT, FOCUS_EVENT} from './constants';
 export {isCtrlKeyPressed} from './keyboard';
 export {useEnterAnimation, useExitAnimation} from './animation';
 export {isFocusable, isTabbable} from './isFocusable';
+export {useInputEvent} from './useInputEvent';
 
 export type {LoadMoreSentinelProps} from './useLoadMoreSentinel';
diff --git a/packages/@react-aria/utils/src/useInputEvent.ts b/packages/@react-aria/utils/src/useInputEvent.ts
new file mode 100644
index 00000000000..ce7257795b1
--- /dev/null
+++ b/packages/@react-aria/utils/src/useInputEvent.ts
@@ -0,0 +1,34 @@
+import {RefObject, useEffect} from 'react';
+
+export function useInputEvent<T>(
+  ref: RefObject<HTMLSelectElement | HTMLInputElement | HTMLTextAreaElement | null>,
+  subscribe: (fn: (value: T) => void) => () => void,
+  type?: 'input' | 'change'
+): void {
+  useEffect(() => {
+    return subscribe(value => {
+      let el = ref.current;
+      if (el && window.event?.type !== 'reset') {
+        // Use native input element value property setter from the element's prototype.
+        // React overrides the setter directly on the element and ignores the input event.
+        // This matches more closely what the browser does natively (setter is not triggered).
+        // See https://stackoverflow.com/questions/23892547/what-is-the-best-way-to-trigger-change-or-input-event-in-react-js
+        let proto = Object.getPrototypeOf(el);
+        let setValue = Object.getOwnPropertyDescriptor(proto, 'value')!.set!;
+        setValue.call(el, String(value ?? ''));
+        
+        if (!type || type === 'input') {
+          let inputEvent = new Event('input', {bubbles: true});
+          inputEvent['__reactAriaIgnore'] = true;
+          el.dispatchEvent(inputEvent);
+        }
+        
+        if (!type || type === 'change') {
+          let changeEvent = new Event('change', {bubbles: true});
+          changeEvent['__reactAriaIgnore'] = true;
+          el.dispatchEvent(changeEvent);
+        }
+      }
+    });
+  }, [ref, subscribe, type]);
+}
diff --git a/packages/@react-spectrum/picker/test/Picker.test.js b/packages/@react-spectrum/picker/test/Picker.test.js
index da7c4ad6960..6b1358cafd0 100644
--- a/packages/@react-spectrum/picker/test/Picker.test.js
+++ b/packages/@react-spectrum/picker/test/Picker.test.js
@@ -1210,7 +1210,7 @@ describe('Picker', function () {
     it('supports controlled selection', async function () {
       let {getByRole} = render(
         <Provider theme={theme}>
-          <Picker label="Test" selectedKey="two" onSelectionChange={onSelectionChange}>
+          <Picker label="Test" selectedKey="two" name="test" onSelectionChange={onSelectionChange}>
             <Item key="one">One</Item>
             <Item key="two">Two</Item>
             <Item key="three">Three</Item>
@@ -1219,7 +1219,9 @@ describe('Picker', function () {
       );
 
       let picker = getByRole('button');
+      let input = document.querySelector('select[name=test]');
       expect(picker).toHaveTextContent('Two');
+      expect(input).toHaveValue('two');
       await user.click(picker);
       act(() => jest.runAllTimers());
 
@@ -1249,6 +1251,7 @@ describe('Picker', function () {
       act(() => jest.runAllTimers());
       expect(document.activeElement).toBe(picker);
       expect(picker).toHaveTextContent('Two');
+      expect(input).toHaveValue('two');
     });
 
     it('supports default selection', async function () {
@@ -2108,6 +2111,31 @@ describe('Picker', function () {
       expect(input).toHaveValue('one');
     });
 
+    it('onChange event bubbles to form', async function () {
+      let onChange = jest.fn();
+      let {getByTestId, getByRole} = render(
+        <Provider theme={theme}>
+          <form onChange={onChange}>
+            <Picker name="picker" data-testid="picker" label="Test">
+              <Item key="one">One</Item>
+              <Item key="two">Two</Item>
+              <Item key="three">Three</Item>
+            </Picker>
+          </form>
+        </Provider>
+      );
+      let picker = getByTestId('picker');
+      await user.click(picker);
+      act(() => jest.runAllTimers());
+
+      let listbox = getByRole('listbox');
+      let items = within(listbox).getAllByRole('option');
+      expect(items.length).toBe(3);
+      await user.click(items[1]);
+      expect(onChange).toHaveBeenCalledTimes(1);
+      expect(onChange.mock.lastCall[0].target.value).toBe('two');
+    });
+
     describe('validation', () => {
       describe('validationBehavior=native', () => {
         it('supports isRequired', async () => {
diff --git a/packages/@react-stately/combobox/src/useComboBoxState.ts b/packages/@react-stately/combobox/src/useComboBoxState.ts
index 13f17f235da..3789432f2fc 100644
--- a/packages/@react-stately/combobox/src/useComboBoxState.ts
+++ b/packages/@react-stately/combobox/src/useComboBoxState.ts
@@ -20,7 +20,7 @@ import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {useControlledState} from '@react-stately/utils';
 import {useOverlayTriggerState} from '@react-stately/overlays';
 
-export interface ComboBoxState<T> extends SelectState<T>, FormValidationState{
+export interface ComboBoxState<T> extends Omit<SelectState<T>, 'onSelectionChange'>, FormValidationState{
   /** The current value of the combo box input. */
   inputValue: string,
   /** Sets the value of the combo box input. */
diff --git a/packages/@react-stately/select/package.json b/packages/@react-stately/select/package.json
index 7c07cc4d0b7..16b8a9aaad2 100644
--- a/packages/@react-stately/select/package.json
+++ b/packages/@react-stately/select/package.json
@@ -29,6 +29,7 @@
     "@react-stately/form": "^3.1.5",
     "@react-stately/list": "^3.12.3",
     "@react-stately/overlays": "^3.6.17",
+    "@react-stately/utils": "^3.10.7",
     "@react-types/select": "^3.9.13",
     "@react-types/shared": "^3.30.0",
     "@swc/helpers": "^0.5.0"
diff --git a/packages/@react-stately/select/src/useSelectState.ts b/packages/@react-stately/select/src/useSelectState.ts
index 62cf0bfb03b..c564ec2f2af 100644
--- a/packages/@react-stately/select/src/useSelectState.ts
+++ b/packages/@react-stately/select/src/useSelectState.ts
@@ -10,12 +10,13 @@
  * governing permissions and limitations under the License.
  */
 
-import {CollectionStateBase, FocusStrategy} from '@react-types/shared';
+import {CollectionStateBase, FocusStrategy, Key} from '@react-types/shared';
 import {FormValidationState, useFormValidationState} from '@react-stately/form';
 import {OverlayTriggerState, useOverlayTriggerState} from '@react-stately/overlays';
 import {SelectProps} from '@react-types/select';
 import {SingleSelectListState, useSingleSelectListState} from '@react-stately/list';
 import {useMemo, useState} from 'react';
+import {useStateEvent} from '@react-stately/utils';
 
 export interface SelectStateOptions<T> extends Omit<SelectProps<T>, 'children'>, CollectionStateBase<T> {}
 
@@ -33,7 +34,10 @@ export interface SelectState<T> extends SingleSelectListState<T>, OverlayTrigger
   open(focusStrategy?: FocusStrategy | null): void,
 
   /** Toggles the menu. */
-  toggle(focusStrategy?: FocusStrategy | null): void
+  toggle(focusStrategy?: FocusStrategy | null): void,
+
+  /** Registers a function that is called when the user changes the selected key. */
+  onSelectionChange(fn: (key: Key | null) => void): () => void
 }
 
 /**
@@ -44,6 +48,7 @@ export interface SelectState<T> extends SingleSelectListState<T>, OverlayTrigger
 export function useSelectState<T extends object>(props: SelectStateOptions<T>): SelectState<T>  {
   let triggerState = useOverlayTriggerState(props);
   let [focusStrategy, setFocusStrategy] = useState<FocusStrategy | null>(null);
+  let [subscribe, emit] = useStateEvent();
   let listState = useSingleSelectListState({
     ...props,
     onSelectionChange: (key) => {
@@ -51,6 +56,7 @@ export function useSelectState<T extends object>(props: SelectStateOptions<T>):
         props.onSelectionChange(key);
       }
 
+      emit(key);
       triggerState.close();
       validationState.commitValidation();
     }
@@ -83,6 +89,7 @@ export function useSelectState<T extends object>(props: SelectStateOptions<T>):
       }
     },
     isFocused,
-    setFocused
+    setFocused,
+    onSelectionChange: subscribe
   };
 }
diff --git a/packages/@react-stately/slider/src/useSliderState.ts b/packages/@react-stately/slider/src/useSliderState.ts
index d2de8e145a6..62478598e79 100644
--- a/packages/@react-stately/slider/src/useSliderState.ts
+++ b/packages/@react-stately/slider/src/useSliderState.ts
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {clamp, snapValueToStep, useControlledState} from '@react-stately/utils';
+import {clamp, snapValueToStep, useControlledState, useStateEvent} from '@react-stately/utils';
 import {Orientation} from '@react-types/shared';
 import {SliderProps} from '@react-types/slider';
 import {useCallback, useMemo, useRef, useState} from 'react';
@@ -142,7 +142,12 @@ export interface SliderState {
   readonly orientation: Orientation,
 
   /** Whether the slider is disabled. */
-  readonly isDisabled: boolean
+  readonly isDisabled: boolean,
+
+  /** Registers a function that is called when a thumb value changes. */
+  onChange(fn: (index: number, value: number) => void): () => void,
+  /** Registers a function that is called when a thumb value ends dragging. */
+  onChangeEnd(fn: (index: number, value: number) => void): () => void
 }
 
 const DEFAULT_MIN_VALUE = 0;
@@ -184,6 +189,8 @@ export function useSliderState<T extends number | number[]>(props: SliderStateOp
 
   let value = useMemo(() => restrictValues(convertValue(props.value)), [props.value]);
   let defaultValue = useMemo(() => restrictValues(convertValue(props.defaultValue) ?? [minValue])!, [props.defaultValue, minValue]);
+  let [subscribeOnChange, emitOnChange] = useStateEvent<[number, number]>();
+  let [subscribeOnChangeEnd, emitOnChangeEnd] = useStateEvent<[number, number]>();
   let onChange = createOnChange(props.value, props.defaultValue, props.onChange);
   let onChangeEnd = createOnChange(props.value, props.defaultValue, props.onChangeEnd);
 
@@ -239,6 +246,7 @@ export function useSliderState<T extends number | number[]>(props: SliderStateOp
     value = snapValueToStep(value, thisMin, thisMax, step);
     let newValues = replaceIndex(valuesRef.current, index, value);
     setValues(newValues);
+    emitOnChange(index, value);
   }
 
   function updateDragging(index: number, dragging: boolean) {
@@ -252,6 +260,9 @@ export function useSliderState<T extends number | number[]>(props: SliderStateOp
     const wasDragging = isDraggingsRef.current[index];
     isDraggingsRef.current = replaceIndex(isDraggingsRef.current, index, dragging);
     setDraggings(isDraggingsRef.current);
+    if (wasDragging) {
+      emitOnChangeEnd(index, valuesRef.current[index]);
+    }
 
     // Call onChangeEnd if no handles are dragging.
     if (onChangeEnd && wasDragging && !isDraggingsRef.current.some(Boolean)) {
@@ -309,7 +320,9 @@ export function useSliderState<T extends number | number[]>(props: SliderStateOp
     step,
     pageSize,
     orientation,
-    isDisabled
+    isDisabled,
+    onChange: subscribeOnChange,
+    onChangeEnd: subscribeOnChangeEnd
   };
 }
 
diff --git a/packages/@react-stately/utils/src/index.ts b/packages/@react-stately/utils/src/index.ts
index ff98cc62647..dd9e649aefb 100644
--- a/packages/@react-stately/utils/src/index.ts
+++ b/packages/@react-stately/utils/src/index.ts
@@ -11,3 +11,4 @@
  */
 export {useControlledState} from './useControlledState';
 export {clamp, snapValueToStep, toFixedNumber} from './number';
+export {useStateEvent} from './useStateEvent';
diff --git a/packages/@react-stately/utils/src/useStateEvent.ts b/packages/@react-stately/utils/src/useStateEvent.ts
new file mode 100644
index 00000000000..eb14b085b23
--- /dev/null
+++ b/packages/@react-stately/utils/src/useStateEvent.ts
@@ -0,0 +1,33 @@
+/*
+ * Copyright 2020 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 {useCallback, useRef} from 'react';
+
+type Fn<T extends any[]> = (...args: T) => void
+type Subscribe<T extends any[]> = (fn: Fn<T>) => () => void;;
+
+export function useStateEvent<T extends any[]>(): [Subscribe<T>, Fn<T>] {
+  let subscriptions = useRef(new Set<Fn<T>>());
+
+  let subscribe = useCallback((fn: Fn<T>) => {
+    subscriptions.current.add(fn);
+    return () => subscriptions.current.delete(fn);
+  }, []);
+
+  let emit = useCallback((...args: T) => {    
+    for (let fn of subscriptions.current) {
+      fn(...args);
+    }
+  }, []);
+
+  return [subscribe, emit];
+}
diff --git a/packages/react-aria-components/test/ColorSlider.test.js b/packages/react-aria-components/test/ColorSlider.test.js
index cba139981ca..5af20af794f 100644
--- a/packages/react-aria-components/test/ColorSlider.test.js
+++ b/packages/react-aria-components/test/ColorSlider.test.js
@@ -186,4 +186,33 @@ describe('ColorSlider', () => {
     expect(wrapper).toHaveClass('vertical');
     expect(slider).toHaveAttribute('aria-orientation', 'vertical');
   });
+
+  it('onChange event bubbles to form', async () => {
+    let onChange = jest.fn();
+    let onInput = jest.fn();
+    let onChangeNative = jest.fn();
+    let ref = React.createRef();
+    render(
+      <form
+        onChange={onChange}
+        onInput={onInput}
+        ref={ref}>
+        <TestColorSlider sliderProps={{defaultValue: '#000'}} />
+      </form>
+    );
+
+    ref.current.addEventListener('change', onChangeNative);
+
+    let track = document.querySelector('.react-aria-SliderTrack');
+    await user.pointer([{target: track, keys: '[MouseLeft>]', coords: {x: 20}}]);
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onInput).toHaveBeenCalledTimes(1);
+    expect(onChangeNative).toHaveBeenCalledTimes(0);
+
+    await user.pointer([{target: track, keys: '[/MouseLeft]', coords: {x: 20}}]);
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onInput).toHaveBeenCalledTimes(1);
+    expect(onChangeNative).toHaveBeenCalledTimes(1);
+  });
 });
diff --git a/packages/react-aria-components/test/Slider.test.js b/packages/react-aria-components/test/Slider.test.js
index 720d2afab98..9ad49b40df7 100644
--- a/packages/react-aria-components/test/Slider.test.js
+++ b/packages/react-aria-components/test/Slider.test.js
@@ -274,6 +274,35 @@ describe('Slider', () => {
     await user.pointer([{target: track, keys: '[MouseLeft]', coords: {x: 20}}]);
     expect(onChange).toHaveBeenCalled();
   });
+
+  it('onChange event bubbles to form', async () => {
+    let onChange = jest.fn();
+    let onInput = jest.fn();
+    let onChangeNative = jest.fn();
+    let ref = React.createRef();
+    render(
+      <form
+        onChange={onChange}
+        onInput={onInput}
+        ref={ref}>
+        <TestSlider />
+      </form>
+    );
+
+    ref.current.addEventListener('change', onChangeNative);
+
+    let track = document.querySelector('.react-aria-SliderTrack');
+    await user.pointer([{target: track, keys: '[MouseLeft>]', coords: {x: 20}}]);
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onInput).toHaveBeenCalledTimes(1);
+    expect(onChangeNative).toHaveBeenCalledTimes(0);
+
+    await user.pointer([{target: track, keys: '[/MouseLeft]', coords: {x: 20}}]);
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onInput).toHaveBeenCalledTimes(1);
+    expect(onChangeNative).toHaveBeenCalledTimes(1);
+  });
 });
 
 it('should support input ref', () => {

From 651f19270ba245c243b74c95081aeac882d41a90 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Thu, 19 Jun 2025 12:04:01 -0700
Subject: [PATCH 3/4] yarn!!!

---
 yarn.lock | 1 +
 1 file changed, 1 insertion(+)

diff --git a/yarn.lock b/yarn.lock
index 843e4e26f02..f39bd07cc82 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8761,6 +8761,7 @@ __metadata:
     "@react-stately/form": "npm:^3.1.5"
     "@react-stately/list": "npm:^3.12.3"
     "@react-stately/overlays": "npm:^3.6.17"
+    "@react-stately/utils": "npm:^3.10.7"
     "@react-types/select": "npm:^3.9.13"
     "@react-types/shared": "npm:^3.30.0"
     "@swc/helpers": "npm:^0.5.0"

From ca4e56958d405772340ddbdd7f76e1eae4b5d75d Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Fri, 11 Jul 2025 16:59:45 -0700
Subject: [PATCH 4/4] update ComboBox

---
 .../@react-aria/combobox/src/useComboBox.ts   |  4 +-
 .../@react-aria/textfield/src/useTextField.ts |  6 ++-
 .../textfield/test/useTextField.test.js       |  1 +
 .../@react-aria/utils/src/useInputEvent.ts    |  2 +-
 .../test/SearchAutocomplete.test.js           | 16 +++-----
 .../combobox/test/ComboBox.test.js            | 16 +++-----
 .../combobox/src/useComboBoxState.ts          | 20 +++++++---
 .../test/ColorSlider.test.js                  |  2 +-
 .../test/ComboBox.test.js                     | 37 +++++++++++++++++--
 .../react-aria-components/test/Slider.test.js |  2 +-
 .../test/TextField.test.js                    | 16 ++++++++
 11 files changed, 87 insertions(+), 35 deletions(-)

diff --git a/packages/@react-aria/combobox/src/useComboBox.ts b/packages/@react-aria/combobox/src/useComboBox.ts
index 6c7deae42ba..c7d97b5b7ec 100644
--- a/packages/@react-aria/combobox/src/useComboBox.ts
+++ b/packages/@react-aria/combobox/src/useComboBox.ts
@@ -16,7 +16,7 @@ import {AriaComboBoxProps} from '@react-types/combobox';
 import {ariaHideOutside} from '@react-aria/overlays';
 import {AriaListBoxOptions, getItemId, listData} from '@react-aria/listbox';
 import {BaseEvent, DOMAttributes, KeyboardDelegate, LayoutDelegate, PressEvent, RefObject, RouterOptions, ValidationResult} from '@react-types/shared';
-import {chain, getActiveElement, getOwnerDocument, isAppleDevice, mergeProps, useLabels, useRouter, useUpdateEffect} from '@react-aria/utils';
+import {chain, getActiveElement, getOwnerDocument, isAppleDevice, mergeProps, useInputEvent, useLabels, useRouter, useUpdateEffect} from '@react-aria/utils';
 import {ComboBoxState} from '@react-stately/combobox';
 import {dispatchVirtualFocus} from '@react-aria/focus';
 import {FocusEvent, InputHTMLAttributes, KeyboardEvent, TouchEvent, useEffect, useMemo, useRef} from 'react';
@@ -351,6 +351,8 @@ export function useComboBox<T>(props: AriaComboBoxOptions<T>, state: ComboBoxSta
     }
   }, [focusedItem]);
 
+  useInputEvent(inputRef, state.onInputChange);
+
   return {
     labelProps,
     buttonProps: {
diff --git a/packages/@react-aria/textfield/src/useTextField.ts b/packages/@react-aria/textfield/src/useTextField.ts
index 8616abeb94b..5fa8a7401e5 100644
--- a/packages/@react-aria/textfield/src/useTextField.ts
+++ b/packages/@react-aria/textfield/src/useTextField.ts
@@ -206,7 +206,11 @@ export function useTextField<T extends TextFieldIntrinsicElements = DefaultEleme
         'aria-haspopup': props['aria-haspopup'],
         'aria-controls': props['aria-controls'],
         value,
-        onChange: (e: ChangeEvent<HTMLInputElement>) => setValue(e.target.value),
+        onChange: (e: ChangeEvent<HTMLInputElement>) => {
+          if (!e.nativeEvent['__reactAriaIgnore']) {
+            setValue(e.target.value);
+          }
+        },
         autoComplete: props.autoComplete,
         autoCapitalize: props.autoCapitalize,
         maxLength: props.maxLength,
diff --git a/packages/@react-aria/textfield/test/useTextField.test.js b/packages/@react-aria/textfield/test/useTextField.test.js
index 40e3358b817..d0e420dcf66 100644
--- a/packages/@react-aria/textfield/test/useTextField.test.js
+++ b/packages/@react-aria/textfield/test/useTextField.test.js
@@ -84,6 +84,7 @@ describe('useTextField hook', () => {
       let onChange = jest.fn();
       let props = renderTextFieldHook({onChange, 'aria-label': 'mandatory label'});
       let mockEvent = {
+        nativeEvent: {},
         target: {
           value: 1
         }
diff --git a/packages/@react-aria/utils/src/useInputEvent.ts b/packages/@react-aria/utils/src/useInputEvent.ts
index ce7257795b1..c2d8529dc6d 100644
--- a/packages/@react-aria/utils/src/useInputEvent.ts
+++ b/packages/@react-aria/utils/src/useInputEvent.ts
@@ -8,7 +8,7 @@ export function useInputEvent<T>(
   useEffect(() => {
     return subscribe(value => {
       let el = ref.current;
-      if (el && window.event?.type !== 'reset') {
+      if (el && window.event?.type !== 'reset' && (type === 'change' || el.value !== String(value ?? ''))) {
         // Use native input element value property setter from the element's prototype.
         // React overrides the setter directly on the element and ignores the input event.
         // This matches more closely what the browser does natively (setter is not triggered).
diff --git a/packages/@react-spectrum/autocomplete/test/SearchAutocomplete.test.js b/packages/@react-spectrum/autocomplete/test/SearchAutocomplete.test.js
index 0ef2af2f80e..79adf124a4e 100644
--- a/packages/@react-spectrum/autocomplete/test/SearchAutocomplete.test.js
+++ b/packages/@react-spectrum/autocomplete/test/SearchAutocomplete.test.js
@@ -2512,6 +2512,8 @@ describe('SearchAutocomplete', function () {
               jest.runAllTimers();
             });
 
+            expect(input).toHaveAttribute('aria-describedby');
+
             let listbox = getByRole('listbox');
             let items = within(listbox).getAllByRole('option');
             await user.click(items[0]);
@@ -2519,9 +2521,6 @@ describe('SearchAutocomplete', function () {
               jest.runAllTimers();
             });
 
-            expect(input).toHaveAttribute('aria-describedby');
-
-            await user.tab();
             expect(input).not.toHaveAttribute('aria-describedby');
           });
 
@@ -2550,6 +2549,8 @@ describe('SearchAutocomplete', function () {
               jest.runAllTimers();
             });
 
+            expect(input).toHaveAttribute('aria-describedby');
+
             let listbox = getByRole('listbox');
             let items = within(listbox).getAllByRole('option');
             await user.click(items[0]);
@@ -2557,10 +2558,6 @@ describe('SearchAutocomplete', function () {
               jest.runAllTimers();
             });
 
-            expect(input).toHaveAttribute('aria-describedby');
-
-            await user.tab();
-
             expect(input).not.toHaveAttribute('aria-describedby');
             expect(input.validity.valid).toBe(true);
           });
@@ -2603,6 +2600,8 @@ describe('SearchAutocomplete', function () {
               jest.runAllTimers();
             });
 
+            expect(input).toHaveAttribute('aria-describedby');
+
             let listbox = getByRole('listbox');
             let items = within(listbox).getAllByRole('option');
             await user.click(items[0]);
@@ -2610,9 +2609,6 @@ describe('SearchAutocomplete', function () {
               jest.runAllTimers();
             });
 
-            expect(input).toHaveAttribute('aria-describedby');
-            await user.tab();
-
             expect(input).not.toHaveAttribute('aria-describedby');
             expect(input.validity.valid).toBe(true);
           });
diff --git a/packages/@react-spectrum/combobox/test/ComboBox.test.js b/packages/@react-spectrum/combobox/test/ComboBox.test.js
index 8a6b7ee6e54..f2957be527f 100644
--- a/packages/@react-spectrum/combobox/test/ComboBox.test.js
+++ b/packages/@react-spectrum/combobox/test/ComboBox.test.js
@@ -5335,6 +5335,8 @@ describe('ComboBox', function () {
               jest.runAllTimers();
             });
 
+            expect(input).toHaveAttribute('aria-describedby');
+
             let listbox = getByRole('listbox');
             let items = within(listbox).getAllByRole('option');
             await user.click(items[0]);
@@ -5342,9 +5344,6 @@ describe('ComboBox', function () {
               jest.runAllTimers();
             });
 
-            expect(input).toHaveAttribute('aria-describedby');
-
-            await user.tab();
             expect(input).not.toHaveAttribute('aria-describedby');
           });
 
@@ -5372,6 +5371,8 @@ describe('ComboBox', function () {
               jest.runAllTimers();
             });
 
+            expect(input).toHaveAttribute('aria-describedby');
+
             let listbox = getByRole('listbox');
             let items = within(listbox).getAllByRole('option');
             await user.click(items[0]);
@@ -5379,10 +5380,6 @@ describe('ComboBox', function () {
               jest.runAllTimers();
             });
 
-            expect(input).toHaveAttribute('aria-describedby');
-
-            await user.tab();
-
             expect(input).not.toHaveAttribute('aria-describedby');
             expect(input.validity.valid).toBe(true);
           });
@@ -5425,6 +5422,8 @@ describe('ComboBox', function () {
               jest.runAllTimers();
             });
 
+            expect(input).toHaveAttribute('aria-describedby');
+            
             let listbox = getByRole('listbox');
             let items = within(listbox).getAllByRole('option');
             await user.click(items[0]);
@@ -5432,9 +5431,6 @@ describe('ComboBox', function () {
               jest.runAllTimers();
             });
 
-            expect(input).toHaveAttribute('aria-describedby');
-            await user.tab();
-
             expect(input).not.toHaveAttribute('aria-describedby');
             expect(input.validity.valid).toBe(true);
           });
diff --git a/packages/@react-stately/combobox/src/useComboBoxState.ts b/packages/@react-stately/combobox/src/useComboBoxState.ts
index d60864cca07..d69d84e923e 100644
--- a/packages/@react-stately/combobox/src/useComboBoxState.ts
+++ b/packages/@react-stately/combobox/src/useComboBoxState.ts
@@ -17,7 +17,7 @@ import {getChildNodes} from '@react-stately/collections';
 import {ListCollection, useSingleSelectListState} from '@react-stately/list';
 import {SelectState} from '@react-stately/select';
 import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
-import {useControlledState} from '@react-stately/utils';
+import {useControlledState, useStateEvent} from '@react-stately/utils';
 import {useOverlayTriggerState} from '@react-stately/overlays';
 
 export interface ComboBoxState<T> extends Omit<SelectState<T>, 'onSelectionChange'>, FormValidationState{
@@ -36,7 +36,9 @@ export interface ComboBoxState<T> extends Omit<SelectState<T>, 'onSelectionChang
   /** Toggles the menu. */
   toggle(focusStrategy?: FocusStrategy | null, trigger?: MenuTriggerAction): void,
   /** Resets the input value to the previously selected item's text if any and closes the menu.  */
-  revert(): void
+  revert(): void,
+  /** Registers a function that is called when the input value changes. */
+  onInputChange(fn: (value: string) => void): () => void
 }
 
 type FilterFn = (textValue: string, inputValue: string) => boolean;
@@ -61,7 +63,8 @@ export function useComboBoxState<T extends object>(props: ComboBoxStateOptions<T
     menuTrigger = 'input',
     allowsEmptyCollection = false,
     allowsCustomValue,
-    shouldCloseOnBlur = true
+    shouldCloseOnBlur = true,
+    onInputChange
   } = props;
 
   let [showAllItems, setShowAllItems] = useState(false);
@@ -93,10 +96,14 @@ export function useComboBoxState<T extends object>(props: ComboBoxStateOptions<T
     items: props.items ?? props.defaultItems
   });
 
+  let [subscribe, emitInputChange] = useStateEvent<[string]>();
   let [inputValue, setInputValue] = useControlledState(
     props.inputValue,
     getDefaultInputValue(props.defaultInputValue, selectedKey, collection) || '',
-    props.onInputChange
+    useCallback(value => {
+      emitInputChange(value);
+      onInputChange?.(value);
+    }, [onInputChange, emitInputChange])
   );
   let [initialSelectedKey] = useState(selectedKey);
   let [initialValue] = useState(inputValue);
@@ -342,7 +349,7 @@ export function useComboBoxState<T extends object>(props: ComboBoxStateOptions<T
       }
 
       if (inputValue !== valueOnFocus.current) {
-        validation.commitValidation();
+        // validation.commitValidation();
       }
     }
 
@@ -383,7 +390,8 @@ export function useComboBoxState<T extends object>(props: ComboBoxStateOptions<T
     defaultInputValue: getDefaultInputValue(props.defaultInputValue, defaultSelectedKey, collection) ?? initialValue,
     setInputValue,
     commit,
-    revert
+    revert,
+    onInputChange: subscribe
   };
 }
 
diff --git a/packages/react-aria-components/test/ColorSlider.test.js b/packages/react-aria-components/test/ColorSlider.test.js
index 91c89ac44bf..b6ff7ce7169 100644
--- a/packages/react-aria-components/test/ColorSlider.test.js
+++ b/packages/react-aria-components/test/ColorSlider.test.js
@@ -203,7 +203,7 @@ describe('ColorSlider', () => {
         onChange={onChange}
         onInput={onInput}
         ref={ref}>
-        <TestColorSlider sliderProps={{defaultValue: '#000'}} />
+        <TestColorSlider sliderProps={{defaultValue: '#111'}} />
       </form>
     );
 
diff --git a/packages/react-aria-components/test/ComboBox.test.js b/packages/react-aria-components/test/ComboBox.test.js
index 8b3a2401ff9..5306cbaf081 100644
--- a/packages/react-aria-components/test/ComboBox.test.js
+++ b/packages/react-aria-components/test/ComboBox.test.js
@@ -259,13 +259,12 @@ describe('ComboBox', () => {
     });
     await user.keyboard('C');
 
-    let options = comboboxTester.options();
-    await user.click(options[0]);
-
     expect(combobox).toHaveAttribute('aria-describedby');
     expect(combobox.validity.valid).toBe(true);
 
-    await user.tab();
+    let options = comboboxTester.options();
+    await user.click(options[0]);
+
     expect(combobox).not.toHaveAttribute('aria-describedby');
     expect(combobox).not.toHaveAttribute('data-invalid');
   });
@@ -384,4 +383,34 @@ describe('ComboBox', () => {
     let input = getByRole('combobox');
     expect(input).toHaveAttribute('form', 'test');
   });
+
+  it('should emit onChange event when selecting an item', async () => {
+    let onChange = jest.fn();
+    let onInput = jest.fn();
+    let onChangeNative = jest.fn();
+    let ref = React.createRef();
+
+    render(
+      <form onInput={onInput} onChange={onChange} ref={ref}>
+        <TestComboBox name="test" defaultInputValue="" />
+      </form>
+    );
+
+    ref.current.addEventListener('change', onChangeNative);
+
+    await user.tab();
+    await user.keyboard('Ca');
+    
+    expect(onInput).toHaveBeenCalledTimes(2);
+    expect(onChange).toHaveBeenCalledTimes(2);
+    expect(onChangeNative).toHaveBeenCalledTimes(0);
+
+    await user.keyboard('{ArrowDown}');
+    await user.keyboard('{Enter}');
+
+    expect(onInput).toHaveBeenCalledTimes(3);
+    expect(onChange).toHaveBeenCalledTimes(3);
+    expect(onChangeNative).toHaveBeenCalledTimes(1);
+    expect(onChange.mock.lastCall[0].target.value).toBe('Cat');
+  });
 });
diff --git a/packages/react-aria-components/test/Slider.test.js b/packages/react-aria-components/test/Slider.test.js
index 34dbb228a26..41036bb0df8 100644
--- a/packages/react-aria-components/test/Slider.test.js
+++ b/packages/react-aria-components/test/Slider.test.js
@@ -309,7 +309,7 @@ describe('Slider', () => {
         onChange={onChange}
         onInput={onInput}
         ref={ref}>
-        <TestSlider />
+        <TestSlider defaultValue={50} />
       </form>
     );
 
diff --git a/packages/react-aria-components/test/TextField.test.js b/packages/react-aria-components/test/TextField.test.js
index a5d354ee4c7..b3e8d63f356 100644
--- a/packages/react-aria-components/test/TextField.test.js
+++ b/packages/react-aria-components/test/TextField.test.js
@@ -266,5 +266,21 @@ describe('TextField', () => {
       let input = getByRole('textbox');
       expect(input).toHaveAttribute('form', 'test');
     });
+
+    it('should allow onChange event to bubble to the form', async () => {
+      let onChange = jest.fn();
+  
+      render(
+        <form onChange={onChange}>
+          <TestTextField input={component} name="test" />
+        </form>
+      );
+  
+      await user.tab();
+      await user.keyboard('Hi');
+  
+      expect(onChange).toHaveBeenCalledTimes(2);
+      expect(onChange.mock.lastCall[0].target.name).toBe('test');
+    });
   });
 });