1967915 - the onchange event is only fired every second time

Status: RESOLVED DUPLICATE of bug 53579

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

Description

[Paul Heger]

Attachment: BWI-104.png

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

Steps to reproduce:

i have a table with input fields and when the user changes the first field value,
and goes to the next field (by tab or by click on the next field) the event is fired.
in the second field the user does the same, but the event is not fired.
third field ok again, forth bad again, and so on.
when the user goes back to field #2 and changes the value again, the event is fired.
In Edge the event is always fired.
All fields have the same function, only the parameters are different (this, col)
i tried both types:
//aInput.onchange = function(){ ChangedValue( aInput, col ); };
aInput.addEventListener("change", ChangedValue( aInput, col ) );
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:138.0) Gecko/20100101 Firefox/138.0

Actual results:

every second time the event is fired
every other time, the event is not fired

Expected results:

the function should have been called every time

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::DOM: Events' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Andreas Farre [:farre] (PTO -> Aug 1st)]

Thank you for the report!

I think we need some more information around what's failing. Is the following what you're describing:

<td><input type="text" onchange="..."></td>
<td><input type="text" onchange="..."></td>
<td><input type="text" onchange="..."></td>
<td><input type="text" onchange="..."></td>

Comment 3

[Paul Heger]

Attachment: the .js file where the functions are defined

the addInput function creates theses inputs
inside a function addRow which i will add next

Comment 4

[Paul Heger]

Attachment: the whole file to display

this module displays a table for one person to store data for every day of a month.
there the user can add rows for selectable accounts and enter values.
After the value is entered, the onchange should check the sums are not exceeded for one day,
recalculate the values for the row and column sums.
But if the onchange is not fired, the checks are not done.
Can be seen on the picture i posted. red means, the values exceed the daily work done.
There is also no difference, whether the field is created by addInput, or by the java part of the jsp.

Comment 5

[Vincent Hilla [:vhilla]]

Thanks for sharing the code. It relies on external dependencies, so it's hard to reproduce locally. Could you provide a minimal reproducible example or a link to a deployed version?

Comment 6

[Paul Heger]

Attachment: html file to reproduce the problem

it seems to have something to do with the xtable framework
because when i recreated this simple file without xtable the error did not occur.

Comment 7

[Andrew McCreight [:mccr8]]

Given that this works with Edge, it sounds like there's a web compat issue here. I don't know how widely used the xtable framework mentioned in comment 6 is.

Comment 8

[Vincent Hilla [:vhilla]]

Attachment: test_bug1967915.html

The issue seems to be how alert and element.focus interact.

---

I attached a MRE.

STR

• Select the first input element
• Repeat: enter some text, press tab, dismiss any alerts

In Firefox, tab will move the focus to the next element. Though a focus indicator will remain on the second input, and there won't be a change event for it.

In Chromium, focus stays on the first element after tabbing.

Comment 9

[Vincent Hilla [:vhilla]]

I recorded a pernosco trace: https://pernos.co/debug/5DAcX5pcrxtmsWDQmeVkKQ/index.html

It seems, we don't get a blur event for the second input element. In Chromium, we actually get four events when tabbing: focus, blur, blur, focus. In Firefox, it's only blur, focus.

In general, a workaround could be to wrap setTimeout(() => i.focus(), 0). Though adding that to the ChangedValue method of the original code isn't enough.

Comment 10

[Vincent Hilla [:vhilla]]

Attachment: test_bug1967915.html

Comment 11

[Vincent Hilla [:vhilla]]

Huh, this was just fixed by bug 53579.