React: IE 11 "prompt to remember password" regression bug since 15.2.0

[luisrudge]

Note: this issue seems solved for Edge but not for IE 11, see https://github.com/facebook/react/issues/12749#issuecomment-412671171

This issue was already raised, but since it was closed, I'm opening a new one so we can get more traction on this.

I'm still having this issue with both IE and Edge:

Works with 15.1.0: https://codesandbox.io/s/lpvz0zy9wq
Doesn't work with 15.2.0: https://codesandbox.io/s/o9kl2jzo1q
Doesn't work with 15.6.2: https://codesandbox.io/s/38kp95wl96
Doesn't work with 16.3.1: https://codesandbox.io/s/xjpk3wr55p

In order to test this effectively, you have to follow a few steps:

Using Edge, go to Settings >> View Advanced Settings, under Privacy and Services

• make sure you have Offer to save passwords enabled:
  

• make sure you don't have any passwords saved in the codesandbox.io domain:
  

Steps to reproduce when IT WORKS (15.1.0)

• go to the 15.1.0 sandbox
• type a username and a password and hit submit
• you'll see a confirmation panel about saving passwords:
  
• refresh the page
• type another username and a password and hit submit
• you'll see another confirmation panel about saving passwords:
  
• refresh the page
• click on the first input
• you'll see a list of the previously used usernames:

Steps to reproduce when IT DOESN'T WORK (15.2.0, 15.6.2, 16.3.1)

• remove previously saved passwords from the codesandbox.io domain:
  
• go to any of the non-working sandboxes (15.2.0, 15.6.2, 16.3.1
• type a username and a password and hit submit
• there will be no password confirmation panel
• refresh the page
• click on the first input
• there will be no list of previously used usernames

[benlonsdale]

Anybody know of a workaround for this?

[nhunzaker]

Hey @benlonsdale! If memory serves, a lot of this boils down to touching the password input's value property/attribute. At least, this definitely fixed the "eye" icon to expose the password.

This might be fixed. We made some changes to prevent premature validation FF on required inputs that might also fix this issue. Testing on 16.4.1, I can get the prompt to show up:

Can you take a look at my fork for 16.4.1 and confirm?
https://codesandbox.io/s/84pv0xx9n9

[luisrudge]

@nhunzaker will this backported to 15.x?

[nhunzaker]

Hey! Sorry for the delay. That is a good question. I am not sure if there was another 15.x release planned, but I can bring it up with the team.

I'll report back tomorrow!

[aweary]

At this point it seems unlikely that we'd do another 15.x release.

[luisrudge]

Would you consider making an exception for this clear bug regression?

[gaearon]

No, we don't backport anything to old majors except critical issues. It's too risky to accidentally break havoc. Especially with 15.x our release process was very complicated because of two side-by-side codebases, and it's not worth the risk touching that again.

This bug is not special — we've had quite a few regressions like this (hopefully most of them are fixed). I'm closing since this is reported to be fixed in the latest version of React. Sorry couldn't help more.

[luisrudge]

16.4.1 works for me. Thanks!

[yiochen]

This seems working for Edge now with React 16.4.2 (and 16.4.1)
But still doesn't work for IE11.

React 15.1.0 on IE 11:

React 16.4.2 on Edge:

React 16.4.2 on IE 11:

Code sandbox example:
https://codesandbox.io/s/886r26yr9

Code sandbox editor doesn't support IE 11. But the preview can be open in IE 11:
https://886r26yr9.codesandbox.io/

[gaearon]

Reopening to track IE11 issue.

[nhunzaker]

Quick tests indicate that setting node.defaultValue or node.setAttribute('value') results in the loss of this behavior. The next thing I want to figure out is if this matters before or after the input is attached to the page, and if there is a difference between 15 and 16 on if attributes are attached before or after adding them to the DOM.

[ValeryG]

any resolution on this one? (or maybe workaround)?

[bastischulz]

I finally found a workaround for this.

TLDR: window.external.AutoCompleteSaveForm(form.cloneNode(true));

I do not know exactly why it works, but I believe value changes are not properly recognized on controlled components. The function mentioned above is IE-exclusive, you need a try-catch block for it, because it's always shown as undefined, even in IE.

Cloning is necessary to ensure that all values ​​are present from the beginning.

[erikrenberg]

@bastischulz Where do you put that function call in your component? (for example, how to you modify the code in the sandbox code linked to above?).

(I tested you workaround, and it works!, but I'm not sure where to put it: In my hacky test I added it to a submit-handler for the form, and also added a "ref" to the form in render() so that I have the form to call cloneNode() on. I'm not convinced this is the best way to do it.)

<form
   ref={form => {
      this.form = form;
    }} 
...

[marudhupandiyang]

@bastischulz solution works. Tested on IE11 with React 15.6.2.

[bastischulz]

@erikrenberg - We have a more complex Form, but I did something like this: https://codesandbox.io/s/yw40ny71x