Regression in 1.2.41: data-identifier mismatch breaks autocomplete for dynamically added fields
>>> [!note] Migrated issue
<!-- Drupal.org comment -->
<!-- Migrated from issue #3560517. -->
Reported by: [stmh](https://www.drupal.org/user/35538)
Related to !188
>>>
<h3 id="summary-problem-motivation">Problem/Motivation</h3>
<p>Version 1.2.41 introduced a regression that breaks the autocomplete functionality for dynamically added entity reference fields (e.g., in inline entity forms or multi-value fields).</p>
<p>When using the "Tagify user list entity reference autocomplete widget" in dynamically added form elements, the autocomplete dropdown opens but fails to find/display any users. A JavaScript error is thrown:</p>
<pre>
TypeError: Cannot read properties of null (reading 'appendChild')
at createLoadingTextMarkup (tagify_user_list.js:44:23)
at handleAutocomplete (tagify_user_list.js:257:11)
</pre><p><strong>Root Cause:</strong></p>
<p>In version 1.2.41, <code>TagifyUserListEntityReferenceAutocompleteWidget.php</code> was modified to append numeric field parent positions to the <code>$tags_identifier</code> variable (lines 187-194):</p>
<pre>
// Concat element position to the Tagify identifier.
if (!empty($element['#field_parents'])) {
foreach ($element['#field_parents'] as $parent) {
if (is_numeric($parent)) {
$tags_identifier .= '_' . $parent; // e.g., "assignees" becomes "assignees_0"
}
}
}
</pre><p>This modified <code>$tags_identifier</code> is used as the CSS class for the tagify element. However, the <code>data-identifier</code> HTML attribute is set earlier in <code>EntityAutocompleteTagifyUserList.php</code> and does NOT receive this suffix:</p>
<pre>
$element['#attributes']['data-identifier'] = array_key_exists('#field_name', $element) ? $element['#field_name'] : $element['#name'];
</pre><p>This creates a mismatch:</p>
<ul>
<li>CSS class: <code>.assignees_0</code> ✅</li>
<li><code>data-identifier</code> attribute: <code>assignees</code> ❌</li>
</ul>
<p>The JavaScript code in <code>tagify_user_list.js</code> uses the <code>data-identifier</code> to find the DOM element with <code>document.querySelector(`.${identifier}`)</code>. Since it searches for <code>.assignees</code> but the actual element has class <code>.assignees_0</code>, it returns <code>null</code>, causing the error when trying to call <code>appendChild</code>.</p>
<p><strong>Affected Versions:</strong></p>
<ul>
<li>✅ 1.2.40 (May 31, 2025) - WORKS correctly</li>
<li>❌ 1.2.41 (July 17, 2025) - BROKEN</li>
<li>❌ 1.2.42 (Sep 5, 2025) - BROKEN</li>
<li>❌ 1.2.43 (Nov 21, 2025) - BROKEN (current version)</li>
</ul>
<h4 id="summary-steps-reproduce">Steps to reproduce</h4>
<ol>
<li>Create an entity reference field that uses the "Tagify user list entity reference autocomplete widget"</li>
<li>Add this field to a form that uses dynamic form elements (e.g., paragraph reference field with inline entity form, or a multi-value field with "Add another item" button)</li>
<li>Navigate to a form with this field</li>
<li>Click "Add new item" or similar button to dynamically add a new field instance via AJAX</li>
<li>Try to use the autocomplete in the newly added field by typing a username</li>
</ol>
<p><strong>Expected result:</strong></p>
<ul>
<li>Autocomplete dropdown should display matching users</li>
<li>User should be able to select from the list</li>
</ul>
<p><strong>Actual result:</strong></p>
<ul>
<li>Autocomplete dropdown opens but shows no results</li>
<li>JavaScript error appears in browser console</li>
<li>Users cannot be selected</li>
</ul>
<h3 id="summary-proposed-resolution">Proposed resolution</h3>
<p>The <code>data-identifier</code> attribute needs to be synchronized with the modified <code>$tags_identifier</code> value.</p>
<p>In <code>TagifyUserListEntityReferenceAutocompleteWidget.php</code>, after adding the suffix to <code>$tags_identifier</code>, update the <code>data-identifier</code> attribute:</p>
<pre>
// After the loop that adds the suffix:
$element['#attributes']['data-identifier'] = $tags_identifier;
</pre><p>This ensures the JavaScript can find the correct DOM element by using the same identifier that was used for the CSS class.</p>
<p><strong>Workaround until fixed:</strong></p>
<pre>
composer require drupal/tagify:1.2.40
</pre><h3 id="summary-remaining-tasks">Remaining tasks</h3>
<ul>
<li>Review and confirm the proposed fix</li>
<li>Create patch to sync <code>data-identifier</code> with <code>$tags_identifier</code></li>
<li>Test the patch with various scenarios:
<ul>
<li>Inline entity forms</li>
<li>Multi-value fields</li>
<li>AJAX-added form elements</li>
<li>Paragraph fields</li>
</ul>
</li>
<li>Ensure fix doesn't break existing functionality for non-dynamic fields</li>
<li>Commit fix</li>
<li>Create new release</li>
</ul>
<h3 id="summary-ui-changes">User interface changes</h3>
<p>No UI changes. This fix restores the expected autocomplete behavior for dynamically added fields.</p>
<h3 id="summary-api-changes">API changes</h3>
<p>No API changes. This is an internal bug fix that corrects the synchronization between the CSS class identifier and the HTML data attribute.</p>
<h3 id="summary-data-model-changes">Data model changes</h3>
<p>No data model changes.</p>
issue