Problem/Motivation
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)
Background
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].
Steps to reproduce
This example assumes a basic 10.3.x install with Basic Page content type, Basic HTML text format, etc.
- Enable core Media and Media Library modules.
- Create an Image media type and add a 'Tags' taxonomy reference field.
- Enable the Tags field on the 'Media library' form display (/admin/structure/media/manage/image/form-display/media_library) for the Image media type, and set its widget to 'Autocomplete (Active Tags)'.
- Enable and configure Media Library embedding on the Basic HTML text format (/admin/config/content/formats/manage/basic_html).
- Create a new Basic Page content item.
- In the body, click the 'Insert Media' button.
- This opens the 'Add or select' modal
- Select an example image file to upload.
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.
Proposed resolution
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.
Remaining tasks
- Open MR
- Review and test
- Merge
User interface changes
None.
API changes
None.
Data model changes
None.