IgniteUI / ignite-ui

Ignite UI for jQuery by Infragistics
https://bit.ly/2kuu1fT
Other
477 stars 83 forks source link

[IE11] igNumericEditor does not commit input value by the time the focus moves to igGrid row #2040

Closed ymita closed 4 years ago

ymita commented 4 years ago

Description

igNumericEditor does not commit input value by the time the focus moves to igGrid row (rowSelectionChanging event). This happens only on IE11.

Steps to reproduce

  1. Run the attached sample
  2. Enter '123' to igNumericEditor
  3. Click a row on igGrid
  4. Enter '456' to igNumericEditor
  5. Click a row on igGrid igNumericEditor_value

Result

On step 3, value input on igNumericEditor is not committed so that igNumericEditor's value option or method does not return the displayed value. On step 5, the retrieved value from igNumericEditor is '123'.

Expected result

On step 3, value input on igNumericEditor is committed so that igNumericEditor's value option or method returns the displayed value. On step 5, the retrieved value from igNumericEditor should be '456'.

Note

The application works as expected with Chrome and Firefox.

Attachments

index.zip

Lipata commented 4 years ago

The fix that needs to be added in the application is the following (see also the attached file):

rowSelectionChanging: function(evt, ui) {
    $('#num').igNumericEditor("field").blur();
    ...

Because at the time the rowSelectionChanging event is fired, the igNumericEditor is not blurred, therefore editor's value is not updated, the solution above will force the editor's value update before any other logic in the grid to be executed.

What really is happening, is the following. You can look at the attached demo and the event handlers attached to the editor, grid and one HTML div. If you focus editor and update its value (with 123) then click on the HTML div (the same will happen also for the igGrid) the event order is the following:

  1. DIV pointer down (only in IE11)
  2. DIV mousedown
  3. igEditor blur
  4. igEditor valueChanged: 123
  5. DIV pointer up (only in IE11)
  6. DIV mouseup

This behavior is the same in all browsers. The selection in the igGrid happens in mousedown event grid's handler. Therefore the logic of grid selection starts before editor's update of the value. In that case, it seems that the behavior in IE seems more correct than that in the Chrome browser. However, this depends more on how fast the logic of the grid selection or editor update value is executed. And in the Chrome and IE11 the execution differs.

Since the time the igNumericEditor and igGrid have been created, browser events and their execution order may have changed. Having a solution like above is preferable than changing the components logic and their event handling, because this may destabilize them. Closing the bug as not-to-fix.

index.zip