"Automatic field wrapping inside DIV" breaks my CSS

[folknor]

Can you explain the reason for wrapping the input field in a div? It breaks my CSS, which is based on https://getbootstrap.com/docs/5.0/forms/floating-labels/#example

I can fix it, but why did you break it?

[TarekRaafat]

The wrapper was not meant to break anything as much as to improve the list rendering and the WAI-ARIA support.

Yet, I was already planing to make it optional, and I'll make sure to avail that API the soonest.

[folknor]

Excellent, works just like before with wrapper: false. Thanks!

I have a weird issue now though that after I select an item in the results, the autocomplete container is never shown again.

I'm not sure if it's a bug in my code or in the library, but I believe it's in the library.

resultsList.element(element, data) is invoked, and const { input, query, matches, results } = data has the correct data for the new search, but then the list just simply isn't shown.

[TarekRaafat]

Do you get that behavior with the wrapper false or true?

[folknor]

Do you get that behavior with the wrapper false or true?

Both. I was going to do some testing immediately and file an issue but was interrupted. It must be some problem in my code.

[folknor]

The problem only comes when I have a custom resultsList.id set.

[folknor]

Ah I see. In a previous version of autoComplete.js I had to manually remove the rendered resultsList HTML because I had to override the click event handler.

Now I don't need to any more, but I was still nuking the HTML, and autoComplete.js no longer recreates it.