Debounce on an input doesn't appear to work

Wappler General Bugs
#1

Wappler Version : 4.9.1
Operating System : Win 10
Server Model: Node JS
Database Type: PostgreSQL
Hosting Type: Docker

Expected behavior

When you set a debounce on something like a ‘search input’ the API shouldn’t be called till after the debounce time.

Actual behavior

The API is being called with every keystroke regardless of debounce time.

How to reproduce

Here is the input i have:

<input id="inp_quickSearch" name="inp_quickSearch" type="text" class="form-control form-control-sm" placeholder="Search" dmx-on:updated.debounce:6000="quickSearch.setValue(value)">

The 6000 was just to ensure i could see the delay. With this, the API that this search filed is related too is being called with every keystroke.

I have also tried this with dmx-on:changed and dmx-on:input

#2

Hmm. Both updated on changed w/debounce are working for me.

You mention an API being called, but you are using a setValue on your updated, so maybe you have something setup wrong elsewhere.

#3

Well the setValue is just to a wappler variable, that is naturally just a parameter of a server connect API, this is an old page that i’ve come back to recently to fix some bugs and it’s just something i’ve noticed.

there’s not too many moving parts with this so i’d have thought it would be fairly simply to see if its working or not. I appreciate you testing it on your end though

#4
#5

I am experiencing the same problem with both 4 and 5.

<input type="email" class="form-control" id="email" name="email" aria-describedby="input_email_help" placeholder="you@email.co.uk" required="" dmx-on:updated.debounce:300="checkEmail.load({email: value})">

There is no delay it fires the server connect call instantly.

#6

This issue is still happening for me to in the original scenario posted

#7

Are there any errors in the devtools console? I tried it myself and it works fine for me.

#8

Good call Patrick

I found the errors caused by datepicker.

Once I disabled datepicker etc debounce started working.

Any idea what causes the datepicker errors? As I have never been able to get it to work.

image
image1259×339 50.9 KB

#9

It’s difficult to say, if you also have the source map files of datepicker then you can click on the error to see where in the source code the error is generated. In the screenshot I only see that is is trying to read a property fn from an object that is undefined. The second error is probably a result of the first error and daterangepicker is never defined and also the cause that the picker isn’t working.

#10

May sound trivial but are you sure the date range picker .js links are included in your template page, so easy to forget to save the header when adding new components