[material-ui] Corrected generic type definition in SelectChangeEvent (#45941)

Author: SuyashShukla0007

packages/mui-material/src/Select/Select.spec.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import Select, { SelectChangeEvent, SelectProps } from '@mui/material/Select';
 import MenuItem from '@mui/material/MenuItem';
 import { createTheme } from '@mui/material/styles';
+import { expectType } from '@mui/types';
 
 function genericValueTest() {
   function handleChangeWithSameTypeAsSelect(event: SelectChangeEvent<number>) {}
@@ -199,3 +200,25 @@ const AppSelect = <T extends string>(props: Props<T>) => {
 
 // test for applying Select's static muiName property type to wrapper components
 AppSelect.muiName = Select.muiName;
+
+<Select<'option1' | 'option2'>
+  value="option1"
+  onChange={(event) => {
+    expectType<'option1' | 'option2', typeof event.target.value>(event.target.value);
+  }}
+>
+  <MenuItem value="option1" />
+  {/* Whoops. The value in onChange won't be a string */}
+  <MenuItem value="option2" />
+</Select>;
+
+<Select<number | ''>
+  value={1}
+  onChange={(event) => {
+    expectType<number | '', typeof event.target.value>(event.target.value);
+  }}
+>
+  <MenuItem value={1} />
+  {/* Whoops. The value in onChange won't be a string */}
+  <MenuItem value={2} />
+</Select>;

packages/mui-material/src/Select/SelectInput.d.ts

@@ -8,9 +8,12 @@ import { MenuProps } from '../Menu';
  * The type of event depends on what caused the change.
  * For example, when the browser auto-fills the `Select` you'll receive a `React.ChangeEvent`.
  */
-export type SelectChangeEvent<Value = string> =
-  | (Event & { target: { value: Value; name: string } })
-  | React.ChangeEvent<HTMLInputElement>;
+
+export type SelectChangeEvent<Value = string> = Value extends (string & {}) | number
+  ?
+      | React.ChangeEvent<Omit<HTMLInputElement, 'value'> & { value: Value }>
+      | (Event & { target: { value: Value; name: string } })
+  : React.ChangeEvent<HTMLInputElement> | (Event & { target: { value: Value; name: string } });
 
 export interface SelectInputProps<Value = unknown> {
   autoFocus?: boolean;