Select input + Islands + infinite scroll broken

[cstisa]

Hi everyone,

I was trying to create a select input using Flux and Livewire v4 (islands) in order to create an infinite scroll down inside a <flux:select>

The most I can do without having any issues in the console is this :

<flux:select class="max-w-sm h-10!" wire:model="selectedCompanyId">
    @island(name: 'companies')
        @foreach ($this->companies as $company)
            <flux:select.option value="{{ $company->id }}" wire:key="company-{{ $company->id }}">
                {{ $company->name }}
            </flux:select.option>
        @endforeach
    @endisland
    @if ($this->companies->hasMorePages())
        <flux:select.option value="" wire:click="loadMoreCompanies" wire:island.append="companies">
            Load more ...
        </flux:select.option>
    @endif
</flux:select>

And in the component class :

    public $selectedCompanyId;

    public int $companiesPage = 1;

    #[Computed]
    public function companies(): LengthAwarePaginator
    {
        $this->authorize('viewAny', Company::class);

        return Company::orderBy('name')
            ->paginate(
                perPage: 5,
                columns: ['id', 'name'],
                pageName: 'companiesPage',
                page: $this->companiesPage
            );

    }

    public bool $isLoadingCompanies = false;

    public function loadMoreCompanies(): void
    {
        if ($this->isLoadingCompanies || ! $this->companies->hasMorePages()) {
            return;
        }

        $this->isLoadingCompanies = true;
        $this->companiesPage++;
        $this->isLoadingCompanies = false;
    }

I have two major problems :

1. When clicking on the last select option to load more, the select closes itself and it doesn't have the attribute keep-open like in the <flux:dropdown> which prevent the menu to close itself when doing a click

2. I can't set the <flux:select> a fixed number of items to show in order to keep having only 5 items visible in the frame, then having to scroll down in order to load more automatically with something like wire:intersect for example

Does anyone have any idea on how to solve my problems?

Edit 1 :

I'll add that I tried the same thing with <flux:dropdown>

<flux:dropdown>
    <flux:button icon:trailing="chevron-down">Company</flux:button>

    <flux:menu>
        <flux:menu.radio.group wire:model.live="selectedCompanyId">

            @island(name: 'companies')
                @foreach ($this->companies as $company)
                    <flux:menu.radio  wire:key="company-{{ $company->id }}">{{ $company->name }}</flux:menu.radio>
                @endforeach
            @endisland

            @if ($this->companies->hasMorePages())
                <flux:menu.radio keep-open wire:click="loadMoreCompanies" wire:island.append="companies">
                    Load more</flux:menu.radio>
            @endif

        </flux:menu.radio.group>
    </flux:menu>
</flux:dropdown>

It kind of works, even if for a form, I'd rather have a <flux:select> input but the other problem is that I get a console error each time I click the load more button :

Uncaught DOMException: Operation is not supported

Edit 2 :

I manage to make it work using only HTML (but it is ugly):

<select id="company" name="company" size="5" wire:model.live="selectedCompanyId">
    @island(name: 'companies')
        @foreach ($this->companies as $company)
            <option value="{{ $company->id }}" wire:key="company-{{ $company->id }}">{{ $company->name }}
            </option>
        @endforeach
    @endisland

    @if ($this->companies->hasMorePages())
        <option disabled value="" wire:intersect.full="loadMoreCompanies" wire:island.append="companies">
            Load more ...
        </option>
    @endif
</select>

Edit 4 :

I tried with <flux:select variant="combobox"> and it almost works except for two problems :

1. I can't select any option
2. I still get the console error : Uncaught DOMException: Operation is not supported

        <flux:select variant="combobox">
            <x-slot name="input">
                <flux:input :filter="false" placeholder="Filter companies..."
                    wire:model.live.debounce.300ms="companyFilter" />
            </x-slot>

            @island(name: 'companies', always: true)
                @foreach ($this->companies as $company)
                    <flux:select.option value="{{ $company->id }}" wire:key="company-{{ $company->id }}">
                        {{ $company->name }}</flux:select.option>
                @endforeach
            @endisland

            <flux:select.option disabled wire:intersect.full="loadMoreCompanies" wire:island.append="companies">
                Load more</flux:select.option>
        </flux:select>

Originally posted by @cstisa in #2481

[ganyicz]

Hi @cstisa

Thanks for reporting. I have opened a PR that fixes the console log error in Livewire. That said, this doesn't affect any functionality. You can achieve infinite scrolling inside a dropdown using this code:

<flux:dropdown>
    <flux:button icon:trailing="chevron-down">Select Item</flux:button>

    <flux:menu class="h-50">
        <flux:menu.radio.group wire:model.live="selectedItem">
            @island(name: 'dropdown-items')
                @foreach ($this->currentPageItems() as $item)
                    <flux:menu.radio value="{{ $item['id'] }}" wire:key="dropdown-item-{{ $item['id'] }}">{{ $item['name'] }}</flux:menu.radio>
                @endforeach
            @endisland
            <flux:menu.item
                keep-open
                wire:click="loadMore"
                wire:intersect="loadMore"
                wire:island.append="dropdown-items"
                wire:show="$wire.page * $wire.perPage < $wire.totalItems"
            >
                Load more...
            </flux:menu.item>
        </flux:menu.radio.group>
    </flux:menu>
</flux:dropdown>

I found that using dropdown works best for this use case. Also your snippets were missing an important piece: the Load more item has to use wire:show - this is because the template outside the island isn't rendered when loadMore runs so the condition isn't re-evaluated.

Hope that helps!

I'm going to close this now as this isn't a Flux issue.

[cstisa]

Thank you @ganyicz !