There are two problems. When only one search field is configured the SearchBarComponent sets the rounded-left class on the input element. It also needs to set the rounded-start class for Bootstrap 5. But this only fixes the problem when autocomplete is turned off. If autocomplete is turned on the border is set on the autocomplete element so the rounded-left and rounded-start classes need to be set there as well for this to work when autocomplete is on.
Current behavior:
Expected behavior:
There are two problems. When only one search field is configured the
SearchBarComponent
sets therounded-left
class on theinput
element. It also needs to set therounded-start
class for Bootstrap 5. But this only fixes the problem when autocomplete is turned off. If autocomplete is turned on the border is set on theautocomplete
element so therounded-left
androunded-start
classes need to be set there as well for this to work when autocomplete is on.Border set on autocomplete element: