neurodynamic

neurodynamic

How do I stop default generated new/edit modals in Phoenix 1.7 from scrolling me to the top of the page when closed?

I tried this with a brand new generated Phoenix 1.7 app to make sure it wasn’t something I did. If I make a new app and then use phx.gen.live to make a list of tasks, for example, when I finish editing or creating a task and the form modal closes, the browser always ends up scrolling to the very top of the page, instead of staying in the part of the list of tasks where I was before I opened the form modal.

Anyone know why this is or how to prevent it?

Marked As Solved

awerment

awerment

Seems the on_cancel={JS.navigate(~p"/<url>")} attribute in the resources’ generated index.html.heex is the culprit. It triggers a re-mount of the parent LiveView, hence the scroll position is lost.

For me, it’s fixed with on_cancel={JS.patch(~p"/<url>")}.

Update: should note that I wasn’t able to reproduce the behaviour when actually saving an entry (clicking “Save” button or pressing return), it only occurred for me when canceling out of the modal (clicking away or the “x” cancel button, pressing escape). I did notice that sometimes the scroll position was already reset as soon as the modal opened, but could not track that down.

Also Liked

wceolin

wceolin

That was fixed: on_cancel={JS.patch(~p"/<url>")} is the default now: Liveview traffic over the wire - #7 by chrismccord

awerment

awerment

Glad to hear! :slight_smile:

Not sure if this is a bug - re-mounting the LiveView also loads the latest entries from the DB. That means, when using patch here instead of navigate you could get stale data displayed. Though that would mean another user or background process is editing records as well - at which point you probably want to use PubSub anyhow?

neurodynamic

neurodynamic

Ooh I never would have found that; thank you! That seems to have resolved it for me.

Do you think this is worth reporting as a bug, or are there reasons navigate might make sense as the default behavior for others?

Where Next?

Popular in Questions Top

chrisalley
ExUnit now has describe blocks which is a welcome addition coming from RSpec. In the docs, it states that nested hierarchies of describe ...
New
myronmarston
The Elixir Typespec docs show the following syntax for keyword lists in typespecs: # ... | [key: type] # keyword lists...
New
Qqwy
Original source of discussion: This topic on the Pragmatic Programmers’ Functional Web Development with Elixir, OTP, and Phoenix forum. ...
New
hariharasudhan94
Lets say I have map like this fetching from my database %{"_id" =&gt; #BSON.ObjectId&lt;58eb1a7a9ad169198c3dXXXX&gt;, "email" =&gt; ...
New
ashish173
I am using Ecto timestamps with postgres, I can see the timestamps() use the :naive_dateime but for my use case I wanted to store the ti...
New
jay1
Why is it that the mnesia database isn’t the most preferred database for use in Elixir/Phoenix?
New
albydarned
Hello all! I am typing this post from my new MacBook Pro with the M1 chip. I’m loving it so far, and will probably use it as my daily dr...
New
marius95
Hello everyone, I try to use an Javascript Event Handler in my root.html.leex file. Therefore I created a function in the app.js file: ...
New
vrod
I am using the Starship cross-shell prompt – it seems pretty nice, but I get some errors: [WARN] - (starship::utils): Executing command ...
New
JorisKok
I have a server on AWS, and was running a load test using artillery. When looking at the Phoenix dashboard I see the Ports going to 100% ...
New

Other popular topics Top

Qqwy
Update: How to use the Blogs &amp; Podcasts section You can post links to your blog posts or podcasts either in one of the Official Blog...
3271 127089 1222
New
JeremM34
Hello, how can I check the Phoenix version ? Thanks !
New
josevalim
Hi everyone, One of the features added to Elixir early on to help integration with Erlang code was the idea of overridable function defi...
New
chrismccord
As promised, the first release candidate of Phoenix 1.3.0 is out! This release focuses on code generators with improved project structure...
New
AstonJ
We’ve put together this wiki for Phoenix LiveView - please feel free to add any info you feel is worth including. What is Phoenix LiveV...
New
fireproofsocks
Forgive me if this is obvious, but how does one delete a database record WITHOUT selecting it first? Ecto.Repo — Ecto v3.14.0 has exampl...
New
aesmail
Hello guys, I have finally made it. I created an admin interface for a framework. It’s been on my todo list for years and with the curre...
New
saif
Hello everyone, Long time lurker first time poster here. I’ve recently begun working on Elixir full-time again! :raised_hands: It’s been...
New
JorisKok
I have a server on AWS, and was running a load test using artillery. When looking at the Phoenix dashboard I see the Ports going to 100% ...
New
jason.o
In the code below, if the create action is not set to accept “extra_key” as an input, it errors out with a message shown above. Is there ...
New

Latest on Elixir Forum

We're in Beta

About us Mission Statement