Debouncing doesn't seem to work for repeater fields / nested data doesn't respond to the @input event

[JackEdwardLyons]

Describe the bug Debouncing does not appear to be working. This is especially evident when entering data into a field inside a repeater input group. I am using the debounce prop but there is a considerable lag when typing. This is especially evident as a form grows in size. See this reproduction link.

To Reproduce Steps to reproduce the behaviour:

1. View the code sandbox link (See this reproduction link.)
2. Enter some text into the outside repeater field. Notice that there is no lag when typing.
3. Type some new text in one of the repeater fields. Notice there is some lag time.
4. It appears debouncing isn't working for the repeater fields

NOTE: I think this is a deeper issue relating to the fact that nested data doesn't respond to the @input event.

Reproduction

CodeSandbox

Here is the code sandbox reproduction. In this example debouncing isn't working at all. Repeater fields are slower to update and cause input lag.

---

Here is a second codesandbox which is hooked up with a lodash debounce function using both @input and :values="formData". What you will notice is that when you enter data into the outside field the v-model responds with the 1000ms debounce. When you change the data in the repeater fields, the debounce delay does not actually work.

I suspect that is what is happening with example 1. The debounce only works for model values that are not nested.

Expected behavior The debounce prop is expected to work. Nested data is expected to respond to the @input event.

[justin-schroeder]

👋 howdy @JackEdwardLyons.

The debounce prop was added in 2.5.1 so I think you just need to upgrade (reproduction link was 2.5.0).

That said there are still performance issues on larger forms, especially when using repeaters - the debounce just helps masks this. we are spending a lot of effort to address this in the next major version 👍

[JackEdwardLyons]

Hi @justin-schroeder thanks for the fast response. Can I just add that I'm really enjoying using Vue Formulate and am excited to see it grow and improve :)

So to summarise, I have noticed that using @input doesn't work when using repeater fields (ie) inputs with type="group". Furthermore, prefilling and clearing fields is problematic for repeater fields. Sometimes data is cleared but then it won't prefill, and visa versa. This likely stems from the same issue whereby the data isn't being tracked in the nested object. Below is some more details.

---

Yeah, I am using 2.5.1 for an app at work and I've noticed the performance issues when using repeater fields. The funny thing is this:

• When setting debounce on the <ForumlateForm /> component, there is no lag when typing, even in repeater fields.
• However, when I click the Prefill button to mock data coming in from the DB, there is a compounding lag effect where each field prefills one after the other. It's as if the lag is multiplied by how many fields there are. But it's also more problematic because some fields get skipped and are left blank

I have tried switching debounce to false before prefilling and then switching it back to a number value (ie) 200, but it's janky and inconsistent. So for the time being I'm just going to not use debounce, although this is certainly going to be a problem as I keep building on the form.

Anyway, I really appreciate your fast response and look forward to the improvements in the next release! Do you have an estimate on when that might be?

[hisuwh]

@JackEdwardLyons or @justin-schroeder did you find a solution to this?

I'm listening to the input event on the form but this is not being triggered for the repeated groups within my form.