How to set Select component in Material-UI to loose its focus state after selecting one of its item

Question

Expected behavior:

After selecting an item, Menu list will be close immediately and Select component loses its focus state with borderBottom become 1px solid and backgroundColor become white.

Current behavior:

Select behavior after selecting an item

As shown in the image above, the borderBottom is 2px solid and the backgroundColor isn't white which are indicating the Select component is in a focus state.

What should I do to achive the expected behavior?

Additional Explanation:

Actually what annoys me is the focus appearance of the Select component, not the focus itself, What I want is the behavior like in fonts.google.com. After selecting a style (e.g. Bold 700), yeah the Select component still in focus state but it doesn't show any sign of focus and that is what I actually want.

Answer 1

Below is an example showing how to customize the focus appearance of Select.

You can find some explanation about the underline customization in my answer here: How do I custom style the underline of Material-UI without using theme?

import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import Input from "@material-ui/core/Input";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";

const styles = theme => ({
  formControl: {
    margin: theme.spacing.unit,
    minWidth: 120
  },
  select: {
    "&:focus": {
      backgroundColor: "white"
    }
  },
  selectInput: {
    "&:hover:not($disabled):not($focused):not($error):before": {
      borderBottomWidth: 1
    },
    "&:after": {
      borderBottomWidth: 1
    }
  },
  disabled: {},
  focused: {},
  error: {}
});

class SimpleSelect extends React.Component {
  state = {
    age: ""
  };

  handleChange = event => {
    this.setState({ [event.target.name]: event.target.value });
  };

  render() {
    const { classes } = this.props;
    const selectInputClasses = {
      root: classes.selectInput,
      disabled: classes.disabled,
      focused: classes.focused,
      error: classes.error
    };

    return (
      <FormControl className={classes.formControl}>
        <InputLabel htmlFor="age-simple">Age</InputLabel>
        <Select
          value={this.state.age}
          onChange={this.handleChange}
          input={<Input classes={selectInputClasses} />}
          inputProps={{
            name: "age",
            id: "age-simple",
            classes: { select: classes.select }
          }}
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    );
  }
}

SimpleSelect.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(SimpleSelect);