fix(Select): handle "defaultValue"

change/@fluentui-react-select-90ed0948-29e6-4dd8-8986-14df2d9b3158.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: handle \"defaultValue\"",
+  "packageName": "@fluentui/react-select",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-select/src/components/Select/Select.test.tsx

@@ -35,6 +35,18 @@ describe('Select', () => {
     expect(result.container).toMatchSnapshot();
   });
 
+  it('handles the defaultValue attribute', () => {
+    const { getByTestId } = render(
+      <Select defaultValue="B">
+        <option>A</option>
+        <option data-testid="option-b">B</option>
+        <option>C</option>
+      </Select>,
+    );
+
+    expect((getByTestId('option-b') as HTMLOptionElement).selected).toBeTruthy();
+  });
+
   it('handles the disabled attribute', () => {
     const { getByTestId } = render(<Select data-testid="select" disabled />);
     expect((getByTestId('select') as HTMLSelectElement).disabled).toBeTruthy();

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

@@ -13,12 +13,22 @@ import type { SelectProps, SelectState } from './Select.types';
  * @param ref - reference to the `<select>` element in Select
  */
 export const useSelect_unstable = (props: SelectProps, ref: React.Ref<HTMLSelectElement>): SelectState => {
-  const { select, icon, root, appearance = 'outline', onChange, size = 'medium' } = props;
+  const {
+    defaultValue,
+    value,
+    select,
+    icon,
+    root,
+    appearance = 'outline',
+
+    onChange,
+    size = 'medium',
+  } = props;
 
   const nativeProps = getPartitionedNativeProps({
     props,
     primarySlotTagName: 'select',
-    excludedPropNames: ['appearance', 'onChange', 'size'],
+    excludedPropNames: ['appearance', 'defaultValue', 'onChange', 'size', 'value'],
   });
 
   const state: SelectState = {
@@ -32,6 +42,8 @@ export const useSelect_unstable = (props: SelectProps, ref: React.Ref<HTMLSelect
     select: resolveShorthand(select, {
       required: true,
       defaultProps: {
+        defaultValue,
+        value,
         ref,
         ...nativeProps.primary,
       },
@@ -47,8 +59,7 @@ export const useSelect_unstable = (props: SelectProps, ref: React.Ref<HTMLSelect
   };
 
   state.select.onChange = useEventCallback(event => {
-    const value = (event.target as HTMLSelectElement).value;
-    onChange?.(event, { value });
+    onChange?.(event, { value: (event.target as HTMLSelectElement).value });
   });
 
   return state;

packages/react-components/react-select/src/stories/SelectInitialValue.stories.tsx

@@ -8,9 +8,9 @@ export const InitialValue = () => {
   return (
     <>
       <label htmlFor={selectId}>Color</label>
-      <Select id={selectId}>
+      <Select defaultValue="Green" id={selectId}>
         <option>Red</option>
-        <option selected>Green</option>
+        <option>Green</option>
         <option>Blue</option>
       </Select>
     </>