Best practice for saving events/input fields on change (especially rich text input field)

Ask us anything
1

Hi all,

Who has a best practice for a good user experience to (automatically) save event changes of input fields?

What I have tried so far:

  • simple save button: works fine, but is yet another visible button that requires pressing
  • automatically save on changes (with or without debouncing): when directly hooked up to an API call, especially with a rich text input field this causes a glitch/disturbance when typing through the moment of the API call - resulting in a messy experience (where the focus on the field is lost requiring the user to re-select the field to continue typing).
  • pressing enter on a field doens’t work for all input field, such as a rich text.
  • double mouse click works fine on desktop, but not on tablet/mobile.
  • BEST ONE I FOUND SO FAR: automatically save on changes to a variable (object) that is saved in the background via an API-call - detached from the work done by the user. ← this seems by far the smoothes/least noticeable method, but I’m just wondering how to best automate the API-call (is it perhaps a timer that triggers the API after a few seconds of inactivity by the user?)

Any contributions are highly appreciated!

Thanks,
Thijs

2

So it sounds like you know the input elements are directly accessible - so the data is live there which you’ll see change in the logs on every keystroke.

Now if you set a workflow on that element to trigger “on change” you can then action whatever you’d like such as your API save.

Be careful not to save it on literally every change otherwise you’ll overload the server for one!

I would opt to set a “delay” of a few seconds as a second step to the on change event before firing the API call.

image
image317×263 8.91 KB

image
image406×260 8.77 KB

But if you’re looking for absolute realtime changes, you need to step into the world of the fairly new integration of Supabase Realtime which is designed for live chat etc.

image
image294×117 5.83 KB

1 Like
3

@what.gift solution will work there’s also a few other ways you could do this

You can also set a on blur workflow so when someone unfocuses the input it will then trigger the workflow

image
image639×210 2.6 KB

1 Like
4

Hi @Yaj ,

With ‘on blur’ the event value is no longer recognized. So I suppose this means I need two workflows:

  • Workflow 1: record a variable with the initial value ‘on focus’
  • Workflow 2: overwrite that variable ‘on change’
  • Workflow 3: make API-call with data in that variable ‘on blur’

If you have a better suggestion, I’d love to hear it.

5

I used context.thisInstance ._value with onblur and that seems to work

6

“Debounce” is what you are looking for. It will wait for X amount of ms before executing the workflow. It is an inbuilt feature for all inputs

7

Hi @Himanshu ,

Debounce is error sensitive/not friendly to every user: different users have different speed of typing - ranging anywhere between less than a second for a fast typer and +5 seconds for a slow typer (yes they do exist :-)). No matter how you set the debouce time, someone will experience an error: with a short debounce the slow typer will experience glitches (during their typing) and with a long debounce the fast typer risks his/her changes not being recorded in time.

The 3-step method I described at the start of this thread works flawlessly every time - but it takes a moment to setup. For next time, I’ll try the suggestion of @toasttours.

Thanks!