- Issue created by @justcaldwell
- Merge request !1Prefer the input element's data-identifier attribute over name → (Open) created by justcaldwell
The active_tags widget fails to initialize when adding a Media item in a Media Library modal. The javascript console error is:
drupal.js?v=10.3.5:64 Uncaught SyntaxError: Failed to execute 'querySelector' on 'Document': '.media[0][fields][field_tags]' is not a valid selector.
at initAutocomplete (active-tags.init.js?v=10.3.5:124:36)
at Array.forEach (<anonymous>)
at Object.attach (active-tags.init.js?v=10.3.5:1179:71)
at drupal.js?v=10.3.5:166:24
at Array.forEach (<anonymous>)
at Drupal.attachBehaviors (drupal.js?v=10.3.5:162:34)
at HTMLDivElement.<anonymous> (ajax.js?v=10.3.5:1389:18)
at Function.each (jquery.min.js?v=3.7.1:2:3129)
at ce.fn.init.each (jquery.min.js?v=3.7.1:2:1594)
at Drupal.AjaxCommands.insert (ajax.js?v=10.3.5:1381:19)
We use core's Media Library embed in CKEditor 5 → to embed media items in text content areas. Our media items have a 'Tags' taxonomy reference field that users can edit when creating new media items during the embed process
When creating a new Media entity to embed, Media Library opens an Add form in a modal. If the active_tags widget is used for the Tags field, the input name attribute is media[0][fields][field_tags], as opposed to the more common field_tags. That results in the invalid selector in the error above -- .media[0][fields][field_tags].
This example assumes a basic 10.3.x install with Basic Page content type, Basic HTML text format, etc.
The modal should now display the form defined by the 'Media library' form display. The 'Tags' autocomplete will be non-functional, and the error above should be in the browser console.
Based on my testing, the autocomplete input element's data-identifier attribute consistently has the desired identifier/selector -- a simple solution might be to prefer that attribute value over name in active-tags.init.js. So, line 22:
const identifier = input.name || input.dataset.identifier;
becomes
const identifier = input.dataset.identifier || input.name;
Though I can't say definitively that works as desired in all cases.
None.
None.
None.
Active
1.0
Code