Problem/Motivation

When an item is removed, the AJAX replacement of markup nests inside of the previous element rather than replacing it. This causes, possibly, infinite nesting of markup it many items are being removed at once.

Steps to reproduce

  1. Create an entity reference field on a node
  2. Allow unlimited entries
  3. Add multiple elements to the field and save
  4. Edit the content and remove existing elements
  5. You will see here here if you inpsect that markup, each removal adds another nesting level

After this you end up with a markup structure like:

<div
  class="field--type-entity-reference field--name-field-users field--widget-entity-reference-autocomplete js-form-wrapper form-wrapper"
  data-drupal-selector="edit-field-users-wrapper" id="edit-field-users-wrapper">
  <div class="ajax-new-content" style="">
    <div
      class="field--type-entity-reference field--name-field-users field--widget-entity-reference-autocomplete js-form-wrapper form-wrapper"
      data-drupal-selector="edit-field-users-wrapper" id="edit-field-users-wrapper--EDDcKq8UjHY">
      <div class="ajax-new-content" style="">
        <div
          class="field--type-entity-reference field--name-field-users field--widget-entity-reference-autocomplete js-form-wrapper form-wrapper"
          data-drupal-selector="edit-field-users-wrapper" id="edit-field-users-wrapper--BSbwaZ-Gbg0">
          <div class="ajax-new-content" style="">
            <div
              class="field--type-entity-reference field--name-field-users field--widget-entity-reference-autocomplete js-form-wrapper form-wrapper"
              data-drupal-selector="edit-field-users-wrapper" id="edit-field-users-wrapper--FtClN0BLYnE">
              <div class="ajax-new-content" style="">
                <div
                  class="field--type-entity-reference field--name-field-users field--widget-entity-reference-autocomplete js-form-wrapper form-wrapper"
                  data-drupal-selector="edit-field-users-wrapper"
                  id="edit-field-users-wrapper--ESXaCo2h7UI">
                  <div class="ajax-new-content" style="">
                    <div
                      class="field--type-entity-reference field--name-field-users field--widget-entity-reference-autocomplete js-form-wrapper form-wrapper"
                      data-drupal-selector="edit-field-users-wrapper"
                      id="edit-field-users-wrapper--XvH7OlYbzfY">
                      <div class="ajax-new-content" style="">
                        <div
                          class="field--type-entity-reference field--name-field-users field--widget-entity-reference-autocomplete js-form-wrapper form-wrapper"
                          data-drupal-selector="edit-field-users-wrapper"
                          id="edit-field-users-wrapper--S6JV1vZqyL8">
                          <div class="ajax-new-content" style="">
                            <div
                              class="field--type-entity-reference field--name-field-users field--widget-entity-reference-autocomplete js-form-wrapper form-wrapper"
                              data-drupal-selector="edit-field-users-wrapper"
                              id="edit-field-users-wrapper--1zbvozcZ5Dw">
                              <div class="ajax-new-content" style="">
                                <div
                                  class="field--type-entity-reference field--name-field-users field--widget-entity-reference-autocomplete js-form-wrapper form-wrapper"
                                  data-drupal-selector="edit-field-users-wrapper"
                                  id="edit-field-users-wrapper--q27Ib07nt0U">
                                  <div class="ajax-new-content" style="">
                                    <div
                                      class="field--type-entity-reference field--name-field-users field--widget-entity-reference-autocomplete js-form-wrapper form-wrapper"
                                      data-drupal-selector="edit-field-users-wrapper"
                                      id="edit-field-users-wrapper--BATJYw0QHuc">
                                      <div class="ajax-new-content" style="">
                                        <div
                                          class="field--type-entity-reference field--name-field-users field--widget-entity-reference-autocomplete js-form-wrapper form-wrapper"
                                          data-drupal-selector="edit-field-users-wrapper"
                                          id="edit-field-users-wrapper--0BTYpupxpb4">
                                          <div class="ajax-new-content" style="">
                                          <...snip.../>

Proposed resolution

TODO

Remaining tasks

Write a patch.

CommentFileSizeAuthor
#4 multiple_fields_remove_button.patch1.7 KByuehua

Comments

bobbygryzynger created an issue. See original summary.

bobbygryzynger’s picture

Issue summary: View changes
bobbygryzynger’s picture

Issue summary: View changes
yuehua’s picture

StatusFileSize
new1.7 KB

It works for me. Just change the element from the container to the widget.

old

  $element = NestedArray::getValue($form, array_slice($button['#array_parents'], 0, -3));

new
$element = NestedArray::getValue($form, array_slice($button['#array_parents'], 0, -2));

  • 8c42075c committed on 8.x-2.x
    Issue #3165908: Item removal AJAX causes infinite nesting
    
semjuel’s picture

Status: Active » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.