Have you ever tried to hide the area that you don’t want its appearance? Today we will explore the Reactjs action and what is the problem if you don’t want the selected choices not to appear in the line of Material UI Autocomplete in Reactjs. This issue can be challenging to fix, but a simple solution can help. This article will analyze the reasons and solution for this problem in Reactjs. Let’s explore more now in the following sections!

Why do the selected options show in the area of Material UI Autocomplete? 

ReactJS gives smooth solutions to some of front-end programming’s most continuous issues; it allows you to design dynamic and collective web apps with ease. ReactJS is quick, scalable, powerful, flexible and has a strong developer community that’s quickly growing. Let’s see the problem in detail in React.

You don’t prefer having the tags of the picked options from the input environment. You assume that it can be solved at the renderInput. The limitTags support but these options still appear from the input environment when it’s picked out. Below is command example like:

import React 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 CheckBoxIcon from '@material-ui/icons/CheckBox'; 
const icon = <CheckBoxOutlineBlankIcon fontSize="small" />; 
const checkedIcon = <CheckBoxIcon fontSize="small" />; 
export default function CheckboxesTags() { 
  return ( 
    <Autocomplete 
      multiple 
      id="checkboxes-tags-demo" 
      options={top100Films} 
      disableCloseOnSelect 
      getOptionLabel={(option) => option.title} 
      renderOption={(option, { selected }) => ( 
        <React.Fragment> 
          <Checkbox 
            icon={icon} 
            checkedIcon={checkedIcon} 
            style={{ marginRight: 8 }} 
            checked={selected} 
          /> 
          {option.title} 
        </React.Fragment> 
       )}
      style={{ width: 500 }} 
      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: '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 } 
];

Quick solution for fixing this problem

Use the react-autocomplete module to build an autocomplete component in React. When a user types, the react-autocomplete module’s properties, methods, and events can cause an ajax call to fetch the list items and present them inside the render menu. React allows autocompleting implementation in the user’s filtering and presentation of the suggestions.

If you don’t want the autoComplete to appear as the brand inside TextField, insert <AutoComplete renderTags={() => null} /> in your field. It does work, that’s right? Remember the correct command/ code to put it in and save for the next time if it gets back.

This method is very simple, isn’t it? However, its efficiency is very enormous. It helps you resolve your error and your program will run well without any errors. So, what are you waiting without applying it for your problem to get your desired results?

Conclusion 

We hope you will enjoy our article on Recommendation to get the selected choices not to appear in input area in Material UI Autocomplete. If you have any additional questions or comments for us, please leave them in the comment box below. Thank you for reading our posts and we are always excited when one of our articles is able to provide useful information on a topic like this lesson. See you!

Read more

→ Recommendations for the “typeerror: list indices must be integers or slices, not tuple” error