Javascript - Delay UI events until promisse finishes

I am porting an application to the web. All client logic already exists, and is executed on server side. So, I have the following behavior: An Form with 3 fields (Name, Ammount and Value, for example), and a button to Save. When pressing Ctrl+S, the 'Save' button is triggered, all 3 fields are cleared and the focus goes to the first field. The user does not want to wait for the server finish the promisse of the save button, to start the input of the next item. So, he start typing while still processing the save button, and those keys are lost, or placed on the other form fields. I need to somehow hold the user input, and, after the Save logic is done, release the events. So far, I prototyped with the following approaches: Transform all Promises into sync methods. This way works, but chrome gives an warning saying XMLHttpRequest on the main thread is deprecated. Manually catch the UI events and manually handling them once the promisse is fullfiled. This also works, but there are several issues, like handling Ctrl+C,V and others, and is far more complex... I am not happy with any of this options, so asking here about any other possible approaches?

Marayaty Marayaty
Aug 28, 2024 - 03:22
0 6
Javascript - Delay UI events until promisse finishes

I am porting an application to the web. All client logic already exists, and is executed on server side.

So, I have the following behavior: An Form with 3 fields (Name, Ammount and Value, for example), and a button to Save.

When pressing Ctrl+S, the 'Save' button is triggered, all 3 fields are cleared and the focus goes to the first field.

The user does not want to wait for the server finish the promisse of the save button, to start the input of the next item. So, he start typing while still processing the save button, and those keys are lost, or placed on the other form fields.

I need to somehow hold the user input, and, after the Save logic is done, release the events.

So far, I prototyped with the following approaches:

  • Transform all Promises into sync methods. This way works, but chrome gives an warning saying XMLHttpRequest on the main thread is deprecated.
  • Manually catch the UI events and manually handling them once the promisse is fullfiled. This also works, but there are several issues, like handling Ctrl+C,V and others, and is far more complex...

I am not happy with any of this options, so asking here about any other possible approaches?

Read More