fix(react-spinbutton): slot input handler set value (#33680)

Author: carlamntn

change/@fluentui-react-spinbutton-a56360e5-91b4-443c-90d7-d16c9a672862.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix spinbutton test",
+  "packageName": "@fluentui/react-spinbutton",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-spinbutton/library/src/components/SpinButton/SpinButton.test.tsx

@@ -554,7 +554,7 @@ describe('SpinButton', () => {
       userEvent.click(decrementButton);
 
       expect(onChange).toHaveBeenCalledTimes(2);
-      expect(onChange.mock.calls[1][1]).toEqual({ value: -1, displayValue: undefined });
+      expect(onChange.mock.calls[1][1]).toEqual({ value: 0, displayValue: undefined });
     });
 
     it('calls on change when defaultValue is `null` with min when uncontrolled', () => {

packages/react-components/react-spinbutton/library/src/components/SpinButton/useSpinButton.tsx

@@ -154,11 +154,13 @@ export const useSpinButton_unstable = (props: SpinButtonProps, ref: React.Ref<HT
   };
 
   const handleIncrementMouseDown = (e: React.MouseEvent<HTMLButtonElement>) => {
+    commit(e, currentValue, textValue);
     internalState.current.spinState = 'up';
     stepValue(e, 'up');
   };
 
   const handleDecrementMouseDown = (e: React.MouseEvent<HTMLButtonElement>) => {
+    commit(e, currentValue, textValue);
     internalState.current.spinState = 'down';
     stepValue(e, 'down');
   };
@@ -231,10 +233,12 @@ export const useSpinButton_unstable = (props: SpinButtonProps, ref: React.Ref<HT
     if (valueChanged) {
       roundedValue = precisionRound(newValue!, precision);
       setCurrentValue(roundedValue);
+      internalState.current.value = roundedValue;
     } else if (displayValueChanged && !isControlled) {
       const nextValue = parseFloat(newDisplayValue as string);
       if (!isNaN(nextValue)) {
         setCurrentValue(precisionRound(nextValue, precision));
+        internalState.current.value = precisionRound(nextValue, precision);
       }
     }
 
@@ -323,6 +327,7 @@ export const useSpinButton_unstable = (props: SpinButtonProps, ref: React.Ref<HT
   state.input['aria-valuemax'] = max;
   state.input['aria-valuetext'] = state.input['aria-valuetext'] ?? ((value !== undefined && displayValue) || undefined);
   state.input.onChange = mergeCallbacks(state.input.onChange, handleInputChange);
+  state.input.onInput = mergeCallbacks(state.input.onInput, handleInputChange);
   state.input.onBlur = mergeCallbacks(state.input.onBlur, handleBlur);
   state.input.onKeyDown = mergeCallbacks(state.input.onKeyDown, handleKeyDown);
   state.input.onKeyUp = mergeCallbacks(state.input.onKeyUp, handleKeyUp);