Can anyone help me troubleshoot an issue with adding a transition to a select box that appears when clicking on an input field arrow? I have tried implementing a CSS transition property, but it doesn't seem to be working. Any suggestions on what might be causing this problem?
.combobox-options {
position: absolute;
margin: 0;
padding: 0;
list-style: none;
max-height: 15em;
overflow-y: auto;
overscroll-behavior: contain;
width: 100%;
left: 0;
top: calc(100% + 0.25em);
z-index: 100;
transition: all 0.5s;
}
const [isOpen, setIsOpen] = useState(false);
<input role="combobox" className="combobox-input"/>
<button
className={clsx("arrow", isOpen && "down")}
onClick={() => setIsOpen(!isOpen)}>
</button>
{isOpen && (
<ul
id="combobox-listbox"
role="listbox"
className={clsx("combobox-options")}
>
{options?.map((option: any, index: any) => {
return (
<li>...</li>
);
})}
</ul>
)}