Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

preservScroll in scroll-region not working #2114

Open
filecc opened this issue Dec 2, 2024 · 2 comments
Open

preservScroll in scroll-region not working #2114

filecc opened this issue Dec 2, 2024 · 2 comments
Labels
react Related to the react adapter

Comments

@filecc
Copy link

filecc commented Dec 2, 2024

Version:

  • @inertiajs/react version: 1.2.0

Describe the problem:

I have a div with a scrollable list: every element in that list is a button. Clicking the button trigger a get request to the server and the serve (for simplicity) redirect back to the view.
I want the scroll position in the div to be preserved after the redirect back, but instead it's always reset to the top of the page.

Steps to reproduce:

method

const submit = async () => {
 router.get('/account/notification/' + notification.id , { preserveScroll: false }) 
}

component

<main className="h-dvh overflow-y-hidden">
    <div scroll-region={"true"} className="overflow-y-auto">     
        <button  onClick={submit}>Notification</button>
       {/* ...a very looong list*/}
     </div>
</main>

route

public function notification_mark($id)
    {
      /* various operations */

        return to_route('account.notifications');
    }

Doesn't matter what I put in the preserveScroll parameter, every time scroll position get restored to the top of the page, while I would love the it stays where I clicked first.
I already tried with the form helper, with the Link component, nothing works.
Also, doing as per the documentation

<div class="overflow-y-auto" scroll-region>
  <!-- Your page content -->
</div>

produce a warning:

Warning: Received `true` for a non-boolean attribute `scroll-region`.

Removing the "overflow-y-auto" and letting the page go for itself do the tricks.. but it's not what I want and what is menta to be.

Any help would be VERY appreciated.

Thanks!

@filecc filecc added the react Related to the react adapter label Dec 2, 2024
@mgriego
Copy link

mgriego commented Dec 3, 2024

I've been running into similar issues and discovered that the previous issues on this were closed, but a new version hasn't yet been released. The fixes for this are in the 1.3.0 beta versions (you can see the release notes that include these fixes here: https://github.com/inertiajs/inertia/releases/tag/v1.3.0-beta.1). A final 1.3.0 release is needed for these fixes to be present in the npm package.

@entense
Copy link

entense commented Dec 6, 2024

I also confirm the problem in version 2

in 1.3 it was fixed #1360, but in version 2 this problem came back again

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
react Related to the react adapter
Projects
None yet
Development

No branches or pull requests

3 participants