Turbo frames hide vs replace

I am building a tab navigation fragment that looks like so:

image

If I go to Job Runs Charts I see a chart while in Job Runs a table. Both tabs depend on the above dropdown.

The tabs are turbo frames pretty much as implemented here

Right now the top dropdown does a post request on user item select, which means I need to select the item each time I go to the new tab. This is because each time I click the tab I basically re-create the empty turbo-frame.

Two questions:

  • Is it possible to just hide a turbo-frame instead of replacing it? Probably not, if so, any best practice? The current practice triggers a query on the database each time the user switches between tabs
  • What is the right way to listen to another component using stimulus? In my case I would want to fetch the dropdown selected value from the table/chart component instead of sending the post from the dropdown itself
1 Like