Having an issue with a search dropdown that displays suggestions when the search input is focused. The problem arises when the dropdown closes as soon as the input loses focus, which is the desired functionality. However, clicking on any suggestion causes the box to close before registering the click for that specific suggestion.
Here's my current code:
<div id="demo-2">
<input
type="search"
placeholder="Search By Title, Author"
/>
<div class="autocomplete">
<mdb-card *ngFor="let book of books" (click)="logger(book.id)">
<!--some code-->
</mdb-card>
</div>
</div>
And here's the CSS snippet:
#demo-2 input[type="search"]:focus {
width: 275px;
color: #000;
background-color: #fff;
cursor: auto;
~ .autocomplete {
visibility: visible;
}
}
.autocomplete {
height: 350px;
width: 275px;
position: absolute;
visibility: hidden;
overflow: auto;
}
Lastly, a part of the TypeScript code:
logger(id) {
console.log(id);
}
I've been struggling with this for over a day now. Any assistance would be greatly appreciated.