Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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.
The Problem
The
<flux:pagination>component had no scroll behaviour implementation. Livewire's pagination views include ascrollIntoView()call on each button viax-on:click, but Flux's pagination component didn't have an equivalent.The Solution
Added an opt-in
scroll-toprop to the<flux:pagination>component, matching the approach used by Livewire's pagination views. When enabled, clicking a pagination button triggers ascrollIntoView()call on the target element.The prop is opt-in (disabled by default) and accepts either a boolean or a CSS selector:
When using the table component, the prop can be forwarded using the
pagination:prefix:The table component now uses
Flux::attributesAfter('pagination:', ...)to forward anypagination:-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 usesFlux::forwardedAttributes()before@propsto manually handle the conversion — the same pattern used by thewith-fieldcomponent.Fixes #1596