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
- Create an entity reference field on a node
- Allow unlimited entries
- Add multiple elements to the field and save
- Edit the content and remove existing elements
- 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.
Comments
Comment #2
bobbygryzyngerComment #3
bobbygryzyngerComment #4
yuehua commentedIt works for me. Just change the element from the container to the widget.
old
new
$element = NestedArray::getValue($form, array_slice($button['#array_parents'], 0, -2));Comment #6
semjuel commented