Not displaying suggestions within Bootstrap offcanvas on Firefox about typeahead-standalone

[niketpathak]

Hello @AlonsoK28 ,

Thank you for taking the time to report this. However, nothing has changed with respect to the styles since the past 10 releases of typeahead-standalone.
I also tested the latest version of typeahead-standalone on the latest version of Firefox. Here's a screencast showing the same:

Screencast.2023-02-15.11.41.38.mp4

In your case, I think the container where you place the typeahead-standalone component has an effect i.e. overrides the styles of typeahead. So this bug is specific to your use-case. I'm closing this issue given the workaround you figured out yourself.

Thanks!

Good day!

[niketpathak]

Hello @AlonsoK28 , thank you for reporting this and for the example. I'll have a look at it soon.

[niketpathak]

@AlonsoK28 Fixed in v4.18.0. Thank you.

[AlonsoK28]

I identified that this issue occurs always when the component typeahead-standalone is placed inside a Bootstrap 5.2 lastest offcanvas

I have created a example app with this issue, follow the next steps to replicate:

1. use firefox browser (chrome works well)
2. open offcanvas using the button
3. type the word gr into typeahead-input

firefox issue

chrome working well

deployed app: https://typeahead-offcanvas-issue.vercel.app/

repo: https://github.com/AlonsoK28/typeahead-offcanvas-issue

Finally I think it would be good for your project to be able to use the component typeahead-standalone inside an bootstrap offcanvas component since it is a very common use case

[niketpathak]

This seems some kind of a bug with Firefox because it does not accept any value of width in percentage. However, when I set a value in pixels (or vh), it works perfectly.

Here's a screehshot:

A workaround could be styling the list element (.tt-list) to use the width in pixels.
In the mean time, I'm going to try to see if there exists an alternate/better solution.