Static GitHub Issues

[1255] Pages are fully re-rendered when just query string changes - focus on active element lost

prev: /src/index.js in multi main
next: Error render client side dynamic component

Version

>= 1.0-rc0

Reproduction links

https://glitch.com/edit/#!/nuxt-rc0 https://nuxt-rc0.glitch.me/ https://nuxt-rc0.glitch.me/about

Steps to reproduce

Load the page above, and start typing into the search field. The input element is set to trigger an update of the query string on keypress.

What is expected?

You should be able to continue typing after the first character, and the query string url should continue updating with what you type.

What is actually happening?

After every keypress, the form field loses focus and you have to click inside again to be able to type the next character.

Additionally, if the typing is done on the about page in the above demo, then it also scrolls to the top of the page after each keypress, despite the custom scroll Behaviour disabling that.

Extra Information

I noticed this change in behavior when I upgraded from 1.0.0-alpha.4 to 1.0.0-rc3, but after checking the previous versions it seems to have started in 1.0.0-rc0.

Links to a glitch to see a working previous version https://glitch.com/edit/#!/nuxt-alpha4 https://nuxt-alpha4.glitch.me/ https://nuxt-alpha4.glitch.me/about

To rule out changes upstream in vue router causing this, I created a jsfiddle using version 2.7.0 of vue-router (same as nuxt 1.0.0-rc3 uses). The behaviour does not exist in that test: https://jsfiddle.net/benosman/octu95ra/

Note: This issue has been rewritten, hopefully to make it clearer to understand what the problem is.

<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1112">#c1112</a>)</em></sub></div>