[Issue] Overlay issue for email/password fields

Get Help
,
1

Hi Auth0 team, it looks like the Overlay issue has reappeared for us as of today (placeholder text doesn’t disapear or move). Any chance you can provide some feedback?

6 Likes
2

I am trying to post an image and link to a related issue but I am not allowed to do so yet

community . auth0 . com / t / bug-autofill-overlay-on-login / 147988

4

Hi @mthomas

Welcome back to the Auth0 Community!

I am sorry about the inconvenience this has caused you. There is an open ticket regarding this bug and the engineering team are working on the issue. There is no ETA at this time, however the fix should be available in the next update as soon as possible.

Could you please let me know if you have experienced this before? Did the issue get fixed and now has reappeared?

Kind Regards,
Nik

2 Likes
6

Same issue here, sporadically occurring for our customers. I don’t believe we’ve experienced this issue before.

1 Like
7

This is impacting us as well and is considered a critical issue on our side. To add context this issue is occurring inside of Microsoft Edge WebView2. Our customers that use username and password to login cannot see what they are typing in.

This issue has not impacted us before.

In a DevTools window it looks like it is on the dynamic label. We see two references to the overlay:

<div class="input-wrapper _input-wrapper">
                              <div class="c93cc81e9 cf75493b6 text ce1bda86b cca0ea6d9" data-action-text="" data-alternate-action-text="">
                                <label class="c9f766a3e no-js cfc6b1242 cca2b8067" for="username">
                                  Username or email address
                                </label>
                              
                                <input class="input ca728610e c0a4e4633" inputmode="text" name="username" id="username" type="text" value="" required="" autocomplete="email" autocapitalize="none" spellcheck="false" autofocus="">
                              
                                <div class="c9f766a3e js-required cfc6b1242 cca2b8067" data-dynamic-label-for="username" aria-hidden="true">
                                  Username or email address*
                                </div>
                              </div>
                            
                              
                            </div>

If I remove second overlay in the DevTools window we can type in the username, but the overlay message does not appear.

<div class="input-wrapper _input-wrapper">
                              <div class="c93cc81e9 cf75493b6 text ce1bda86b cca0ea6d9" data-action-text="" data-alternate-action-text="">
                                <label class="c9f766a3e no-js cfc6b1242 cca2b8067" for="username">
                                  Username or email address
                                </label>
                              
                                <input class="input ca728610e c0a4e4633" inputmode="text" name="username" id="username" type="text" value="" required="" autocomplete="email" autocapitalize="none" spellcheck="false" autofocus="">
                              
                                
                              </div>
                            
                              
                            </div>

Nothing changes if we removed the first label overlay.

Please let us know if you need any more information.

8

Hi everyone!

Our engineering team has pushed a fix for more recent browsers affected by this issue. However, there is another fix expected to be pushed somewhere around next week for legacy browsers.

In the meantime, here is a proposed JS code which could fix the issue that you are facing:

 const usernameLabelDiv = document.createElement('div');
  usernameLabelDiv.innerHTML = 'Email'; // put the name of the email field you want to display here
  usernameLabelDiv.style = 'padding-bottom: 5px;'
  const usernameElement = document.querySelector("label[for=username]").parentNode;
  usernameElement.parentNode.insertBefore(usernameLabelDiv, usernameElement.parentNode.firstChild);
  usernameElement.querySelector("div").remove();
  document.querySelector("label[for=username]").remove();

  const passwordLabelDiv = document.createElement('div');
  passwordLabelDiv.innerHTML = 'Password'; // put the name of the passwordd field you want to display here
  passwordLabelDiv.style = 'padding-bottom: 5px;'
  const passwordElement = document.querySelector("label[for=password]").parentNode;
  passwordElement.parentNode.insertBefore(passwordLabelDiv, passwordElement.parentNode.firstChild);
  passwordElement.querySelector("div").remove();
  document.querySelector("label[for=password]").remove();

Kind Regards,
Nik

10

Apparently the update rolled out to our tenant today, and caused overlay issues for at least 3 applications using embedded webviews of various age (some EssentialObjects.WebBrowser, some CEFDelphi). The JS workaround worked, except one of the application had taken a dependency on some of the removed elements. So we modified the JS to hide the elements instead, and are back to stable operations.
Is there somewhere you can see when various updates roll out to your tenant (assuming Auth0 does not roll out updates to all tenants at once)? Here we were caught on the wrong foot, scrambling to determine if we, Auth0 or the applications were the source of change that caused the issue.

11

Hi @michaelkc

Unfortunately, there is not the option to view if a fix has been provided for your specific region/environment. The fix should be released for most public cloud spaces by the end of the week. I can provide you a quick update when that happens in order for you to review your applications and resume optimal operations as before.

Kind Regards,
Nik