Incorrect form field value in Chrome using the back button

[mvgn]

Version

2.6.11

Reproduction link

https://jsfiddle.net/jc26tewa/

Steps to reproduce

1. Type "Hello" in the message input field.
2. Click on the link "Another page".
3. Click on the browser back button.
4. Click on the "Submit" button.

What is expected?

It is expected that the input field be blank or that Vue recognises its current value and shows "Submitted message: Hello" after clicking on the Submit button.

What is actually happening?

In Chrome, the input field contains the value it had before leaving the page, but Vue thinks the field is empty, so nothing happens when you click on the Submit button. In other browsers, the input field is blank after clicking on the back button.

[posva]

This seems to be a regression on Chromium 79. I filled a bug there: https://bugs.chromium.org/p/chromium/issues/detail?id=1057463#makechanges

[sandipbiswasbehala]

is there any solution from vue js end???

[mvgn]

I find it strange that this bug has received so little attention as Chrome is the most popular browser and this bug seems to affect every Vuejs form. Even the form on the official Vuejs documentation exhibits the same fault. At https://vuejs.org/v2/guide/forms.html#Text, fill the text box, click a link to another page, and then click the back button. You'll see that the message is blank but the text box is out of sync and contains the previous typed value.

As the Chrome team as marked the related bug as WontFix, it seems it will be up to the Vuejs team to come up with a workaround.

[posva]

This problem affects every js framework, even raw javascript. As they said, the would look into fixing the regression if enough people at concerned. So please express the need in the reported issue

[sandipbiswasbehala]

you can do something like this. Resolved my problem as of now. in main js.

window.addEventListener('pageshow', function() {

new Vue({
  render: h => h(App),
}).$mount('#app')

})

[sandipbiswasbehala]

@mvgn
window.addEventListener('pageshow', function() {

new Vue({
render: h => h(App),
}).$mount('#app')
})

[mvgn]

@posva, I've commented on the Chrome bug, but I don't know enough to make a technical argument — can only say that other browsers are behaving as expected with Vuejs while Chrome is not.

thanks @sandipbiswasbehala. I'm using Vuejs in a rails app and the default initialisation is with the DOMContentLoaded event, so I'm keeping that for other browsers and changed to the pageshow event just for Chrome.

if (navigator.userAgent.indexOf('Chrome/') > 0) {
  window.addEventListener('pageshow', () => {
    new Vue({
      render: (h) => h(App),
    }).$mount('#app');
  });
} else {
  document.addEventListener('DOMContentLoaded', () => {
    new Vue({
      render: (h) => h(App),
    }).$mount('#app');
  });
}

[Elvaleryn]

Thanks to @sandipbiswasbehala and @mvgn for the solution, it works perfect on Chrome but unfortunately im having the same issue on Opera. This is quite weird because they are both Chromium based even their dev tools are same. There should be a work around for this, which will solve this problem regardless of which browser.

[Elvaleryn]

Okay i was digging down because this solution wasn't working for Opera, here is my work around: I found out that when i focus on one of the inputs all the other inputs was becoming empty or default(it is how it should be) So i tried to focus that input as soon as the component is mounted but it did not work. Then i set a time out to focus function then it worked. It seems like for some reason it needs a delay around 300ms to render the state normal. Basically i asynchronously rendered components which has forms now it seems like all of them works flawlessly here is one of them:

const MainComponent = () => ({
	component: import("./Searchbox/MainComponent"),
	delay: 300,
});

Eventhough it works i have no clue why this behaviour exists in Chrome based browsers. Maybe someone else can explain it better.

Here is the related link in vue docs: https://vuejs.org/v2/guide/components-dynamic-async.html

[euoia]

On my machine at least, Chrome on OS X is showing the following user agent:

"Mozilla/5.0 (iPad; CPU OS 11_0 like Mac OS X) AppleWebKit/604.1.34 (KHTML, like Gecko) Version/11.0 Mobile/15A5341f Safari/604.1"

So the looking at user agent for the pageshow workaround doesn't work on Desktop (I haven't tested mobile yet).

I can modify my app.js to wrap my Vue initialisation in the a callback to the pageshow event, which seems to work in Chrome and Safari.

window.addEventListener("pageshow", () => {
  new Vue({
    el: "#app",
  });
});

But I do not know other implications of this, whether it works in all browsers, etc.

I have also noticed that this makes it so the prefilled form fields are reset to the components default values. Ideally Vue would pick up Chrome's prefilled form fields and bind them into its data fields.

I'm also surprised this issue doesn't have more traction.

[aarondfrancis]

Also running into this.

[andre-brdoch]

with the autocomplete attribute you can prevent the browser from autofilling your form. However, users will also not receive suggestions anymore.
Here is a dirty hack that prevents it on back-navigation, while still allowing the user to use autocomplete:

<template>
  <form :autocomplete="autocomplete">
    <slot />
  </form>
</template>

<script>
export default {
  data() {
    return {
      // disabled by default, to prevent browsers autofill when navigating backwards after submission
      autocomplete: 'off',
    };
  },

  mounted() {
    // enable after slight delay for the user:
    setTimeout(() => {
      this.autocomplete = 'on';
    }, 200);
  },
};
</script>

[euoia]

Just thought I'd add a bit more information on this.

Wrapping new Vue() in the pageshow fixes Chrome but breaks Safari (iOS and desktop). The behaviour you'll see is that the input is empty, but the DOM is still the same as if the input had text.

I haven't found a way to reliably work around this issue in Chrome without breaking Safari. The Vue core contains this code:

export const isChrome = UA && /chrome\/\d+/.test(UA) && !isEdge

https://github.com/vuejs/vue/blob/a9a303009a4267b7f12b956741b4e34dfdc6566f/src/core/util/env.js

Which implies that testing the user agent is reliable. So I wonder whether I was mistaken when I commented previously that the Chrome user agent did not contain the string "chrome". In any case, my version of Chrome now does contain "chrome" so I will go back to inspecting the user agent string.