search

livewire / flux

The official Livewire UI component library
https://fluxui.dev
495 stars 41 forks source link

Custom select changes position #764

Open stebrl opened 4 days ago

stebrl commented 4 days ago

I found an issue where a custom select changes its position after the second time you open it, but only if the selected option is located outside the visible height of <flux:options>. Here is an example:

<div class="flex items-end justify-center min-h-screen p-24">
    <flux:select variant="listbox" placeholder="Choose industry...">
        <flux:option>Photography</flux:option>
        <flux:option>Design services</flux:option>
        <flux:option>Web development</flux:option>
        <flux:option>Accounting</flux:option>
        <flux:option>Legal services</flux:option>
        <flux:option>Consulting</flux:option>
        <flux:option>Other</flux:option>
        <flux:option>Other2</flux:option>
        <flux:option>Other3</flux:option>
        <flux:option selected>Do not select me</flux:option>
    </flux:select>
</div>

https://github.com/user-attachments/assets/962df163-f8bb-4614-8236-db8b79429294

This issue does not occur when you select option 1-9, e.g. "Consulting":

https://github.com/user-attachments/assets/81fa4eac-a928-4943-b64c-721548946589

jeffchown commented 3 days ago

@stebrl I was able to reproduce your issue.
It only happened for me when the selected was the last option. e.g. I made Other 3 the selected and it worked correctly.

stebrl commented 3 days ago

@stebrl I was able to reproduce your issue. It only happened for me when the selected was the last option. e.g. I made Other 3 the selected and it worked correctly.

@jeffchown It always happens if the selected option is outside of the visible height of the options container, see:

<div class="flex items-end justify-center min-h-screen p-24">
    <flux:select variant="listbox" placeholder="Choose industry...">
        <flux:option>Photography</flux:option>
        <flux:option>Design services</flux:option>
        <flux:option>Web development</flux:option>
        <flux:option>Accounting</flux:option>
        <flux:option>Legal services</flux:option>
        <flux:option>Consulting</flux:option>
        <flux:option>Other</flux:option>
        <flux:option>Other2</flux:option>
        <flux:option>Other3</flux:option>
        <flux:option>Other4</flux:option>
        <flux:option selected>Other5</flux:option>
        <flux:option>Other6</flux:option>
        <flux:option>Other7</flux:option>
    </flux:select>
</div>
calebporzio commented 2 days ago

Ah yes, I see it too. Pretty weird. I'll look into this