Having implemented an autocomplete dropdown feature by following this link, I am encountering an issue with displaying the dropdown items.
As shown in the reference link, the dropdown items are rendered within a div tag with the position set to relative.
CSS
.autocomplete-wrapper {
width: 300px;
position: absolute;
display: inline-block;
}
... (CSS code omitted for brevity)
I attempted using position: absolute to position the dropdown, however, it overlaps with other input elements. I aim to ensure that the position of the dropdown does not interfere with other input elements, similar to a traditional react select dropdown.
Code
<div className="autocomplete-wrapper"> <label htmlFor="title">Vehicle No</label> <Autocomplete ... (Autocomplete component props omitted for brevity) /> </div> ... (Additional input elements omitted for brevity)