How to remove Clear button on Autocomplete and show only text

Question

I'm new to react-virtualization and Autocomplete. I have currently build a list which shows multiple texts when the checkbox is selected. Here is my code: https://codesandbox.io/s/material-demo-forked-1qzd3?file=/demo.tsx

I want to show only one text when anything is selected from the list and also remove the clear button and grey background attached to it.

score 41 · Answer 1 · edited Jan 27 '21 at 11:54

41

There is a dedicated prop to disable the Icon. try the prop "disableClearable" on the Autocomplete component it is here in the documentation:

<Autocomplete
    {...defaultProps}
    id="disable-clearable"
    disableClearable
    renderInput={(params) => <TextField {...params} label="disableClearable" 
    margin="normal" />}
/>

edited Jan 27 '21 at 11:54

Mayank Pandeyz

25,704
4
40
59

answered Jan 25 '21 at 17:05

Louie Adauto

519
4
3

1

The problem with this is that it prevents the clearing behavior at all. If you just want to remove the X icon because of space constraints there doesn't seem to be a 'proper' way to do it at the moment - I ended up using CSS to hide the class .MuiAutocomplete-clearIndicator and descrease the rightPadding on..MuiInput-root – sirclesam Jun 30 '22 at 19:58
1

You can pass `closeIcon={null}` as a prop to disable close icon – devanil Nov 26 '22 at 09:48
doesn't work in freeSolo mode – Anil_M Dec 20 '22 at 03:04

score 1 · Answer 2 · answered Jun 30 '22 at 20:32

As of MUIv5 Autocomplete isn't in lab anymore and does things a bit different and gives you more customization on the display. Both the clear icon and the downarrow are in the InputProps.endAdornment that is passed into the renderInput function. So you can remove it before spreading to to TextField

 <Autocomplete
  options={options}
  renderInput={params => {
    const InputProps = { ...params.InputProps };
    InputProps.endAdornment = null;
    return (
      <TextField    
        {...params}
        InputProps={InputProps}
      />
    );
  }}
  openOnFocus  
  />

Note how InputProps is after the {...params} spread.

If you do this you'll need to add 'openOnFocus' prop since the downarrow won't be there to click to open the autocomplete.

MUI also adds some paddingRight to .MuiInput-root class to make some space for the clearIcon and downArrow, so if you're tight on space you might need to remove those, I ended up using an !important css rule on the TextField class, but we're still using the old JSS way. Not sure what the proper emotion styling way to do it would be.

score 1 · Answer 3 · answered Sep 28 '22 at 07:10

Controlled MuiAutocomplete with typescript and setting disableClearable={true} can lead to an error in type checking (Error: value should be T or undefined).

This happened to me when my controlled value type definition was T | null.

In this situation just disableClearable={value !== null} solved the problem

score 0 · Answer 4 · answered Oct 05 '20 at 13:49

Try this :

import React, { useState } from "react";
import Checkbox from "@material-ui/core/Checkbox";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";
import CheckBoxOutlineBlankIcon from "@material-ui/icons/CheckBoxOutlineBlank";
import { ListItemText } from "@material-ui/core";
import CheckBoxIcon from "@material-ui/icons/CheckBox";
import MenuItem from "@material-ui/core/MenuItem";
import { List } from "react-virtualized";
import faker from "faker";

const icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
const checkedIcon = <CheckBoxIcon fontSize="small" />;

const ListboxComponent = React.forwardRef(function ListboxComponent(
  props,
  ref
) {
  const { children, role, ...other } = props;
  const itemCount = Array.isArray(children) ? children.length : 0;
  const itemSize = 36;

  return (
    <div ref={ref}>
      <div {...other}>
        <List
          height={250}
          width={300}
          rowHeight={itemSize}
          overscanCount={5}
          rowCount={itemCount}
          rowRenderer={(props) => {
            return React.cloneElement(children[props.index], {
              style: props.style
            });
          }}
          role={role}
        />
      </div>
    </div>
  );
});

const myDAta = Array.from(new Array(10000)).map(() => {
  return { name: faker.name.findName() };
});

myDAta.unshift({ name: "ALL" });

export default function CheckboxesTags() {
  const [selectedFilm, setSelectedFilm] = useState([]);
  const onCloseHandle = () => {
    console.log("Closed");
  };
  return (
    <Autocomplete
      id="checkboxes-tags-demo"
      ListboxComponent={ListboxComponent}
      options={myDAta}
      onChange={(e, film) => {
        console.log(e.target);
        setSelectedFilm(film);
      }}
      onClose={onCloseHandle}
      getOptionLabel={(option) => option.name}
      // fullWidth
      renderOption={(option) => <>{option.name}</>}
      closeIcon=""

      style={{ width: 300, maxHeight: "1px" }}
      renderInput={(params) => (
        <TextField
          {...params}
          variant="outlined"
          label="Checkboxes"
          placeholder="Favorites"
        />
      )}
    />
  );
}

// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
  { title: "All", year: 0 },
  { title: "The Shawshank Redemption", year: 1994 },
  { title: "The Godfather", year: 1972 },
  { title: "The Godfather: Part II", year: 1974 },
  { title: "The Dark Knight", year: 2008 },
  { title: "12 Angry Men", year: 1957 },
  { title: "Schindler's List", year: 1993 },
  { title: "Pulp Fiction", year: 1994 },
  { title: "The Lord of the Rings: The Return of the King", year: 2003 },
  { title: "The Good, the Bad and the Ugly", year: 1966 },
  { title: "Fight Club", year: 1999 },
  { title: "The Lord of the Rings: The Fellowship of the Ring", year: 2001 },
  { title: "Star Wars: Episode V - The Empire Strikes Back", year: 1980 },
  { title: "Forrest Gump", year: 1994 },
  { title: "Inception", year: 2010 },
  { title: "The Lord of the Rings: The Two Towers", year: 2002 },
  { title: "One Flew Over the Cuckoo's Nest", year: 1975 },
  { title: "Goodfellas", year: 1990 },
  { title: "The Matrix", year: 1999 },
  { title: "Seven Samurai", year: 1954 },
  { title: "Star Wars: Episode IV - A New Hope", year: 1977 },
  { title: "City of God", year: 2002 },
  { title: "Se7en", year: 1995 },
  { title: "The Silence of the Lambs", year: 1991 },
  { title: "It's a Wonderful Life", year: 1946 },
  { title: "Life Is Beautiful", year: 1997 },
  { title: "The Usual Suspects", year: 1995 },
  { title: "Léon: The Professional", year: 1994 },
  { title: "Spirited Away", year: 2001 },
  { title: "Saving Private Ryan", year: 1998 },
  { title: "Once Upon a Time in the West", year: 1968 },
  { title: "American History X", year: 1998 },
  { title: "Interstellar", year: 2014 }
];

This just hides the close icon which I'm fine with. But how to remove the close icon and grey background surrounding the text? @Priyanka Panjabi — iCodeByte, Oct 05 '20 at 13:59
This will allow you to make only a single selection at a time without close icon and background . Do you want to add multi selection ? — Priyanka Panjabi, Oct 05 '20 at 14:02
I'm doing multiple selections with checkboxes as I shared the sandbox link. So yes, I will want to do it for multiple selections with checkboxes @Priyanka Panjabi — iCodeByte, Oct 05 '20 at 14:22
But you have mentioned it "I want to show only one text when anything is selected from the list" — Priyanka Panjabi, Oct 05 '20 at 14:24
Yes. So if there are checkboxes and multiple selections then I should show only the first one selected and not others and with no close button and background. Just the text. Sorry for my line. Its selection from multiple data. — iCodeByte, Oct 05 '20 at 14:42

score 0 · Answer 5 · edited Dec 16 '20 at 11:55

0

Return all params, without endAdornment in TextField

renderInput={(params) => <TextField {...params} 
InputProps={{ ...params.InputProps, endAdornment : null }}
onPaste={handlePaste} variant='outlined'/>}

edited Dec 16 '20 at 11:55

jps

20,041
15
75
79

answered Dec 16 '20 at 08:49

ZiMan

1

score 0 · Answer 6 · answered Apr 04 '23 at 19:01

I resolved this in Material UI V5 and using freeSolo.

You have to add disableClearable={true} to Autocomplete and then you should remove type:text from Textfield.

You should have something like this.

<Autocomplete
  disableClearable={true}
  freeSolo
  renderInput={(params) => (
    <TextField
      {...params}
      placeholder={placeholder}
    />
  )}
  name="input"
/>```

score 0 · Answer 7 · answered May 30 '23 at 14:51

We can use disableClearable property to enable or disable the clear icon in the auto complete.

<Autocomplete
    {...defaultProps}
    disableClearable={true/false}
/>

where

disableClearable - true (clear icon will be disabled)

disableClearable - false (clear icon will be enabled)

How to remove Clear button on Autocomplete and show only text

7 Answers7

Linked