MUI Autocomplete, scroll with keyboard need highlight

Question

Using the Autocomplete component in MUI. When scrolling through the options list using the keyboard, there is no visual indicator as to which row of options you are on. Without this, using keyboard is not very useful.
For example if you type a few letters into the Autocomplete textfield it may show several options in the filtered list. It would be nice to use the down arrow on the keyboard to select the desired option and press enter. You can do all of that, but without a highlight you have no idea which row you are on before pressing the enter key. Therefore, using the mouse to select is required. Which makes data entry slower. Is there something built in that I missed to enable this or is there some CSS override I can implement to have this?

Any help would be appreciated.

Answer 1

The default focus styles for v4 Autocomplete can be found here: https://github.com/mui-org/material-ui/blob/v4.12.3/packages/material-ui-lab/src/Autocomplete/Autocomplete.js#L213.

Here's the relevant portion:

option: {
    '&[data-focus="true"]': {
      backgroundColor: theme.palette.action.hover,
    }
}

Here's an example of customizing it using withStyles:

import React from "react";
import TextField from "@material-ui/core/TextField";
import MuiAutocomplete from "@material-ui/lab/Autocomplete";
import { withStyles } from "@material-ui/core/styles";

const Autocomplete = withStyles({
  option: {
    '&[data-focus="true"]': {
      backgroundColor: "rgba(0, 0, 0, 0.12)"
    }
  }
})(MuiAutocomplete);
export default function ComboBox() {
  return (
    <Autocomplete
      id="combo-box-demo"
      options={top100Films}
      getOptionLabel={(option) => option.title}
      style={{ width: 300 }}
      renderInput={(params) => (
        <TextField {...params} label="Combo box" variant="outlined" />
      )}
    />
  );
}

You can also customize this via the theme:

import React from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";
import { createTheme, ThemeProvider } from "@material-ui/core/styles";

const theme = createTheme({
  overrides: {
    MuiAutocomplete: {
      option: {
        '&[data-focus="true"]': {
          backgroundColor: "rgba(0, 0, 0, 0.12)"
        }
      }
    }
  }
});
export default function ComboBox() {
  return (
    <ThemeProvider theme={theme}>
      <Autocomplete
        id="combo-box-demo"
        options={top100Films}
        getOptionLabel={(option) => option.title}
        style={{ width: 300 }}
        renderInput={(params) => (
          <TextField {...params} label="Combo box" variant="outlined" />
        )}
      />
    </ThemeProvider>
  );
}

The examples above change both the hover and focus styling (controlled by the same data-focus attribute in v4) to be a little darker.

In v5 the focus styling is handled differently and is darker for keyboard focus than for hover focus.