How to remove the second x button, the left one inside a TextField inside a Autocomplete?

Question

I have a search bar that uses Autocomplete from material ui to provide suggestions, and inside of it i have text field where I take text as input.

The only problem is that when i type anything in the TextField I can see 2 clear buttons (x button) one on the left of the loading screen and one on the right, and when the loading screen disappears i get 2 clear buttons next to each other. I want to remove the one on the left as it looks bad, and I don't know why it's there.

Search.jsx:

<div className={searchClasses.search}>
      <Autocomplete
        options={isEmpty ? [] : suggestionsList}
        freeSolo
        style={{width: "100%"}}
        getOptionLabel={(option) => option.title}
        renderInput={(params) => (
          <TextField
            {...params}
            variant="outlined"
            margin="normal"
            required
            fullWidth
            autoFocus
            loading={loading}
            style={{margin: 0}}
            classes={{ notchedOutline: classes.input }}
            onChange={handleOnChange}
            onKeyDown={e => handleKeyDown(e)}
            placeholder="Search..."
            type="search"
            InputProps={{
              ...params.InputProps,
              startAdornment: (
                <InputAdornment position="start">
                  <SearchIcon />
                </InputAdornment>
              ),
              endAdornment: (
                <React.Fragment>
                  {loading ? <CircularProgress color="inherit" size={20} /> : null}
                  {params.InputProps.endAdornment}
                </React.Fragment>
              ),
              classes: { notchedOutline: classes.noBorder }
            }}
          />
        )}
        renderOption={(option, { inputValue }) => {
          const matches = match(option.title, inputValue);
          const parts = parse(option.title, matches);

          return (
            <div>
              {parts.map((part, index) => (
                <span
                  key={index}
                  style={{ fontWeight: part.highlight ? 700 : 400 }}
                >
                  {part.text}
                </span>
              ))}
            </div>
          );
        }}
      />
</div>

Answer 1

Solution

Create a new CSS stylesheet (let say styles.css) and add the following code:

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

Next, import this stylesheet at the beginning of your Search.jsx:

import "./styles.css";

/* Your code here ... */

Explanation

The left "X" cancel button is present because Webkit-based browsers such as Chrome and Safari automatically adds the cancel button to all <input type="search"> elements. Since your TextField element has the prop type="search", it renders <input type="search"> to the screen and hence your browser automatically adds the "X" button.

The default "X" button can be selected using the ::-webkit-search-cancel-button psuedo-element selector. In our style.css, we select all default "X" buttons in all <input type="search"> elements and we hide them using -webkit-appearance: none;