How to avoid Material UI Select focus when option is chosen?

Question

I am trying to make an interface with a pair of Select and Input from Material UI components library. I want the current behaviour for my UI/UX in the next order: 1. User chose option from Select element 2. Inputwill be focused when user chose something from Select

You can see how it's works (see the second Select, because the first one is a native Select, and it's not suitable for my purpose): https://codesandbox.io/s/l4nq3pjjrm

The first one in the example above works great, but I need non-native variant.

How I can do that? Thanks.

P.S. Also, I found that there are another issues with that wrong Select behaviour, take a look for my github post for mo details. (https://github.com/mui-org/material-ui/issues/11964)

Answer 1

So if your problem is the focus after the value selection, try this:

1) Import MuiThemeProvider and createMuiTheme on your component:

import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';

2) Then Add this lines of code after your imports (override css):

const theme1 = createMuiTheme({
  overrides: {
    MuiSelect: {
      select: {
        "&:focus": {
          background: "$labelcolor"
        }
      }
    }
  }
});

3) And for the final step, wrap your component that you want to edit with this code:

<MuiThemeProvider theme={theme1}>

// Your Component here

</MuiThemeProvider>

I applied it on your code here

Answer 2

For some reason the top answer didn't work for me. For anyone else facing this, you can also do it this way:

className: {
    "& .MuiSelect-select:focus": {
        backgroundColor: white,
    },
},