How to use onFocus event with select input in "Material UI"?

Question

How to add onFocus Event with select input in Material Ui. While I am try to add it, an error is being occurred.The select input field is not being focused while using onFocus event. But it is working with other types of input.

Here is a simple demo -

import {TextField, Button} from '@mui/material';

const Form = ({handleChange, handleFocus, handleBlur, handleSubmit}) => {
  return(
    <form onSubmit={handleSubmit}>
      <TextField
        fullWidth
        select
        onChange={handleChange}
        onFocus={handleFocus}
        onBlur={handleBlur}
       />
       <Button variant="contained" type="submit">Submit<Button>
    </form>
 )
}

export default Form;

Answer 1

you can use the InputProps prop to attach an event listener to the underlying input element.

import {TextField, Button} from '@mui/material';

const Form = ({handleChange, handleFocus, handleBlur, handleSubmit}) => {
  return(
    <form onSubmit={handleSubmit}>
      <TextField
        fullWidth
        select
        onChange={handleChange}
        InputProps={{
          onFocus: handleFocus,
          onBlur: handleBlur,
        }}
       />
       <Button variant="contained" type="submit">Submit<Button>
    </form>
 )
}

export default Form;