Retool List View dropping data on submission

💬 App Building
1

I’m currently building a form that allows users to submit the name and email of however many students they want through a listView component.

Instead of relying on the listView to store data, I store each name and variable in a state variable. On submission this data is stored in the Retool Database.

My issue is that for some users the data is save in the database, but for other users it’s getting dropped and I can’t identify why.

Whenever anyone else in my team or I submit the form it works however, for our users it’s randomly dropping. Why?

3

Hey @random98 welcome the Community!! :smiling_face_with_sunglasses:

Thanks for the detailed write-up, I have a few clarifying questions to understand where you are at:

  1. What is the ListView's Primary key field set to?
  2. How does each input write into the state variable?
  3. Most crucial question: When a "dropped" submission happens, what does the Debug tab show for that insert query run? If you open query history and inspect the actual payload that was sent to Retool DB, did formData.value already have the missing fields empty, or did the query receive the data and something went wrong downstream?

Let me know, we can go from there! Thanks!

4

Thank you for your quick response!

  1. Primary key: {{i}}
  2. On change
const updated = Array.isArray(referralsState.value) ? \[...referralsState.value\] : [ ];
updated\[i\] = {
...(updated\[i\] ?? { referralName: "", referralEmail: "" }),
referralName: (referralName.value ?? "").trim(),
};
referralsState.setValue(updated);

and

const updated = Array.isArray(referralsState.value) ? \[...referralsState.value\] : [ ];
updated\[i\] = {
...(updated\[i\] ?? { referralName: "", referralEmail: "" }),
referralEmail: (referralEmail.value ?? "").trim().toLowerCase(),
};
referralsState.setValue(updated);
  1. The form has never actually dropped a referral when I was testing it, only when one of the users filled it out on their own time, which is what is making this difficult to debug.
5

Hey again @random98, thanks for sharing the code, that helps confirm the issue.

Both handlers read the state, modify one field, and write it back. If a user moves quickly between fields, both onChange handlers fire within milliseconds of each other and the second write overwrites the first, not an error, the query just runs with incomplete data, which is why it never reproduces when you test it yourself, I think.

The fix is to use ListView's built-in instanceValues. Use Enable instance values in the ListView settings panel, remove the referralsState variable and all the onChange handlers, and read listView1.instanceValues at submit time instead. Retool tracks the inputs internally so there's nothing to race against. Try it out, let me know! :folded_hands: