1569680 - Element.setAttribute() on input element moves cursor to beginning of input box

Status: RESOLVED INVALID

(Core :: DOM: UI Events & Focus Handling, defect)

Description

[Mike]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:68.0) Gecko/20100101 Firefox/68.0

Steps to reproduce:

HTML
<input type="email" id="user_email">

JavaScript (some jQuery)
$('#user_email').on('input',function() {
if ($('#user_email').val().indexOf("\") > 0){
document.querySelector('#user_email').setAttribute('type', 'text');
}
else{
document.querySelector('#user_email').setAttribute('type', 'email');
}
});

Start typing into the text box and then type \

The \ will trigger the attribute change and the cursor will jump to the beginning of the input box.

CodePen link https://codepen.io/anon/pen/LwxoOp

The behavior only seems to occur when going from type "email" to some other type.

Actual results:

The cursor jumps to the beginning of the input box.

Expected results:

The cursor should continue at the end of the text while inputting text.

Comment 1

[Rares Doghi, Desktop QA]

Hi, I managed to reproduce this issue in All versions of Firefox from Release to Beta as well as Nightly using this URL https://codepen.io/anon/pen/LwxoOp ,
and I was able to reproduce the same issue in Google Chrome, however if I copy the code into a normal text file and save it as .html the issue no longer occurs when I open that HTML in Firefox type something in the field and then hit the "" key.

I will set the component for this issue but I'm not entirely sure its the correct one or if this is an actual defect or not, maybe our developers will know more about this issue. Thank you for taking the time to report it.

Comment 2

[Olli Pettay [:smaug][[e-mail]]]

From HTML specification
"If previouslySelectable is false and nowSelectable is true, set the element's text entry cursor position to the beginning of the text control, and set its selection direction to "none"."

And previouslySelectable is false here because of type=email and nowSelectable is true because of type=text.

If you want to change the HTML specification, file a spec bug https://whatwg.org/newbug