ListView doesnt rerender or refresh input fields with fresh data

I am using a multiview container lets say container A and container B, A has a table and B has a listview repeater.

when i click a row in the table i am pulling the data of that row from currentSourceRow method to loop through its data which will be shown in the listview grid in repeaster format, and I set the container's view key to B so my users can see the details of from that row into listview in repeating format.

I have input field inside my listview and a save button which is prepopulated by a default value received, lets say ex. "7", from the source row data that the user just clicked. the intension to do this is to provide the user to change that fields data inside the listview.

now the issue is when the list view is first loaded with the row's data everything is perfect.
if the user changed the value and clicks the save button, i am able to get these value and save it. but if the user changes the value, lets say to "5" in the input field but doesn't save, and goes back to container view A and clicks another row from the table, then the listview shows new data from the new row selected, but the default value from the input box remains the same that is "5".

there is no method to reinitiate or rerender the listview or the input field.

I have the primary key of the listview set correctly.

i tried to save the row's data to a state variable first and then assign this variable as the listview's data sourrce, so that when i change the variable's values, the state should change, but still in this case as well, the input field shows "5" which is the first user changed value.

please help me :frowning:

1 Like

Thank you for finding a similar issue to leave a note in!

https://community.retool.com/t/bug-component-in-gridview-dont-update-when-change-pages/31243/8

Will keep both threads updated :slight_smile:

1 Like

Any news about this?, I have a similar issue

Just checked in with the engineers working on this! Will let you know if there's any news

2 Likes

Thats great... will be waiting.. thanks for informing...

Hi, any update on this?

Hi @shyambh this should be fixed; are you seeing issues still?

Hi there, I've stumbled upon this thread because I currently have an issue with list views, and it seems to be due to the failure of list view input components to pick up default values when they change in the list view datasource.

I have a list view, and the datasource is a Variable/temporary state array. Amongst other properties, it has price_excl and price_incl.

I have a number input in the list view (numberAccPrcExcl), which has default value price_excl, which after firing a Change event, runs a JS query, which updates price_excl in the Variable array. It also calculates a new value for price_incl (Adding GST tax).

Initially, this all works fine, with the Variable array getting updated, and the associated value in the number input component for price_incl (numberAccPrcIncl) gets updated too (through the default value). However, I began to notice that sometimes the number input component value wouldn't get updated, even though I could see the Variable array was still getting updated.

After testing some scenarios, I worked out that updating of the numberAccPrcIncl works fine up until I directly change the value of that component. (My desired functionality is for one component to update the other and vice versa, but I began with just one-way to test idea).

As a further test, I added a text component (non-input component) to the list view and set its value as price_incl, and that always updates correctly, so I feel like this is a bug.

I've attached a screen recording. You can see that I can interact with the numberAccPrcIncl and it still works fine as long as I dont change the value!
chrome_bYX75ZiZ9G

1 Like

Hi Tess, the issue is still extaly the same.

I did discover a work-around for the time being: If I remove the whole "row" (the object that contains the property I'm updating, from the array) and update the Variable (setIn), and then add that object back into the array (at the same position) and update the Variable (setIn), it works fine. This obviously isn't an ideal solution...

If any folks are still running into this issue, could you please share an app json & .har file with me?

To grab the .har file (instructions for chrome):

  1. Right-click in the browser window or tab and select Inspect.
  2. Click the Network tab in the panel that appears.
  3. Refresh the page and use the app until the freezing occurs.
  4. Click the download button ("Export HAR" appears when you hold the pointer over it).
  5. Name the file.
  6. Click Save.

We have continued to iterate on the list view (including adding the instance values feature), but we have a few outstanding bug and feature requests related to this behavior, so I'd love to get some updated examples for our team. Thanks!

I'm seeing a similar issue. This is all javascript queries on the frontend. I updated "Contract Number" list item to remove a selection/mapping from that list. It should have never been applied to the "Overall Low Performance Icon" multi-select. And the variable that is presenting this data as you can see in the logs, does not even have that "mapping".

Hi @Cameron_Spiller Just want to make sure I follow, you updated Contract Number to remove a multiselect component dropdown item. Somehow, that caused "2012 Overall..." to be selected in both dropdowns for Contract Number and Overall Low Performance Icon?

:thinking: definitely sounds buggy! Any chance you could DM me an export of your app with hardcoded data for testing?

I have a similar issue as I am trying to convert older List View to the new Repeatable List view (container list view).

In my case, the List View data source is set to a transformer.
If I edit a SWITCH control and then the state of the transformer changes, which should change the state of the SWITCH, it doesn't seem to work, or at least not very often. Deleting or row or some other change will then render correctly.

My use case is basically doing a "radio button" type of control, where I want the switch to "select" that item in the list, and so it should deselect all of the others when one is selected. The onChange handler runs, it correctly updates the data source, but the previous entries that have been selected, stay selected.

I can try to get a minimal reproducible case

Here is a very trivial app where I demonstrate the problem I am seeing.

As others have reported, deleting a row forces a re-render, so can be a workaround. I've included the Add Row and Delete Last buttons to demonstrate this.

Untitled-1.json (23.2 KB)

I found a workaround that works for me.

Even though I have not enabled instance values, I thought this might be worth a shot, and it seems to work:

listView1.resetInstanceValues();

so, whenever the data is updated, I can force it to reset fairly easily, at least compared with deleting rows.

1 Like

Thanks for sharing your workaround & spending time on a repro app!

I see this all the time. I have constrained all updates to the data source where I also manually force a reset() of the list view components. I do sometimes see components get stuck even when performing the reset but only while in edit mode. Infact, I see the same behavior in a form component as well. Components while in edit mode sometimes get stuck.