I recently encountered an issue with the login form on my Android 10 device. When I attempt to enter text in the input field, the placeholder does not disappear or move up. Instead, it stays in place and covers the text I am typing. This issue was not present before and has only started occurring recently.
Hi @thuc.ngo
Welcome to the Auth0 Community!
Our engineers are aware of this issue and are working on a fix. They have estimated that the fix will be rolled out by the end of the week in most of the public cloud spaces. In the meantime, here is a proposed workaround for the issue, however, please keep in mind that it might not be suitable for your integration but it is work to try it out:
// This code moves the labels before the input field
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();
If you have any other questions, feel free to leave a reply!
Kind Regards,
Nik