Contrib.social

Item removal AJAX causes infinite nesting

Open on Drupal.org →
Created on 18 August 2020, over 4 years ago
Updated 17 February 2023, almost 2 years ago

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.

🐛 Bug report
Status

Fixed

Component

Code

Created by

🇺🇸United States bobbygryzynger United States

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024