NumberField onChange before onBlur (#3207)

NumberField onChange before onBlur

Author: snowystinger

packages/@react-aria/numberfield/src/useNumberField.ts

@@ -70,7 +70,7 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
     validationState,
     label,
     formatOptions,
-    onBlur,
+    onBlur = () => {},
     onFocus,
     onFocusChange,
     onKeyDown,
@@ -204,8 +204,8 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
 
   let inputProps = mergeProps(
     spinButtonProps,
-    textFieldProps,
     focusProps,
+    textFieldProps,
     {
       // override the spinbutton role, we can't focus a spin button with VO
       role: null,

packages/@react-spectrum/numberfield/test/NumberField.test.js

@@ -32,7 +32,7 @@ describe('NumberField', function () {
   let onKeyUpSpy = jest.fn();
 
   beforeAll(() => {
-    jest.useFakeTimers('legacy');
+    jest.useFakeTimers();
   });
 
   afterAll(() => {
@@ -283,6 +283,17 @@ describe('NumberField', function () {
     expect(onBlurSpy).toHaveBeenCalledTimes(2); // blur spy is called after each blur
   });
 
+  it.each`
+    Name
+    ${'NumberField'}
+  `('$Name fires state change then blur', () => {
+    let {textField} = renderNumberField({onChange: onChangeSpy, onBlur: onBlurSpy, step: 5});
+    act(() => {textField.focus();});
+    typeText(textField, '3');
+    userEvent.tab();
+    expect(onChangeSpy.mock.invocationCallOrder[0]).toBeLessThan(onBlurSpy.mock.invocationCallOrder[0]);
+  });
+
   it.each`
     Name
     ${'NumberField'}