Ran into overflow and bounds detection issue

[yasoob]

I decided to test live_select but ran into two issues.

Select options overflow

This screenshot is from the demo app:

Any idea why this is overflowing? This happens on both Firefox and Chrome.

No bounds detection

Most JS-based select dropdowns have some sort of bounds detection. This makes it such that if there is not enough space to show the dropdown below the input field, the dropdown opens upwards. Live_select doesn't appear to support this:

You can look at Headless-UI or shadcn/ui to get a sense of what I am talking about:

Thank you so much for making this open source! :)

[maxmarcon]

Thanks for pointing this out.

The second problem (bounds detection) is something I haven't addressed yet because it seems very hard and other things were more important at the time. A PR would be very welcome!

Regarding the first problem (overflow) : I believe this was introduced by one of my recent changes. I bet if you try 1.1.1 this won't happen.

I'll be able to fix this in a couple of weeks (I'm traveling without my laptop right now)

Until then, you should be good downgrading to 1.1.1

[maxmarcon]

Until a release with the bugfix is published, the issue can also be fixed by assigning a relative position to the live select div container. If one is using tailwind, this is as simple as doing this:

<.live_select
   field={my_form[:city_search]}
   container_extra_class="relative" />

see live example

[yasoob]

Thanks for checking in on this Max!

[maxmarcon]

Overflow problem has been fixed in 1.2.1

I added a section to the cheatsheet that shows how to open the dropdown above the input field. The "bounds detection" however will have to happen in your live view or live component. Doesn't completely address your issue I know, but it's a steps in the right direction.