Autoscrolling in select

[DonCamillo11]

Flux version

v1.1.3

Livewire version

v3.5.18

What is the problem?

There seems to be an autoscrolling feature in the select field. This means that if you jump to a certain point in a long list using the keyboard, the autoscroll will always cause you to scroll further up in the list. Since the list starts at the bottom of the selection field, you will always end up in the autoscroll area, which is different with known select fields. Perhaps it would be a solution to deactivate this with an option, e.g. autoscroll=false or maybe by adding a debounce.

Sorry, I know this is not really a bug but a pretty annoying feature :-)

Bildschirmaufnahme.2025-01-28.um.16.49.27.mov

Code snippets

<?php

namespace App\Livewire\Test;

use Livewire\Component;

class Test extends Component
{
    public function render()
    {
        return <<<'HTML'
        <div>
            <flux:select variant="listbox" multiple>
                @foreach(range('A', 'Z') as $value)               
                    <flux:option value="{{ $value }}">{{ $value }}</flux:option>
                @endforeach
                 
            </flux:select>
        </div>

        HTML;
    }
}

How do you expect it to work?

It would be best if the autoscroll function did not work in this case.

Please confirm (incomplete submissions will not be addressed)

• I have provided easy and step-by-step instructions to reproduce the bug.
• I have provided code samples as text and NOT images.
• I understand my bug report will be closed if I haven't met the criteria above.

[joshhanley]

@DonCamillo11 thanks for reporting! I'm not sure I 100% follow what is happening in the video, what is causing the dropdown to scroll/ jump around? Are you pressing keys on your keyboard? Can you provide me specific step by step instructions so I can replicate it? Thanks!

[DonCamillo11]

@joshhanley Sorry for not making that clear. I initially press the "T" key in the video, just to get to a certain entry in a long list.

I will try to explain it step by step:
Press any key to get at a certain entry in the list. Preferably at the end of the list. Then slowly move the mouse down into the list to select the desired entry, but at the top of the list is the "auto-scroll zone". When you pass this zone with the cursor, the list automatically scrolls back up so that you lose focus on the entry selected with the key. The slower you go down, the further the list scrolls back up.
In a usual select this is avoided by having the list extend from the top of the screen to the bottom, so that the autoscroll zone is not touched at all with the cursor.
Does that make any sense?

[joshhanley]

@DonCamillo11 ah yep, thanks, thats great! I've just tested this and it's not doing the same thing for me. Do you have any custom styles/heights on your select dropdown? What OS and browser are you using?

See below for what is does to me on macOS and Chrome.

[DonCamillo11]

@joshhanley ah, yes, I see. The autoscroll zone in chrome doesn’t exist at the top (just at the bottom?). Tested with Safari and Firefox on macOS Sonoma. No custom styles/heights.

[joshhanley]

@DonCamillo11 thanks! Yep, I can confirm the issue is happening for me too in Safari but not Chrome.

[joshhanley]

So I've investigated this and found that the /flux-pro/stubs/resources/views/flux/option.blade.php has the below line in it

->add('scroll-my-[.3125rem]') // This is here so that when a user scrolls to the top or bottom of the list, the padding is included...

What that means is that the previous item is being shown a little, and it seems that Safari keeps triggering the mouseover event when the scroll happens, triggering the previous item to scroll into view.

Volt component for testing

<?php

use Livewire\Volt\Component;

new class extends Component {
    //
};
?>

<div>
    <flux:select variant="listbox" multiple>
        @foreach (range('A', 'Z') as $value)
            <flux:option value="{{ $value }}">{{ $value }}</flux:option>
        @endforeach
    </flux:select>
</div>