I am facing a challenge with removing the up and down arrow icons from a Material UI TextField that I adjusted using the Material UI documentation (https://material-ui.com/components/autocomplete/#autocomplete) Highlights section.
After trying various solutions found on stack overflow, such as (Remove the arrow and cross that appears for TextField type=“time” material-ui React) and (Remove the arrow and cross that appears for TextField type=“time” material-ui React), I was unsuccessful. This resulted in the following code:
App.js:
import React from "react";
import "./styles.css";
import { makeStyles } from "@material-ui/core/styles";
import Autocomplete from "@material-ui/lab/Autocomplete";
import parse from "autosuggest-highlight/parse";
import match from "autosuggest-highlight/match";
import { InputAdornment, TextField } from "@material-ui/core";
import SearchIcon from "@material-ui/icons/Search";
const useStyles = makeStyles(() => ({
noBorder: {
border: "none"
}
}));
export default function Highlights() {
const classes = useStyles();
return (
<Autocomplete
style={{ width: 300 }}
options={top100Films}
getOptionLabel={(option) => option.title}
renderInput={(params) => (
<TextField
{...params}
variant="outlined"
margin="normal"
required
fullWidth
autoFocus
classes={{ notchedOutline: classes.input }}
// onChange={handlePhoneNumberChange}
placeholder="Search..."
type="search"
InputProps={{
...params.InputProps,
startAdornment: (
<InputAdornment position="start">
<SearchIcon />
</InputAdornment>
),
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>
);
}}
/>
);
}
// 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 },
...
];
...
styles.css:
.App {
font-family: sans-serif;
text-align: center;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type="search"] {
-moz-appearance: textfield;
}
/* remove outsideof arrows button */
input[type="search"]::-webkit-outside-spin-button {
display: none;
}