How to force HOT to apply all changes or pause untill internal processin is complete?

Tags: #<Tag:0x00007efc61c349c0>
#1

I have a sort of racing condition when using HOT that causes not all changes to be visible during the data processing.
The general scenario is as follows:

  1. Enter cell editor and type in some changes you are interesed in (eg required field)
  2. Click external SAVE button (loose focus on the editor), that triggers validation which is as below
  3. Get table data
  4. Validate
  5. Provide feedback to the user.

The problem is that between 1 and 2, HOT sometimes does not manage to update its internal data state (editor changes not yet applied) so it sometimes works and the last change is visible in 3, and sometimes it does not as it is delayed.

I have kind of confirmed it by adding afterChange hook log message which results in:
image

and sometimes it works correctly and the order is as you would expect
image

Now, how can I either force HOT to get a grip and apply all pending changes/events right here right now, or how can I wait/delay execution of my code until beeing sure that HOT have done all of its stuff?

I have checked that beforeChange is much more reliable and it called before my code is beeing executed. Should I wait for beforeChange/afterChange events pairs to be sure that processing is done?

#2

Hi @sebastian.choina

By saying

do you mean to get the spot when the validation is finished? If so you can use the afterValidate hook.

#3

I am not sure if I mean validation. In general all the things that HOT is doing after editor lost its focus that will lead to update interal model so getData() will reflect the changes.

Now I am counting beforeChange and afterChange invocations and proceed with the execution if invocation counts are equal.

#4

The afterChange usually runs after all of the CRUD operations and validation. What you can also test is this demo https://handsontable.com/docs/events-and-hooks/#all-available-hooks-example
It does not have validation, but we put a link to JSFiddle so you can alter the settings. Generally, this is the best demo for tests related to hook order.

#5

If I select all in the jsfiddle, browser freezes :wink:

I think that sort of test method is missing in HOT api like hot.isStable() or even better hot.whenStable() that would return primise that resolves when hot is indeed stable and no CRUD events are scheduled. Like I have wrote before, I have to count beforeChange+afterChange invocations and consider it beeing stable after afterChange fires and invocation number of both hooks are equal

#6

Yes. This is why we do not have this option turned on by default. There are many hooks involved in the process of loading a simple table.
But I think that your hook idea is great. I encourage you to post it as a feature request on our Github discussions panel.

#7

I think its done

#8

Yes. I confirm. Thank you @sebastian.choina

#9