Is there a way to access the event parameter in a Text Input "Change" event?

[steventrades]

I'm building a List View with a bunch of text inputs on each row. Example: Each row has 2 text inputs (title and description). And, I want to track and store the values of all inputs per row in a JavaScript Array of Objects (held in a Retool Temporary State).

[{title: '', description: ''}, {title: '', description: ''}]

My first idea was to create a JS query to handle the change event. I thought the query would receive the event parameter, similarly to JS/React where you can get more info about the event on the given input (target, name, value, etc).

Apparently, there's no such thing. I read the component's doc and it doesn't say if the Change event comes with some data or not.

Is there any keyword that Retool injects into the function? Maybe "e" or "event"?
If not, what would you recommend doing to get the values of all Text Inputs in a List View?

[benbarry]

Unless I'm misunderstanding, I think the data attribute in your listview component will have the values you want.

Example:

[steventrades]

Thank you! I didn't know that.

Unfortunately, it seems that using listView.data only provides the key-values of the first level of children. My ListView rows have a collapsible panel with the text inputs in it (ListView -> Collapsible Panel -> Text Inputs).

I tried to put the text input fields outside of the collapsible and I did get the values of the inputs correctly, but I faced another problem, when I add or delete a new row to the List View, the text values get lost and the inputs get cleared.

My solution right now, is to store values of the inputs in temporary state before creating or deleting from the list. This allows me to use that data as default value for the text inputs.

In your screenshot, I can see you have "+ Add" and "- Remove" row buttons, do you experience this behavior too? Did you solve it differently?

Here's the code I use for that, in case is helpful for anybody. Thanks again for the help! I think I've found a solution

// getListViewInputValues

let list = listViewTmpState.value;

list = list.map((current, index) => {
  return {
    ...current,
    title: listViewTitleInput[index].value,
    description: listViewDescriptionInput[index].value
  }
})

return list;

// addListViewItem

  let list = listViewTmpState.value;
  
  if (list.length > 0) {
    list = await getListViewInputValues.trigger();
  }

  list.push({ title: 'Untitled', description: '' });

  listViewTmpState.setValue(list)

[benbarry]

Having the values for the rows clear when you add or remove a row can be solved by setting row keys in the listview component. For example {{_.range(listView1.instances)}}

I was also able to get the values for inputs inside a collapsible container by putting everything inside a form component.

Here is a working toy app:
addRemoveRow.json (15.7 KB)

[steventrades]

Thank you @benbarry! Yes setting a row key value fixed the inputs getting cleared after updating the list.