I want to show the list in the dropdown with material-ui by adding icon on the left. I did it by following the documentation but when I added this code dropdown list is not 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>
<g clip-path="url(#d11c128308)">
<path
d="M 30.269531 40.433594 L 3.371094 40.433594 C 2.925781 40.433594 2.625 40.132812 2.625 39.683594 L 2.625 5.316406 C 2.625 4.867188 2.925781 4.566406 3.371094 4.566406 L 30.269531 4.566406 C 30.71875 4.566406 31.019531 4.867188 31.019531 5.316406 L 31.019531 11.292969 C 31.019531 11.742188 30.71875 12.039062 30.269531 12.039062 C 29.824219 12.039062 29.523438 11.742188 29.523438 11.292969 L 29.523438 6.0625 L 4.121094 6.0625 L 4.121094 38.9375 L 29.523438 38.9375 L 29.523438 37.445312 C 29.523438 36.996094 29.824219 36.695312 30.269531 36.695312 C 30.71875 36.695312 31.019531 36.996094 31.019531 37.445312 L 31.019531 39.683594 C 31.019531 40.132812 30.71875 40.433594 30.269531 40.433594 Z M 30.269531 40.433594 "
fill-opacity="1"
fill-rule="nonzero"
/>
</g>
<g clip-path="url(#d384e1589d)">
<path
d="M 30.269531 6.0625 L 3.371094 6.0625 C 2.925781 6.0625 2.625 5.761719 2.625 5.316406 L 2.625 2.324219 C 2.625 1.054688 3.597656 0.0859375 4.867188 0.0859375 L 28.777344 0.0859375 C 30.046875 0.0859375 31.019531 1.054688 31.019531 2.324219 L 31.019531 5.316406 C 31.019531 5.761719 30.71875 6.0625 30.269531 6.0625 Z M 4.121094 4.566406 L 29.523438 4.566406 L 29.523438 2.324219 C 29.523438 1.878906 29.226562 1.578125 28.777344 1.578125 L 4.867188 1.578125 C 4.417969 1.578125 4.121094 1.878906 4.121094 2.324219 Z M 4.121094 4.566406 "
fill-opacity="1"
fill-rule="nonzero"
/>
</g>
<path
d="M 18.316406 3.820312 L 15.328125 3.820312 C 14.878906 3.820312 14.578125 3.523438 14.578125 3.074219 C 14.578125 2.625 14.878906 2.324219 15.328125 2.324219 L 18.316406 2.324219 C 18.765625 2.324219 19.0625 2.625 19.0625 3.074219 C 19.0625 3.523438 18.765625 3.820312 18.316406 3.820312 Z M 18.316406 3.820312 "
fill-opacity="1"
fill-rule="nonzero"
/>
<g clip-path="url(#5e6ef96cde)">
<path
d="M 28.777344 44.914062 L 4.867188 44.914062 C 3.597656 44.914062 2.625 43.945312 2.625 42.675781 L 2.625 39.683594 C 2.625 39.238281 2.925781 38.9375 3.371094 38.9375 L 30.269531 38.9375 C 30.71875 38.9375 31.019531 39.238281 31.019531 39.683594 L 31.019531 42.675781 C 31.019531 43.945312 30.046875 44.914062 28.777344 44.914062 Z M 4.121094 40.433594 L 4.121094 42.675781 C 4.121094 43.121094 4.417969 43.421875 4.867188 43.421875 L 28.777344 43.421875 C 29.226562 43.421875 29.523438 43.121094 29.523438 42.675781 L 29.523438 40.433594 Z M 4.121094 40.433594 "
fill-opacity="1"
fill-rule="nonzero"
/>
</g>
<path
d="M 18.316406 42.675781 L 15.328125 42.675781 C 14.878906 42.675781 14.578125 42.375 14.578125 41.925781 C 14.578125 41.476562 14.878906 41.179688 15.328125 41.179688 L 18.316406 41.179688 C 18.765625 41.179688 19.0625 41.476562 19.0625 41.925781 C 19.0625 42.375 18.765625 42.675781 18.316406 42.675781 Z M 18.316406 42.675781 "
fill-opacity="1"
fill-rule="nonzero"
/>
<path
d="M 26.011719 22.722656 C 24.890625 22.722656 23.917969 21.828125 23.769531 20.707031 L 23.472656 17.71875 C 23.320312 16.523438 24.21875 15.402344 25.488281 15.253906 L 29.226562 14.878906 L 29.972656 22.351562 L 26.234375 22.722656 C 26.160156 22.722656 26.085938 22.722656 26.011719 22.722656 Z M 27.878906 16.523438 L 25.636719 16.746094 C 25.265625 16.820312 24.890625 17.121094 24.964844 17.570312 L 25.265625 20.558594 C 25.339844 20.929688 25.710938 21.230469 26.085938 21.230469 L 28.328125 21.003906 Z M 27.878906 16.523438 "
fill-opacity="1"
fill-rule="nonzero"
/>
<path
d="M 38.265625 25.265625 C 38.042969 25.265625 37.816406 25.265625 37.59375 25.191406 L 28.402344 22.277344 L 27.730469 15.328125 L 36.171875 10.695312 C 36.847656 10.320312 37.667969 10.320312 38.265625 10.695312 C 38.9375 11.066406 39.386719 11.742188 39.460938 12.488281 L 40.507812 22.875 C 40.582031 23.621094 40.28125 24.367188 39.683594 24.816406 C 39.238281 25.039062 38.789062 25.265625 38.265625 25.265625 Z M 38.042969 23.695312 C 38.265625 23.769531 38.5625 23.695312 38.714844 23.546875 C 38.9375 23.398438 39.011719 23.171875 39.011719 22.875 L 37.964844 12.488281 C 37.964844 12.261719 37.816406 12.039062 37.59375 11.890625 C 37.367188 11.742188 37.144531 11.742188 36.921875 11.890625 L 29.375 16.074219 L 29.898438 21.003906 Z M 38.042969 23.695312 "
fill-opacity="1"
fill-rule="nonzero"
/>
<g clip-path="url(#1397b892a3)">
<path
d="M 38.789062 20.707031 L 38.191406 14.730469 L 38.9375 14.65625 C 40.582031 14.503906 42.074219 15.699219 42.226562 17.34375 C 42.375 18.988281 41.179688 20.484375 39.535156 20.632812 Z M 39.835938 16.296875 L 40.058594 18.839844 C 40.507812 18.539062 40.730469 18.015625 40.65625 17.492188 C 40.65625 16.972656 40.28125 16.523438 39.835938 16.296875 Z M 39.835938 16.296875 "
fill-opacity="1"
fill-rule="nonzero"
/>
</g>
<path
d="M 28.394531 21.757812 L 29.878906 21.609375 L 30.207031 24.957031 L 28.722656 25.101562 Z M 28.394531 21.757812 "
fill-opacity="1"
fill-rule="nonzero"
/>
<path
d="M 31.441406 22.730469 L 32.929688 22.582031 L 33.132812 24.664062 L 31.644531 24.8125 Z M 31.441406 22.730469 "
fill-opacity="1"
fill-rule="nonzero"
/>
<path
d="M 15.328125 25.488281 C 11.21875 25.488281 7.855469 22.125 7.855469 18.015625 C 7.855469 13.90625 11.21875 10.546875 15.328125 10.546875 C 19.4375 10.546875 22.800781 13.90625 22.800781 18.015625 C 22.800781 22.125 19.4375 25.488281 15.328125 25.488281 Z M 15.328125 12.039062 C 12.039062 12.039062 9.351562 14.730469 9.351562 18.015625 C 9.351562 21.304688 12.039062 23.996094 15.328125 23.996094 C 18.613281 23.996094 21.304688 21.304688 21.304688 18.015625 C 21.304688 14.730469 18.613281 12.039062 15.328125 12.039062 Z M 15.328125 12.039062 "
fill-opacity="1"
fill-rule="nonzero"
/>
<path
d="M 25.039062 40.433594 L 7.855469 40.433594 C 7.40625 40.433594 7.109375 40.132812 7.109375 39.683594 L 7.109375 30.71875 C 7.109375 27.804688 9.425781 25.488281 12.339844 25.488281 L 16.074219 25.488281 C 19.210938 25.488281 22.125 26.984375 23.996094 29.523438 C 24.21875 29.824219 24.144531 30.34375 23.84375 30.570312 C 23.546875 30.792969 23.023438 30.71875 22.800781 30.421875 C 21.230469 28.253906 18.6875 26.984375 16.074219 26.984375 L 12.339844 26.984375 C 10.246094 26.984375 8.601562 28.625 8.601562 30.71875 L 8.601562 38.9375 L 24.292969 38.9375 L 24.292969 35.203125 C 24.292969 34.976562 24.292969 34.753906 24.292969 34.53125 C 24.292969 34.082031 24.59375 33.78125 24.964844 33.707031 C 25.414062 33.632812 25.710938 34.007812 25.789062 34.378906 C 25.789062 34.679688 25.789062 34.902344 25.789062 35.203125 L 25.789062 39.683594 C 25.789062 40.132812 25.488281 40.433594 25.039062 40.433594 Z M 25.039062 40.433594 "
fill-opacity="1"
fill-rule="nonzero"
/>
<path
d="M 28.777344 35.203125 L 16.074219 35.203125 C 14.429688 35.203125 13.085938 33.855469 13.085938 32.214844 C 13.085938 30.570312 14.429688 29.226562 16.074219 29.226562 L 27.28125 29.226562 C 27.730469 29.226562 28.027344 28.925781 28.027344 28.476562 L 28.027344 26.234375 C 28.027344 24.964844 29 23.996094 30.269531 23.996094 L 31.765625 23.996094 C 33.035156 23.996094 34.007812 24.964844 34.007812 26.234375 L 34.007812 29.972656 C 34.007812 32.886719 31.691406 35.203125 28.777344 35.203125 Z M 16.074219 30.71875 C 15.253906 30.71875 14.578125 31.390625 14.578125 32.214844 C 14.578125 33.035156 15.253906 33.707031 16.074219 33.707031 L 28.777344 33.707031 C 30.867188 33.707031 32.511719 32.0625 32.511719 29.972656 L 32.511719 26.234375 C 32.511719 25.789062 32.214844 25.488281 31.765625 25.488281 L 30.269531 25.488281 C 29.824219 25.488281 29.523438 25.789062 29.523438 26.234375 L 29.523438 28.476562 C 29.523438 29.746094 28.550781 30.71875 27.28125 30.71875 Z M 16.074219 30.71875 "
fill-opacity="1"
fill-rule="nonzero"
/>
</svg>
</InputAdornment>
),
As i remove this code list will show up.
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: (
<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>
<g clip-path="url(#d11c128308)">
<path
d="M 30.269531 40.433594 L 3.371094 40.433594 C 2.925781 40.433594 2.625 40.132812 2.625 39.683594 L 2.625 5.316406 C 2.625 4.867188 2.925781 4.566406 3.371094 4.566406 L 30.269531 4.566406 C 30.71875 4.566406 31.019531 4.867188 31.019531 5.316406 L 31.019531 11.292969 C 31.019531 11.742188 30.71875 12.039062 30.269531 12.039062 C 29.824219 12.039062 29.523438 11.742188 29.523438 11.292969 L 29.523438 6.0625 L 4.121094 6.0625 L 4.121094 38.9375 L 29.523438 38.9375 L 29.523438 37.445312 C 29.523438 36.996094 29.824219 36.695312 30.269531 36.695312 C 30.71875 36.695312 31.019531 36.996094 31.019531 37.445312 L 31.019531 39.683594 C 31.019531 40.132812 30.71875 40.433594 30.269531 40.433594 Z M 30.269531 40.433594 "
fill-opacity="1"
fill-rule="nonzero"
/>
</g>
<g clip-path="url(#d384e1589d)">
<path
d="M 30.269531 6.0625 L 3.371094 6.0625 C 2.925781 6.0625 2.625 5.761719 2.625 5.316406 L 2.625 2.324219 C 2.625 1.054688 3.597656 0.0859375 4.867188 0.0859375 L 28.777344 0.0859375 C 30.046875 0.0859375 31.019531 1.054688 31.019531 2.324219 L 31.019531 5.316406 C 31.019531 5.761719 30.71875 6.0625 30.269531 6.0625 Z M 4.121094 4.566406 L 29.523438 4.566406 L 29.523438 2.324219 C 29.523438 1.878906 29.226562 1.578125 28.777344 1.578125 L 4.867188 1.578125 C 4.417969 1.578125 4.121094 1.878906 4.121094 2.324219 Z M 4.121094 4.566406 "
fill-opacity="1"
fill-rule="nonzero"
/>
</g>
<path
d="M 18.316406 3.820312 L 15.328125 3.820312 C 14.878906 3.820312 14.578125 3.523438 14.578125 3.074219 C 14.578125 2.625 14.878906 2.324219 15.328125 2.324219 L 18.316406 2.324219 C 18.765625 2.324219 19.0625 2.625 19.0625 3.074219 C 19.0625 3.523438 18.765625 3.820312 18.316406 3.820312 Z M 18.316406 3.820312 "
fill-opacity="1"
fill-rule="nonzero"
/>
<g clip-path="url(#5e6ef96cde)">
<path
d="M 28.777344 44.914062 L 4.867188 44.914062 C 3.597656 44.914062 2.625 43.945312 2.625 42.675781 L 2.625 39.683594 C 2.625 39.238281 2.925781 38.9375 3.371094 38.9375 L 30.269531 38.9375 C 30.71875 38.9375 31.019531 39.238281 31.019531 39.683594 L 31.019531 42.675781 C 31.019531 43.945312 30.046875 44.914062 28.777344 44.914062 Z M 4.121094 40.433594 L 4.121094 42.675781 C 4.121094 43.121094 4.417969 43.421875 4.867188 43.421875 L 28.777344 43.421875 C 29.226562 43.421875 29.523438 43.121094 29.523438 42.675781 L 29.523438 40.433594 Z M 4.121094 40.433594 "
fill-opacity="1"
fill-rule="nonzero"
/>
</g>
<path
d="M 18.316406 42.675781 L 15.328125 42.675781 C 14.878906 42.675781 14.578125 42.375 14.578125 41.925781 C 14.578125 41.476562 14.878906 41.179688 15.328125 41.179688 L 18.316406 41.179688 C 18.765625 41.179688 19.0625 41.476562 19.0625 41.925781 C 19.0625 42.375 18.765625 42.675781 18.316406 42.675781 Z M 18.316406 42.675781 "
fill-opacity="1"
fill-rule="nonzero"
/>
<path
d="M 26.011719 22.722656 C 24.890625 22.722656 23.917969 21.828125 23.769531 20.707031 L 23.472656 17.71875 C 23.320312 16.523438 24.21875 15.402344 25.488281 15.253906 L 29.226562 14.878906 L 29.972656 22.351562 L 26.234375 22.722656 C 26.160156 22.722656 26.085938 22.722656 26.011719 22.722656 Z M 27.878906 16.523438 L 25.636719 16.746094 C 25.265625 16.820312 24.890625 17.121094 24.964844 17.570312 L 25.265625 20.558594 C 25.339844 20.929688 25.710938 21.230469 26.085938 21.230469 L 28.328125 21.003906 Z M 27.878906 16.523438 "
fill-opacity="1"
fill-rule="nonzero"
/>
<path
d="M 38.265625 25.265625 C 38.042969 25.265625 37.816406 25.265625 37.59375 25.191406 L 28.402344 22.277344 L 27.730469 15.328125 L 36.171875 10.695312 C 36.847656 10.320312 37.667969 10.320312 38.265625 10.695312 C 38.9375 11.066406 39.386719 11.742188 39.460938 12.488281 L 40.507812 22.875 C 40.582031 23.621094 40.28125 24.367188 39.683594 24.816406 C 39.238281 25.039062 38.789062 25.265625 38.265625 25.265625 Z M 38.042969 23.695312 C 38.265625 23.769531 38.5625 23.695312 38.714844 23.546875 C 38.9375 23.398438 39.011719 23.171875 39.011719 22.875 L 37.964844 12.488281 C 37.964844 12.261719 37.816406 12.039062 37.59375 11.890625 C 37.367188 11.742188 37.144531 11.742188 36.921875 11.890625 L 29.375 16.074219 L 29.898438 21.003906 Z M 38.042969 23.695312 "
fill-opacity="1"
fill-rule="nonzero"
/>
<g clip-path="url(#1397b892a3)">
<path
d="M 38.789062 20.707031 L 38.191406 14.730469 L 38.9375 14.65625 C 40.582031 14.503906 42.074219 15.699219 42.226562 17.34375 C 42.375 18.988281 41.179688 20.484375 39.535156 20.632812 Z M 39.835938 16.296875 L 40.058594 18.839844 C 40.507812 18.539062 40.730469 18.015625 40.65625 17.492188 C 40.65625 16.972656 40.28125 16.523438 39.835938 16.296875 Z M 39.835938 16.296875 "
fill-opacity="1"
fill-rule="nonzero"
/>
</g>
<path
d="M 28.394531 21.757812 L 29.878906 21.609375 L 30.207031 24.957031 L 28.722656 25.101562 Z M 28.394531 21.757812 "
fill-opacity="1"
fill-rule="nonzero"
/>
<path
d="M 31.441406 22.730469 L 32.929688 22.582031 L 33.132812 24.664062 L 31.644531 24.8125 Z M 31.441406 22.730469 "
fill-opacity="1"
fill-rule="nonzero"
/>
<path
d="M 15.328125 25.488281 C 11.21875 25.488281 7.855469 22.125 7.855469 18.015625 C 7.855469 13.90625 11.21875 10.546875 15.328125 10.546875 C 19.4375 10.546875 22.800781 13.90625 22.800781 18.015625 C 22.800781 22.125 19.4375 25.488281 15.328125 25.488281 Z M 15.328125 12.039062 C 12.039062 12.039062 9.351562 14.730469 9.351562 18.015625 C 9.351562 21.304688 12.039062 23.996094 15.328125 23.996094 C 18.613281 23.996094 21.304688 21.304688 21.304688 18.015625 C 21.304688 14.730469 18.613281 12.039062 15.328125 12.039062 Z M 15.328125 12.039062 "
fill-opacity="1"
fill-rule="nonzero"
/>
<path
d="M 25.039062 40.433594 L 7.855469 40.433594 C 7.40625 40.433594 7.109375 40.132812 7.109375 39.683594 L 7.109375 30.71875 C 7.109375 27.804688 9.425781 25.488281 12.339844 25.488281 L 16.074219 25.488281 C 19.210938 25.488281 22.125 26.984375 23.996094 29.523438 C 24.21875 29.824219 24.144531 30.34375 23.84375 30.570312 C 23.546875 30.792969 23.023438 30.71875 22.800781 30.421875 C 21.230469 28.253906 18.6875 26.984375 16.074219 26.984375 L 12.339844 26.984375 C 10.246094 26.984375 8.601562 28.625 8.601562 30.71875 L 8.601562 38.9375 L 24.292969 38.9375 L 24.292969 35.203125 C 24.292969 34.976562 24.292969 34.753906 24.292969 34.53125 C 24.292969 34.082031 24.59375 33.78125 24.964844 33.707031 C 25.414062 33.632812 25.710938 34.007812 25.789062 34.378906 C 25.789062 34.679688 25.789062 34.902344 25.789062 35.203125 L 25.789062 39.683594 C 25.789062 40.132812 25.488281 40.433594 25.039062 40.433594 Z M 25.039062 40.433594 "
fill-opacity="1"
fill-rule="nonzero"
/>
<path
d="M 28.777344 35.203125 L 16.074219 35.203125 C 14.429688 35.203125 13.085938 33.855469 13.085938 32.214844 C 13.085938 30.570312 14.429688 29.226562 16.074219 29.226562 L 27.28125 29.226562 C 27.730469 29.226562 28.027344 28.925781 28.027344 28.476562 L 28.027344 26.234375 C 28.027344 24.964844 29 23.996094 30.269531 23.996094 L 31.765625 23.996094 C 33.035156 23.996094 34.007812 24.964844 34.007812 26.234375 L 34.007812 29.972656 C 34.007812 32.886719 31.691406 35.203125 28.777344 35.203125 Z M 16.074219 30.71875 C 15.253906 30.71875 14.578125 31.390625 14.578125 32.214844 C 14.578125 33.035156 15.253906 33.707031 16.074219 33.707031 L 28.777344 33.707031 C 30.867188 33.707031 32.511719 32.0625 32.511719 29.972656 L 32.511719 26.234375 C 32.511719 25.789062 32.214844 25.488281 31.765625 25.488281 L 30.269531 25.488281 C 29.824219 25.488281 29.523438 25.789062 29.523438 26.234375 L 29.523438 28.476562 C 29.523438 29.746094 28.550781 30.71875 27.28125 30.71875 Z M 16.074219 30.71875 "
fill-opacity="1"
fill-rule="nonzero"
/>
</svg>
</InputAdornment>
),
}}
/>
)}
renderGroup={(params) => (
<li key={params.key}>
{/* <GroupHeader>{params.group}</GroupHeader> */}
<GroupItems className="space-y-2">{params.children}</GroupItems>
</li>
)}
/>
);
};
export default RenderGroup;
It looks like the SVG code might be causing issues with the rendering of the dropdown list. SVG elements within certain contexts might interfere with the functionality of other components.
First, try isolating the SVG code separately from the dropdown and see if the dropdown works without it. Then gradually reintroduce the SVG code to identify if it’s indeed causing the issue.