material-ui TextField Input not working when Drawer is open

user_8423761 0
Viewed 1845

I'm using Material-UI Autcomplete component (Free solo version) and everything is working fine until i added resposive to the drawer variant={!matchesSM ? 'persistent' : null}.

<Drawer
  className={classes.drawer}
  variant={!matchesSM ? 'persistent' : null}
  anchor="left"
  open={sidebarOpen}
  classes={{
    paper: classes.drawerPaper,
  }}
  onClose={handleDrawerClose}
>

when opening the side drawer in tablet/mobile mode TextField Input is unresponsive.

here is some screenshot enter image description here enter image description here enter image description here

const textFieldHandler = () => {
  handleDrawerClose();
  inputRef.current.focus();
};

 <TextField
  {...params}
  ref={inputRef}
  onClick={textFieldHandler}
  placeholder="Search input"
  margin="dense"
...

Expected behavior

On tablet/mobile mode, when opening the drawer and clicking on the textfield, drawer should be closed and textfield should be focused.

Actual behavior

Autocomplete is not focused in tablet & mobile when drawer is opened.

I created this live running example to illustrate the problem:

  • Text Field only works when sidebar is closed

I can't figure it out why it's not working.

Any feedback about this issue ?

material-ui reactjs
2 Answers
user_97229500

In Toolbar.js you can have an onClick on Textfield and call handleDrawerClose

Working demo

Like this

<TextField
  {...params}
  onClick={handleDrawerClose}
  placeholder="Search input"
  margin="dense"
...

Edit: Based on comment.

If successfully focus on the auto complete and also open the suggestions, then we can use the Autocomplete props openOnFocus , clearOnBlurand inputRef prop of Textfield. Then in the onClick call focus() with-in setTimeout

<Autocomplete
  openOnFocus //<---here
  clearOnBlur //<---here
  freeSolo
  id="free-solo-2-demo"
  disableClearable
  options={top100Films.map(option => option.title)}
  renderInput={params => (
    <TextField
      inputRef={ref} //<---here
      {...params}
      onClick={e => {
        handleDrawerClose(); //<---here
        setTimeout(() => ref.current.focus()); //<---here
      }}
      placeholder="Search input"
      margin="dense"
      color="secondary"
     ...
user_132073940
Related