Currently I have a text input which triggers a callback each time a value changes, i,.e. each time a new letter is added/removed as you type. My callbacks are rather slow, so it would be much better if the callback was only triggered once, when the input looses focus,
As the draft architecture guide hints, what I want is to use onBlur event as my Input trigger, and just pass value as a State. However I don’t believe that Input component currently allows me to hook into onBlur event, does it? How can I achieve this?
Thanks!
Maybe workaround for now could be to use Interval component as Event trigger, and pass value as State, store it in hidden div, but before that compare with old stored value, if they are different, then fire the slow callback logic.
That way change will fire long process only max once a second (or any time you choose), one drawback though is that if user finishes input, he will still have to wait the set time to even fire the process, that itself takes long time.
Since this was the first Search result for me…
This is solved with the Input(..., debounce) parameter. See https://dash.plot.ly/dash-core-components/input :
debounce ( boolean ; default False ): If true, changes to input will be sent back to the Dash server only on enter or when losing focus. If it’s false, it will sent the value back on every change.
You can get more control by using n_blur and n_submit as inputs to your callbacks. Just remember to add value as state to the callback too so that you can access the value but it doesn’t trigger the callback.
tc - while this is the convention I use currently, I find that the users experience a perceived lag because the callback will always fire twice if you actually hit the enter button; on long callbacks that seems wasteful.
Have you used the debounce feature, and does that prevent this double fire scenario?