Firefox asks for password saving even after login component is removed from page

Question

If we have component with login and password fields created in application, then after we navigate to other component through router Firefox asks for password saving. Answering "No" does not help, because notification appears again and again while we are navigating between pages.

But if we did not create component with login and password fields (did not open url with this component), then navigating does not invoke notifications.

Seems like, form with login and password appears in DOM and disappears at the same moment, so Firefox thinks that we have logged in successfully.

But it make no sense, because after we left the page with inputs, component is destroyed.

Chrome does not have such problems, so it's not clear if it is Angular bug or just Firefox bug.

Expected behavior is that Firefox should ask about saving password only once, but not each navigation between pages.

Plunker with demo http://embed.plnkr.co/SUcx1ZJMFVXMeI4aJZ41/

1. Navigate to Page 1
2. After that navigate to Password
3. And after that navigate to Page 1 again. Notification will appear.
4. Answer "No" and navigate to Page 2. Notification will appear again.

After that try same example, but without creating form with login and password

1. Reload plunker (may be reload of all page is needed)
2. Navigate to Page 1
3. Navigate to Page 2
4. Notification will not appear until we navigate to Password page.

Did anyone encounter such behavior and know how to solve it? The notification is very annoying.

UPD 18.04.2018: Previously we noticed, that the problem appeared only in JIT compilation. For production and AOT build everything worked fine - no prompt with password save proposal was shown. So there was the problem somewhere, but it was annoying only for developers.

Several days ago we upgraded Angular to version 5.2.10, NodeJS to version 8.11.1 (we used 7.10 before). After that the problem appears in production mode too.

Still there is no solution or clearness what is the cause.

Answer 1

I don't know if this will be helpful. I noticed this problem while using Vue.js when my password element was not enclosed in a <form> element. To remedy I surround my login fields with a <form> element on which I set the preventDefault directive for the submit event. It looks like this in Vue.js:

<form v-on:submit.prevent>
Username: <input v-model="username" />
Password: <input type="password" v-model="password" />
</form>

I should mention that you still do get asked to save the password when you submit the form, but subsequent navigations do not raise the prompt anymore.