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