Hello,

We have a a case where a table editor is implemented with very specific validation on the numeric inputs. The user needs real-time feedback as they enter values and the values they enter then need to be processed on the backend.

Expected behavior

Front end validation is performed and the input.value is updated or asserted to be acceptable. The row is confirmed and the value that was displayed in the input is displayed in the table.

Actual behavior

The input value is updated or asserted and displays correctly while the row is being edited. When the row is confirmed, however, a different value is instead recorded and displayed. This value appears to be what would have been entered if the input.value had not been edited. Curiously, if more than one edit is made to the value in the input, it seems to update partially.

For example, in the code snippet here, we implement a trivial validation for demonstration that the number entered must always be 42. When a row is first edited and the number changed, it indeed shows 42. But when the row is confirmed, a different number is recorded in the table.

For example, if I edit the first row (with the number 30) and backspace once in the numeric input, 42 is displayed, but confirming shows 3. If I edit the row again, 3 is shown, if I add say 5 onto it, I again see 42, but confirming gives 35. Now very curiously, if I again select this row I will see 35 but backspacing twice does not give an empty string, it shows 42 but confirming results in 4. It is as though the edit cached the initial value, the first change modified it but subsequent changes modified the displayed value.

This is all very counter-intuitive and the input.value should be what is recorded when a row is confirmed.

Please advise on possible workarounds until this can be resolved or an alternative way of enforcing complex validation in such numeric input fields.

Thanks!

Resources (screenshots, code snippets etc.)

Code snippet