Breaking News: Grepper is joining You.com. Read the official announcement!

material ui autocomplete clear input

Bolt answered on July 21, 2024 Popularity 1/10 Helpfulness 1/10

answer material ui autocomplete clear input

material ui autocomplete clear input

Comment

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

const options = ['Option1', 'Option2', 'Option3'];


function ClearableAutocomplete() {
  const [value, setValue] = useState(null);
  const [inputValue, setInputValue] = useState('');

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  const handleInputChange = (event, newInputValue) => {
    setInputValue(newInputValue);
  };

  const handleClear = () => {
    setValue(null); // Clears the selected value
    setInputValue(''); // Clears the input value
  };

  return (
    <div>
      <Autocomplete
        value={value}
        onChange={handleChange}
        inputValue={inputValue}
        onInputChange={handleInputChange}
        options={options}
        renderInput={(params) => <TextField {...params} label="Autocomplete" />}
      />
      <button onClick={handleClear}>Clear Input</button>
    </div>
  );

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: stackoverflow.com

Tags: autocomplete input javascript material-ui

Link to this answer
Share Copy Link

Contributed on Jul 21 2024

Bolt

0 Answers Avg Quality 2/10

material ui autocomplete clear input

Contents

More Related Answers

material ui autocomplete clear input

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.