1542483 - When input type is number then focusin and focusout events fire automatically without any invocation

Status: RESOLVED DUPLICATE of bug 1057858

(Core :: DOM: Events, defect)

Description

[Manpreet Singh]

Attachment: h.html

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36

Steps to reproduce:

I have code running perfectly in all browsers except Firefox. I am running it in Firefox Quantum Version 66.0.2 (64-bit). I have three HTML input controls, all have their display style set to none. Clicking on a link shows first input. On focusout event of first input, first input hides and second input becomes visible. Similarly on focusout of second input, second input hides and third becomes visible.

Following are simple functions bind events

function showFirst() {
//Show first input
$('#first').css('display', 'inline');
$('#first').focus();
}

$(document).ready(function () {
$('#first').focusout(function (event) {
//Write log
$('body').append('first focusout <br/>');

    //hide itself
    event.currentTarget.style.display = 'none';
    //show next input i.e. second
    $('#second').css('display', 'inline');
    $('#second').focus();
});
$('#second').focusout(function (event) {
    //Write log
    $('body').append('second focusout <br/>');

    //hide itself
    event.currentTarget.style.display = 'none';

     //show next input i.e. third
    $('#third').css('display', 'inline');
    $('#third').focus();
});
$('#third').focusout(function (event) {
    //Write log
    $('body').append('third focusout <br/>');

    //hide itself
    event.currentTarget.style.display = 'none';

     //show next input i.e. first
    $('#first').css('display', 'inline');
    $('#first').focus();
});

});

Following are three HTML inputs
<!--It will show first input-->
<a href="#" onclick="showFirst();">Click to show first</a>

<!--Its focusout event will hide it and will show second input-->
<input type="text" id="first" value="" style="display:none;background-color:yellow; color:black;" placeholder="First" />

<!--Its focusout event will hide it and will show third input-->
<input type="number" id="second" value="" style="display:none;background-color:red; color:white;" placeholder="Second" />

<!--Its focusout event will hide it and will show first input-->
<input type="number" id="third" value="" style="display:none;background-color:green; color:white;" placeholder="Third" />
<br />
<br />
<a href="#"> </a> <!--Just to receive focus-->

Actual results:

When 'Click to show first' is clicked, it shows 'first' input. When tab is pressed then focusout events of 'second' and 'third' are fired by itself and 'second' and 'third' inputs are never shown. Interestingly if input type of all is changed from number to text then same code works fine.

Expected results:

Clicking on 'Click to show first' would have shown first input: passed

on focusOut of first input, second input should show and wait until user causes focusout.: failed

on focusout of second input, third input should show and wait until user causes focusout.: failed

on focusout of third input, first input should show and wait until user causes focusout.: failed

Comment 1

[Alice0775 White]

Attachment: Bug 1539172 - test type=number.html

elm.style.setProperty('display', 'inline', '');
elm.focus();

Web consoloe whows:
blur
focus
focus

blur event and surplus focus event fire unexpectedly.

Comment 2

[Alice0775 White]

Attachment: Bug 1539172 - test type=text.html

only focus event fire as expected

Comment 3

[Alice0775 White]

If change |elm.focus();| to |setTimeout(() => {elm.focus();}, 0);| in attachment 9056346 [details],
Then it seems to work as expected.

Comment 4

[Mats Palmgren (:mats)]

Dupe of bug 1057858?

Comment 5

[Hsin-Yi Tsai (away for a while) [:hsinyi]]

(In reply to Mats Palmgren (:mats) from comment #4)

Dupe of bug 1057858?
It looks so!

Feel free to reset if this is not the duplicate case.