How to have displayed results depend on hidden user input from a datagrid?

[travis-leith]

In my case I have an accordion in the sidebar, that can expand to reveal one of a few different editable datagrids. I set the intial state of these data grids and take a reactive dependency on any user changes via df.data_veiw(). The results that are displayed to the right of the sidebar are updated accordingly.

The problem is that the results are only displayed when each accordion has been expanded at least once. I think the reactive event/message is not fired until the datagrid is actually displayed. I suspect this problem is solvable somehow with reactive.value and/or reactive.event but the precise implementation plan currently escapes me. Any advice would be greatly appreciated.

[travis-leith]

With the help of Claude, I found a workaround. The idea is to start with all the accordions open, then use a function on a timer to automatically close them after 2 seconds.

ui.tags.script("""
        // Auto-close accordion panels after initial render
        setTimeout(function() {
            // Find the accordion and close the panels
            const accordion = document.getElementById('main_accordion');
            if (accordion) {
                // Find and click the  headers to close them
                const headers = accordion.querySelectorAll('.accordion-button');
                headers.forEach(header => {
                    const text = header.textContent.trim();
                    if (!header.classList.contains('collapsed')) {
                        header.click();
                    }
                });
            }
        }, 2000); // Wait 2 seconds for initial render to complete
    """)

A solution using the reactivity feature of shiny would be preferred.

[travis-leith]

Another update: I tried making reactive values for the dataframes, initialised with the relevant data

react_df = reactive.value(init_df())

then creating a reactive event to keep it up to date with user changes

@reactive.effect
    @reactive.event(input.df)
    def _() -> None:
        react_df.set(df.data_view())

then rendering the reactive value

@render.data_frame
    def df() -> DataGrid[pd.DataFrame]:  # type: ignore
        return render.DataGrid(react_df(), summary=False, editable=True)

But the results of this are no different to if I just wired them up without the reactive values.