How to close mui autocomplete on select of option in react j?

Hi Friends 👋,

Welcome To aGuideHub!

To close mui autocomplete on select of option in React js, you will use state and set you will use react state and set state value in state value in the autocomplete to onchange attribute. So whenever the user select the option the selected value will store in the state. Now, we can use this state value to user show in the application.

Today, I am going to show you, how to close mui autocomplete on select of option in react js.

Installation

Install the following packages to use close mui autocomplete on select of option in react js.

npm

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

yarn

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

MUI material close mui autocomplete on select of option example.

The code below is an example of a Material UI autocomplete that is always open. You have to import @mui material autocomplete and state and set you will use react state and set state value in state value in the autocomplete to onchange attribute. it will close mui autocomplete on select of option.

App.js

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

export default function ComboBox() {
  const [value, setValue] = useState('');
  const [open, setOpen] = React.useState(true);

  return (
    <Autocomplete
      open={open}
      onOpen={() => {
        setOpen(true);
      }}
      onClose={() => {
        setOpen(false);
      }}
      value={value}
      onChange={(event, newValue) => {
        setValue(newValue);
      }}
     
      options={['Option 1', 'Option 2', 'Option 3']}
      renderInput={params => (
        <TextField {...params} label="Combo box" variant="outlined" />
      )}
    />
  );
}

In the above code example, I have used the @mui/material component and close mui autocomplete on select of option in react js.

Check the output of the above code example.

All the best 👍