Turbo Stream Replace - How to Avoid Edit Form Being Replaced Mid-Edit?

1

Hi all,

I’m using turbo frames for editing items of a has_many collection on the show page of the parent (e.g. editing the titles of an author’s books on the author page). So each item has a turbo frame with an id of item_#{id}, and clicking an edit button replaces that turbo frame with a form that also has the id of item_#{id}.

This works well.

The problem I have is I am also using turbo streams to allow for live updates of these items as other users edit them. So when an item is saved, it broadcasts a partial update to item_#{id}, which can replace the form another user is editing!

What is the recommended way to avoid this? Should I be using stimulus to block partial updates when the form appears? Or change the id of the edit form’s turbo frame somehow?

Many thanks,
Chris

2

Or change the id of the edit form’s turbo frame somehow?

This would be my choice. I’d suggest generating your id’s with #dom_id.

# show
dom_id(item) # => "item_45"

# edit
dom_id(item, :edit) # => "item_post_45"
1 Like