Typescript React <Select> onChange handler type error

This is proper for the latest MUI 5 / Select

  import { SelectChangeEvent } from "@mui/material";

   const handleOnChange = (event: SelectChangeEvent<unknown>) => {
    const value = event.target.value as YourEnumType;
  };

None of these are correct IMO. Casting "as" should generally be avoided since you'll lose the type checking you get from letting the code infer the type. It's also weird to explicitly type it as unknown only to later cast it to a string. Ideally you'd use a typeguard if you truly didn't know. To be clear, if somehow event.target.value is actually a boolean and we're casting it to a string here we won't know until the app throws a bug later down the line.

The docs (https://mui.com/material-ui/api/select/) have this as the onChange signature:

function(event: SelectChangeEvent<T>, child?: object) => void

event: The event source of the callback. You can pull out the new value by accessing event.target.value (any). 

Warning: This is a generic event not a change event unless the change event is caused by browser autofill.

child: The react element that was selected when native is false (default).

So with that in mind it becomes:

const handleCountryChange = (event: SelectChangeEvent) => {
  setValues({...values, country: event.target.value });
};

We don't need to define T here explicitly as a string because it's a string by default. HTML inputs read in as strings.

Had that issue while using Material UI. Didn't know they had their own types

import { SelectChangeEvent } from '@mui/material/Select';

const changeSymbol = (event: SelectChangeEvent) => {
        console.log(event)
}

Seemed counterintuitive for me either, but I had to do this:

const handleChange = (e: ChangeEvent<{ value: string | unknown }>) => formik.setFieldValue('field', e.target.value)

im using import Select from '@mui/joy/Select'; import Option, { optionClasses } from '@mui/joy/Option';

all the solutions from the above didn't work

this did work

const handleChange = (event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent | React.FocusEvent<Element, Element> | null, value: any) => { setSort(value); };

I don't know where it's documented, but the Select module also exports SelectChangeEvent. This is what I used to get it:

import Select, {SelectChangeEvent} from '@mui/material/Select';

    const handleGenerationSelectChange = (event: SelectChangeEvent<string>, child: React.ReactNode) => {
    let genHolder = currentGeneration;
    genHolder.source = event.target.value as string;
    setCurrentGeneration({...genHolder});
};

I also encountered such an issue in my app. Here is how I solved it (I provide you the whole example):

import { useState } from 'react'
import SelectState from './components/SelectState';
import { SelectChangeEvent } from '@mui/material';

const App = () => {
  const [state, setState] = useState('');
  
  const handleStateChange = (event: SelectChangeEvent) => {
    setState(event.target.value as string);
  }

  return (
    <div className='bg-[#AB92BF] w-[100wh] h-[100vh] p-4'>
      <SelectState state={state} onSelectChange={(event: SelectChangeEvent) => handleStateChange(event)} />
    </div>
  )
}

export default App;



import { Box, FormControl, InputLabel, MenuItem, Select } from '@mui/material'
import { SelectStateProps } from '../interface'

const SelectState = ({ state, onSelectChange }: SelectStateProps) => {
  return (
    <Box sx={{ minWidth: 220 }}>
      <FormControl fullWidth>
        <InputLabel id="state-select-label">State</InputLabel>
        <Select
          labelId="state-select-label"
          id="state-select"
          value={state}
          label="Age"
          onChange={onSelectChange}
        >
          <MenuItem value={"America/Los_Angeles"}>Los Angeles</MenuItem>
          <MenuItem value={"America/New_York"}>New York</MenuItem>
          <MenuItem value={"America/Detroit"}>Detroit</MenuItem>
        </Select>
      </FormControl>
    </Box>
  )
}

export default SelectState



import { SelectChangeEvent } from "@mui/material";

export interface SelectStateProps {
  state: string;
  onSelectChange: (event: SelectChangeEvent) => void;
}

After looking at the answers above and not being satisfied with them, I discovered you could just type the Select object with the following code:

const [booleanValue, setBooleanValue] = useState<boolean>(false);
const BooleanSelect = Select<boolean>;
const handleBooleanSelect = (event: SelectChangeEvent<boolean>) {
    setBooleanvalue(event.value);
}

...
<FormControl>
<InputLabel>Enable Feature</InputLabel>
<BooleanSelect value={booleanValue} onChange={handleBooleanSelect}>
  <MenuItem value="true">Enabled</MenuItem>
  <MenuItem value="false">Disabled</MenuItem>
</BooleanSelect>
</FormControl>