Problem/Motivation
When adding Media items to a text field using the "Insert Media" button in the WYSIWYG toolbar, sometimes the item inserted into the field is not the one that was selected by the user. This seems to happen only after changing the "Sort by" in the Media Library view. It is reproducible and repeatable on a fresh install of Drupal core.
<!--break-->
The issue is that the Media entity ID in the markup of the modal form does not match the label showing the media entity's name. Here's a portion of the markup showing basically one row:
<div class="media-library-views-form__rows">
<div class="js-media-library-item js-click-to-select views-row media-library-item media-library-item--grid">
<div class="views-field views-field-media-library-select-form js-click-to-select-checkbox media-library-item__click-to-select-checkbox"
data-once="media-library-click-to-select-hover"><span class="field-content"><div
class="js-form-item form-item js-form-type-checkbox form-type--checkbox form-type--boolean js-form-item-media-library-select-form-2 form-item--media-library-select-form-2 form-item--no-label">
<label for="edit-media-library-select-form-2--HEvW2PXIQ8U" class="form-item__label visually-hidden">Select AAAAA.pdf</label>
<input data-drupal-selector="edit-media-library-select-form-2" type="checkbox"
id="edit-media-library-select-form-2--HEvW2PXIQ8U" name="media_library_select_form[2]" value="1"
class="form-checkbox form-boolean form-boolean--type-checkbox"
data-once="media-library-click-to-select media-item-change">
</div>
</span></div>
<div class="views-field views-field-rendered-entity js-click-to-select-trigger media-library-item__click-to-select-trigger"
data-once="media-library-click-to-select media-library-click-to-select-hover"><span
class="field-content media-library-item__content"><article
class="contextual-region media-library-item__preview-wrapper">
<div class="media-library-item__preview js-media-library-item-preview">
<div class="field field--name-thumbnail field--type-image field--label-hidden field__item"> <img
loading="lazy"
src="/sites/default/files/styles/thumbnail/public/media-icons/generic/generic.png?itok=9SiCO5L_"
width="100" height="100" alt="" class="image-style-thumbnail">
</div>
</div>
<div class="media-library-item__attributes">
<div class="media-library-item__name">
CCCCC.pdf
</div>
</div>
</article>
</span></div>
</div>
You can see that the label element says "Select AAAAA.pdf" while div.media-library-item__name is "CCCCC.pdf". This markup comes from the first item in a Z-A sort where CCCCC.pdf would be the first item, so the label / Media entity ID are the incorrect ones, not the name in the div.
In investigating this issue, we found that not all items in the view end up being wrong. Sometimes it's only a couple. It does appear that sorting the items multiple times makes things worse.
This is definitely related to caching as it can be fixed by turning off caching on the Widget and Widget (table) displays of the core Media library View.
Steps to reproduce
1. Enable Media and Media Library modules.
2. Edit the "Basic HTML" text format, adding the "Drupal Media" button the the WYSIWYG toolbar and enabling the "Embed media" filter.
3. Create at least 3 media entities of the "Document" type.
4. Open the "Create Basic page" form.
5. Click in the "Body" field and click the "Insert Media" button in the WYSIWYG toolbar.
6. In the Media Library modal window that pops up, click the "Documents" tab on the left.
7. Select an item from the list (CCCCC.pdf in screenshot) then click "Insert selected". Note that the item shown in the body field matches the item chosen in the modal.
8. Click the "Insert Media" button in the WYSIWYG toolbar again, and click the "Documents" tab on the left in the Media Library modal.
9. Select "Name (A-Z)" in the "Sort by" field then click "Apply filters".
10. Select "Name (Z-A)" in the "Sort by" field then click "Apply filters".
11. Select an item from the list (CCCCC.pdf in screenshot) then click "Insert selected". Note that the item shown in the body field does not match the item chosen in the modal. "CCCCC.pdf" was chosen in the modal, but "AAAAA.pdf" is shown in the body.
Proposed resolution
Remaining tasks
User interface changes
API changes
Data model changes
Release notes snippet
