Repeaters that contain Images don't update the correct item's Image when media picker closes

[corporealfunk]

When I make a new page with a Repeater that contains an Image and:

• Add two repeatable items in the admin UI and do not save the page
• Click on the first item and then click "Choose Image" and select an image, the first item's image updates correctly.
• Click on the second item and click it's "Choose Image" and select an image, the UI updates the first item's image and the second item's image remains in the "Choose Image" state.

Expected interaction:

• Add two repeatable items in the admin UI and do not save the page
• Click on the first item and then click "Choose Image" and select an image, the first item's image updates correctly.
• Click on the second item and click it's "Choose Image" and select an image, the second item's image updates correctly.

In looking through the code, this piece of JS basically copies a block of HTML and does a RegExp on it to give a new ID to the fresh item wherever that ID appears, then the munged HTML gets appended into the DOM.

https://github.com/SpinaCMS/Spina/blob/b328be6337ab15ee39758f9ec6f7c1158b9cba0e/app/assets/javascripts/spina/admin/pages.coffee.erb#L20

It seems like, however, that in the nested HTML structure, we see that the media picker/Image area of the HTML contains a different ID, which means that it will not get replaced with the RegExp. So, every media_picker in every new item in the Repeater UI has the same ID. Example, below, we can see the original ID is 70309351618500 and that will get regexp replaced everywhere. However, notice that the media_picker ID is 70309353738060 and this will therefore not get RegExp replaced.

If I edit the HTML in the browser's Inspector and make the media_picker ID match the original, the UI works as intended. I haven't traced through the code enough to figure out why the media_picker's ID is different than the main form's object ID... if anyone has an quick ideas or pointers, please comment.

 <div class='structure-form-pane' data-part-id='70309351618500' data-target='repeater-form.pane' id='structure_form_pane_70309351618500'>
  <input type="hidden" value="Articles" name="page[en_content_attributes][1][content_attributes][70309351618500][title]" id="page_en_content_attributes_1_content_attributes_70309351618500_title" />
  <input type="hidden" value="slides" name="page[en_content_attributes][1][content_attributes][70309351618500][name]" id="page_en_content_attributes_1_content_attributes_70309351618500_name" />
  <input type="hidden" value="Photo" name="page[en_content_attributes][1][content_attributes][70309351618500][parts_attributes][1][title]" id="page_en_content_attributes_1_content_attributes_70309351618500_parts_attributes_1_title" />
  <input value="Spina::Parts::Image" type="hidden" name="page[en_content_attributes][1][content_attributes][70309351618500][parts_attributes][1][type]" id="page_en_content_attributes_1_content_attributes_70309351618500_parts_attributes_1_type" />
  <input type="hidden" value="image" name="page[en_content_attributes][1][content_attributes][70309351618500][parts_attributes][1][name]" id="page_en_content_attributes_1_content_attributes_70309351618500_parts_attributes_1_name" />
  <div class='structure-form-part'>
    <div class='page-form-label'>Photo</div>
    <div class='page-form-control' data-controller='image-form'>
      <div class='page-form-media-picker'>
        <div style='width: 100%'>
          <a class="image" data-target="image-form.image" data-remote="true" href="/admin/media_picker?input=media_picker_70309353738060&amp;mode=single&amp;selected_ids%5B%5D=">
            <div class='page-form-media-picker-placeholder'>Choose image</div>
            <div id='media_picker_70309353738060'>
              <input data-target="image-form.imageId" type="hidden" name="page[en_content_attributes][1][content_attributes][70309351618500][parts_attributes][1][image_id]" id="page_en_content_attributes_1_content_attributes_70309351618500_parts_attributes_1_image_id" />
              <input data-target="image-form.signedBlobId" type="hidden" name="page[en_content_attributes][1][content_attributes][70309351618500][parts_attributes][1][signed_blob_id]" id="page_en_content_attributes_1_content_attributes_70309351618500_parts_attributes_1_signed_blob_id" />
              <input data-target="image-form.filename" type="hidden" value="" name="page[en_content_attributes][1][content_attributes][70309351618500][parts_attributes][1][filename]" id="page_en_content_attributes_1_content_attributes_70309351618500_parts_attributes_1_filename" />
            </div>
            <div style='width: 200px; height: 150px; overflow: hidden'></div>
          </a>
          <input placeholder="Alt text" class="page-form-media-picker-alt-text" type="text" value="" name="page[en_content_attributes][1][content_attributes][70309351618500][parts_attributes][1][alt]" id="page_en_content_attributes_1_content_attributes_70309351618500_parts_attributes_1_alt" />
        </div>
        <button name="button" type="default" class="button button-small button-default" data-action="image-form#remove">
          <i class='icon icon-cross' style='margin: 0; font-size: 10px'></i>
        </button>
      </div>
    </div>
  </div>
  <a class="button button-mini button-link pull-right" data-action="repeater-form#delete" data-part-id="70309351618500" href="#">Delete</a>
</div>

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.