fix(react-checkbox, react-input, react-select, react-spinbutton): merge Field control props in base hooks (#36312)

Author: dmytrokirpa

change/@fluentui-react-checkbox-2ca6c5d6-4811-4070-aded-61eba14ae02c.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: move Field control props to base hooks",
+  "packageName": "@fluentui/react-checkbox",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-input-2acf0c8e-b57c-403f-b8e2-06b1df6d2739.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: move Field control props to base hooks",
+  "packageName": "@fluentui/react-input",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-select-36e2824c-a3a4-4dcc-adb4-b0b589bc8d39.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: move Field control props to base hooks",
+  "packageName": "@fluentui/react-select",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-spinbutton-a3d28c04-3912-4039-aab4-d0003a1ade9a.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: move Field control props to base hooks",
+  "packageName": "@fluentui/react-spinbutton",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-checkbox/library/src/components/Checkbox/useCheckbox.tsx

@@ -32,9 +32,6 @@ import { useFocusWithin } from '@fluentui/react-tabster';
  * @param ref - reference to `<input>` element of Checkbox
  */
 export const useCheckbox_unstable = (props: CheckboxProps, ref: React.Ref<HTMLInputElement>): CheckboxState => {
-  // Merge props from surrounding <Field>, if any
-  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true });
-
   const { shape = 'square', size = 'medium', ...checkboxProps } = props;
 
   const state = useCheckboxBase_unstable(checkboxProps, ref);
@@ -88,6 +85,9 @@ export const useCheckboxBase_unstable = (
 ): CheckboxBaseState => {
   'use no memo'; // justified: compiler would optimize useCheckboxBase_unstable — manual opt-out to preserve runtime behavior
 
+  // Merge props from surrounding <Field>, if any
+  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true });
+
   const { disabled = false, required, labelPosition = 'after', onChange } = props;
 
   const [checked, setChecked] = useControllableState({

packages/react-components/react-input/library/src/components/Input/useInput.ts

@@ -16,8 +16,6 @@ import { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-co
  * @param ref - reference to `<input>` element of Input
  */
 export const useInput_unstable = (props: InputProps, ref: React.Ref<HTMLInputElement>): InputState => {
-  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true, supportsSize: true });
-
   const overrides = useOverrides();
 
   const { size = 'medium', appearance = overrides.inputDefaultAppearance ?? 'outline', ...baseProps } = props;
@@ -50,16 +48,20 @@ export const useInput_unstable = (props: InputProps, ref: React.Ref<HTMLInputEle
  * @param ref - User provided ref to be passed to the Input component.
  */
 export const useInputBase_unstable = (props: InputBaseProps, ref: React.Ref<HTMLInputElement>): InputBaseState => {
-  const { onChange } = props;
+  const fieldControlProps = useFieldControlProps_unstable(props, {
+    supportsLabelFor: true,
+    supportsRequired: true,
+    supportsSize: true,
+  });
 
   const [value, setValue] = useControllableState({
-    state: props.value,
-    defaultState: props.defaultValue,
+    state: fieldControlProps.value,
+    defaultState: fieldControlProps.defaultValue,
     initialState: '',
   });
 
   const nativeProps = getPartitionedNativeProps({
-    props,
+    props: fieldControlProps,
     primarySlotTagName: 'input',
     excludedPropNames: ['onChange', 'value', 'defaultValue'],
   });
@@ -71,17 +73,17 @@ export const useInputBase_unstable = (props: InputBaseProps, ref: React.Ref<HTML
       contentBefore: 'span',
       contentAfter: 'span',
     },
-    input: slot.always(props.input, {
+    input: slot.always(fieldControlProps.input, {
       defaultProps: {
         type: 'text',
         ref,
         ...nativeProps.primary,
       },
       elementType: 'input',
     }),
-    contentAfter: slot.optional(props.contentAfter, { elementType: 'span' }),
-    contentBefore: slot.optional(props.contentBefore, { elementType: 'span' }),
-    root: slot.always(props.root, {
+    contentAfter: slot.optional(fieldControlProps.contentAfter, { elementType: 'span' }),
+    contentBefore: slot.optional(fieldControlProps.contentBefore, { elementType: 'span' }),
+    root: slot.always(fieldControlProps.root, {
       defaultProps: nativeProps.root,
       elementType: 'span',
     }),
@@ -90,7 +92,7 @@ export const useInputBase_unstable = (props: InputBaseProps, ref: React.Ref<HTML
   state.input.value = value;
   state.input.onChange = useEventCallback(ev => {
     const newValue = ev.target.value;
-    onChange?.(ev, { value: newValue });
+    fieldControlProps.onChange?.(ev, { value: newValue });
     setValue(newValue);
   });
 

packages/react-components/react-select/library/src/components/Select/useSelect.tsx

@@ -17,9 +17,6 @@ import { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-co
  * @param ref - reference to the `<select>` element in Select
  */
 export const useSelect_unstable = (props: SelectProps, ref: React.Ref<HTMLSelectElement>): SelectState => {
-  // Merge props from surrounding <Field>, if any
-  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true, supportsSize: true });
-
   const overrides = useOverrides();
 
   const { appearance = overrides.inputDefaultAppearance ?? 'outline', size = 'medium', ...baseProps } = props;
@@ -40,6 +37,9 @@ export const useSelect_unstable = (props: SelectProps, ref: React.Ref<HTMLSelect
  * @param ref - reference to the `<select>` element in Select
  */
 export const useSelectBase_unstable = (props: SelectBaseProps, ref: React.Ref<HTMLSelectElement>): SelectBaseState => {
+  // Merge props from surrounding <Field>, if any
+  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true });
+
   const { defaultValue, value, select, icon, root, onChange } = props;
 
   const nativeProps = getPartitionedNativeProps({

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

@@ -52,6 +52,9 @@ export const useSpinButtonBase_unstable = (
   props: SpinButtonBaseProps,
   ref: React.Ref<HTMLInputElement>,
 ): SpinButtonBaseState => {
+  // Merge props from surrounding <Field>, if any
+  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true });
+
   const nativeProps = getPartitionedNativeProps({
     props,
     primarySlotTagName: 'input',
@@ -387,9 +390,6 @@ export const useSpinButtonBase_unstable = (
  * @param ref - reference to root HTMLElement of SpinButton
  */
 export const useSpinButton_unstable = (props: SpinButtonProps, ref: React.Ref<HTMLInputElement>): SpinButtonState => {
-  // Merge props from surrounding <Field>, if any
-  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true });
-
   const overrides = useOverrides();
 
   const { appearance = overrides.inputDefaultAppearance ?? 'outline', size = 'medium', ...baseProps } = props;