Closed Bug 1542483 Opened 2 years ago Closed 2 years ago

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

Categories

(Core :: DOM: Events, defect)

defect
Not set
normal

Tracking

()

RESOLVED DUPLICATE of bug 1057858
Tracking Status
firefox-esr60 --- wontfix
firefox66 --- wontfix
firefox67 --- wontfix
firefox68 --- fixed

People

(Reporter: m9815402440, Unassigned)

References

Details

(Keywords: parity-chrome, parity-edge)

Attachments

(3 files)

Attached file 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

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

Web consoloe whows:
blur
focus
focus

blur event and surplus focus event fire unexpectedly.

only focus event fire as expected

Status: UNCONFIRMED → NEW
Component: Untriaged → DOM: Events
Ever confirmed: true
Product: Firefox → Core
Version: other → Trunk

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

Has STR: --- → yes
Blocks: 344616

Dupe of bug 1057858?

(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.

Status: NEW → RESOLVED
Closed: 2 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 1057858
You need to log in before you can comment on or make changes to this bug.