fix: ensure NumberField validation displays correct errors in React 19 (#8491)

* fix: ensure NumberField validation displays correct errors in React 19

* fix: ColorField validation

* Add controlled case to test

* add controlled support for programmatic outside component changes

---------

Co-authored-by: Robert Snow <[email protected]>
Co-authored-by: Robert Snow <[email protected]>

Author: chirokas

packages/@react-stately/color/src/useColorFieldState.ts

@@ -136,6 +136,7 @@ export function useColorFieldState(
       newColorValue = colorValue.toString('hex');
     }
     setInputValue(newColorValue);
+    validation.commitValidation();
   };
 
   let increment = () => {

packages/@react-stately/numberfield/src/useNumberFieldState.ts

@@ -173,6 +173,7 @@ export function useNumberFieldState(
 
     // in a controlled state, the numberValue won't change, so we won't go back to our old input without help
     setInputValue(format(value === undefined ? clampedValue : numberValue));
+    validation.commitValidation();
   };
 
   let safeNextStep = (operation: '+' | '-', minMax: number = 0) => {

packages/react-aria-components/stories/ColorField.stories.tsx

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {ColorField, Input, Label} from 'react-aria-components';
+import {ColorField, FieldError, Input, Label} from 'react-aria-components';
 import React from 'react';
 
 export default {
@@ -28,9 +28,10 @@ export default {
 };
 
 export const ColorFieldExample = (args) => (
-  <ColorField {...args}>
+  <ColorField {...args} validate={(v) => (v?.getChannelValue('red') === 0 ? 'Invalid value' : null)}>
     <Label>{args.label}</Label>
     <Input style={{display: 'block'}} />
+    <FieldError />
   </ColorField>
 );
 

packages/react-aria-components/stories/NumberField.stories.tsx

@@ -10,8 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import {Button, Group, Input, Label, NumberField} from 'react-aria-components';
-import React from 'react';
+import {Button, FieldError, Group, Input, Label, NumberField, NumberFieldProps} from 'react-aria-components';
+import React, {useState} from 'react';
 
 export default {
   title: 'React Aria Components'
@@ -27,13 +27,43 @@ export const NumberFieldExample = {
     isWheelDisabled: false
   },
   render: (args) => (
-    <NumberField {...args}>
+    <NumberField {...args} validate={(v) => (v & 1 ? 'Invalid value' : null)}>
       <Label>Test</Label>
       <Group style={{display: 'flex'}}>
         <Button slot="decrement">-</Button>
         <Input />
         <Button slot="increment">+</Button>
       </Group>
+      <FieldError />
     </NumberField>
   )
 };
+
+function NumberFieldControlled(props: NumberFieldProps) {
+  const [value, setValue] = useState(props.defaultValue);
+  return (
+    <NumberField {...props} validate={(v) => (v & 1 ? 'Invalid value' : null)} value={value} onChange={setValue}>
+      <Label>Test</Label>
+      <Group style={{display: 'flex'}}>
+        <Button slot="decrement">-</Button>
+        <Input />
+        <Button slot="increment">+</Button>
+      </Group>
+      <FieldError />
+    </NumberField>
+  );
+}
+
+export const NumberFieldControlledExample = {
+  args: {
+    defaultValue: 0,
+    minValue: 0,
+    maxValue: 100,
+    step: 1,
+    formatOptions: {style: 'currency', currency: 'USD'},
+    isWheelDisabled: false
+  },
+  render: (args) => (
+    <NumberFieldControlled {...args} />
+  )
+};