When using chromium the "placeholder" text doesn't disappear and the text you type is behind it

Get Help
,
1

We have an application called “Perspective Workstation” that loads a web page via chromium in a desktop application. Auth0 is attached to the logins here and when users type their username, password, and mfa email challenge the ‘placeholder’ text in the fields doesn’t go away when they start typing and the text they are typing is hidden behind it. I’m not sure how to fix this, could I just remove the placeholder text somehow?

3

Hi @pinnacle

Welcome to the Auth0 Community!

We have received several reports regarding this issue and our engineering team is currently working on a fix. I am sorry about the inconvenience this has caused you and I will come back with an update as soon as possible regarding the matter! As a temporary workaround, I would advise to implement custom code in order to display the email in a label or text outside of the box.

Kind Regards,
Nik

4

Hi again @pinnacle

Our engineering team has pushed a fix for more recent browsers. 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

1 Like
6

Hi @nik.baleca,

Thank you for this. I actually used this solution with some adjustments to make it accessible as setting sr-only style and make sure the page was loaded with event listener.
In any case this is temporary as it affects not only this specific product with old chromium version but other Saas products of ours as its universal login.
We are waiting for your updates about the legacy browsers support so we will be able to remove this hack.

Please let us know when can we expect this fix for legacy.

Thank you,
Shanis

7

Hello everyone!

The engineering team has advised that the fix has been rolled out on all available environments. You should not experience issues with the placeholder text at this time.

If you have any other questions or still experience issues with the placeholder texts, feel free to leave a reply!

Kind Regard,
Nik

1 Like
8

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.