Shopify / shopify-app-bridge

https://shopify.dev/docs/api/app-bridge
82 stars 9 forks source link

Contextual save bar is not resetting dirty state after turbo-frame update #292

Open awd opened 4 months ago

awd commented 4 months ago

Describe the bug

AppBridge does not reset the dirty state on forms submitted and updated via Rails turbo-frame

To Reproduce

  1. Run the latest version of @hotwired/turbo, and setup a form with data-save-bar attribute.
  2. Also run add gem turbo-rails for the turbo-frame element.
  3. Submit the form, and using the update.turbo-stream - you'll re-render the form
  4. Contextual save bar is still showing dirty state

Expected behaviour

The contextual-save-bar should reset once the turbo-frame has re-rendered the form.

Contextual information

Packages and versions

Latest versions of Rails, Rails-Turbo, Hotwired/Turbo, Hotwired/Stimulus, AppBridge.

Additional context

I've setup this simple Stimulus controller to work around the issue for now.

import { Controller } from '@hotwired/stimulus'

export default class extends Controller {
  connect () {
    this.element.setAttribute('data-save-bar', '')
  }

  disconnect () {
    this.element.removeAttribute('data-save-bar')
  }
}

edit.html.erb

  <%= turbo_frame_tag('some_name_here') do %>
    <%= form_with(model: @model, url: model_path, html: { 'data-save-bar': '' }) do |form| %>
      <%= render partial: 'form', locals: { form: form } %>
    <% end %>
  <% end %>

update.turbo-stream.erb

<%= turbo_stream.update 'some_name_here' do %>
  <%= form_with(model: @model, url: model_path, html: { 'data-save-bar': '' }) do |form| %>
    <%= render partial: 'form', locals: { form: form } %>
  <% end %>
<% end %>
jzazove commented 4 months ago

We are looking into this issue.