JSON editor component doesn't refresh when switching back from other tabs

App Building
, ,
1

Hi all, I'm running into an issue related to the JSON Editor component.

I have a table Table with multiple rows, and another container displaying data related to the row users selected in the Table. The container has multiple tabs. In one tab TabA there is a JSON Editor which display the data of a row, and the value is set to {{Table.selectedRow.data.someValue}}.

The issue is when we have TabA selected in the component, and we click rows in the Table, the value displayed in the JSON Editor is updated automatically.

However, if we switch to TabB, then select another row from the Table, and then switch back to TabA, the value in the JSON Editor still shows the old value, until users click the JSON Editor's editing area.

I have tried to put the JSON Editor's value to a JavaScript variable, it didn't work.

I believe it's a displaying issue since the value does update. Is there anything I can do to make it displayed correctly even when I select rows from other tabs? Thanks!

2

Hi @Liz_Shen, welcome to the forum! :wave:
If a component is hidden, which is the case if it's on a non-visible tab, any APIs to update its model will not work. Your approach putting the value in a variable should work if we set the new value of the JSON Editor after it becomes visible.

Check this topic for an example on how to achieve this. Let us know if you have any questions! :slightly_smiling_face: