I tried implementing a dropdown list with Material-UI, including an icon on the left side. However, after following the documentation and adding the code for the icon, the dropdown list stopped working.
InputProps={{
startAdornment: (
<InputAdornment position="start">
<svg
xmlns="http://www.w3.org/2000/svg"
width="60"
zoomAndPan="magnify"
viewBox="0 0 45 44.999999"
height="60"
preserveAspectRatio="xMidYMid meet"
version="1.0"
className="fill-jacarta-700 dark:fill-jacarta-100 mr-1 h-6 w-6 transition-colors group-hover:fill-white"
>
<defs>
<clipPath id="d11c128308">
<path
d="M 2.625 4 L 32 4 L 32 41 L 2.625 41 Z M 2.625 4 "
clip-rule="nonzero"
/>
</clipPath>
<clipPath id="d384e1589d">
<path
d="M 2.625 0 L 32 0 L 32 7 L 2.625 7 Z M 2.625 0 "
clip-rule="nonzero"
/>
</clipPath>
<clipPath id="5e6ef96cde">
<path
d="M 2.625 38 L 32 38 L 32 45 L 2.625 45 Z M 2.625 38 "
clip-rule="nonzero"
/>
</clipPath>
<clipPath id="1397b892a3">
<path
d="M 38 14 L 42.375 14 L 42.375 21 L 38 21 Z M 38 14 "
clip-rule="nonzero"
/>
</clipPath>
</defs>
.........
Removing this specific code made the list appear correctly. Here is the complete code:
import React from "react";
import TextField from "@mui/material/TextField";
import Autocomplete from "@mui/material/Autocomplete";
import { styled } from "@mui/system";
import { InputAdornment } from "@mui/material";
const GroupItems = styled("ul")({
padding: 0,
listStyleType: "none", // Remove default list styling
});
const RenderGroup = ({ top100Films }) => {
const options = top100Films.map((option) => {
const firstLetter = option.title[0].toUpperCase();
return {
firstLetter: /[0-9]/.test(firstLetter) ? "0-9" : firstLetter,
...option,
};
});
return (
<Autocomplete
id="grouped-demo"
options={options.sort(
(a, b) => -b.firstLetter.localeCompare(a.firstLetter)
)}
groupBy={(option) => option.firstLetter}
getOptionLabel={(option) => option.title}
sx={{ width: 300 }}
renderInput={(params) => (
<TextField
{...params}
label="Campaigns"
InputProps={{
startAdornment: (/* Icon Code Removed */),
}}
/>
)}
renderGroup={(params) => (
<li key={params.key}>
<GroupItems className="space-y-2">{params.children}</GroupItems>
</li>
)}
/>
);
};
export default RenderGroup;