Skip to content

Comments

Add scroll-to prop to pagination component#2401

Open
joshhanley wants to merge 1 commit intomainfrom
josh/pagination-scroll-to
Open

Add scroll-to prop to pagination component#2401
joshhanley wants to merge 1 commit intomainfrom
josh/pagination-scroll-to

Conversation

@joshhanley
Copy link
Member

The Scenario

When using Flux's pagination component, clicking a pagination button changes the page but doesn't scroll the user back to the top. This is a common expectation — especially on long lists where the pagination controls sit at the bottom of the page — and is something Livewire's own pagination views support out of the box.

<?php

use App\Models\User;
use Livewire\Attributes\Computed;
use Livewire\Component;
use Livewire\WithPagination;

new class extends Component {
    use WithPagination;

    #[Computed]
    public function users()
    {
        return User::query()->paginate(10);
    }
}; ?>

<div>
    <flux:table :paginate="$this->users">
        <flux:table.columns>
            <flux:table.column>Name</flux:table.column>
            <flux:table.column>Email</flux:table.column>
        </flux:table.columns>

        <flux:table.rows>
            @foreach ($this->users as $user)
                <flux:table.row :key="$user->id">
                    <flux:table.cell>{{ $user->name }}</flux:table.cell>
                    <flux:table.cell>{{ $user->email }}</flux:table.cell>
                </flux:table.row>
            @endforeach
        </flux:table.rows>
    </flux:table>
</div>

The Problem

The <flux:pagination> component had no scroll behaviour implementation. Livewire's pagination views include a scrollIntoView() call on each button via x-on:click, but Flux's pagination component didn't have an equivalent.

The Solution

Added an opt-in scroll-to prop to the <flux:pagination> component, matching the approach used by Livewire's pagination views. When enabled, clicking a pagination button triggers a scrollIntoView() call on the target element.

The prop is opt-in (disabled by default) and accepts either a boolean or a CSS selector:

{{-- Scroll to body (default target) --}}
<flux:pagination :paginator="$users" scroll-to />

{{-- Scroll to a specific element --}}
<flux:pagination :paginator="$users" scroll-to="#table" />

When using the table component, the prop can be forwarded using the pagination: prefix:

<flux:table :paginate="$users" pagination:scroll-to />

The table component now uses Flux::attributesAfter('pagination:', ...) to forward any pagination:-prefixed attributes to the underlying <flux:pagination> component, making it extensible for future pagination props.

Note: There is a known issue in Laravel where multi-word kebab-case attributes (like scroll-to) don't get converted to their camelCase prop equivalents (like $scrollTo) when forwarded via :attributes. To work around this, the pagination component uses Flux::forwardedAttributes() before @props to manually handle the conversion — the same pattern used by the with-field component.

Fixes #1596

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant