How to make mui autocomplete always open in react js?

Hi Friends 👋,

Welcome To aGuideHub!

To make mui autocomplete always open in React js, you will use onOpen={() => setOpen(true)}. It will make mui autocomplete always open in react js.

Today, I am going to show you, how to make mui autocomplete always open in react js.

Installation

Install the following packages to use make mui autocomplete always open in react js.

npm

npm install @mui/material @emotion/react @emotion/styled

yarn

yarn add @mui/material @emotion/react @emotion/styled

MUI material make mui autocomplete always open example.

The code below is an example of a Material UI autocomplete that is always open. You have to import @mui material autocomplete and use this code onOpen={() => setOpen(true)}. We will see autocomplete always opened.

App.js

import * as React from 'react';
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';

export default function ComboBox() {

const [open, setOpen] = React.useState(true);

  return (
      <Autocomplete
      options={['Option 1', 'Option 2', 'Option 3']}
      open={open}
      onOpen={() => setOpen(true)}
      // onClose={() => setOpen(false)}
      sx={{ width: 300 }}
      renderInput={(params) => (
      <TextField {...params} label="always open" variant="outlined" />
      )}
    />
  );
}

If you want to autoclose then this code has to be used.

onClose={() => setOpen(false)}

In the above code example, I have used the @mui/material component and made mui autocomplete always open in react js.

Check the output of the above code example.

All the best 👍