Media library widget broken when using exposed filter

Also reported on Stack Overflow:
https://drupal.stackexchange.com/questions/317424/media-library-filtered...

Hi @hudri,

I tried to generate this issue on 10.x and 11.x fresh install, but its not reproducing for me. It's working fine with exposed filters.

Thanks

I updated to Drupal 10.1.7 today from Drupal 9.5.11 and encountered the same issue, albeit without any terms or filtering applied. We are ordering for Newest First and using the Media Library within an Paragraph. The Media Library widget Form is Paged. Items on the first page seem to work ok (limited testing - it's late at night at time of posting).

As stated by by issue poster, flushing the cache fixed the issue (for now).

I haven't had time to do any more digging but wanted to post asap as this issue seems wider than just related to filtering by terms.

I think it has to do with any action that needs to manipulate the Ajax request's query string (filtering, sorting, ...) fails.

If you take a look into the browser console (network), at the intial widget load, there is a huge pile of request parameters appended for the media library widget. After filtering/sorting, all the request params seen (as in the inital load) are missing in the subsequent Ajax requests.

Came across this issue today although not exactly the same as the original post its almost identical to whats described in #6.

The problem for us was that we were not able to reproduce anywhere apart from prod. Even after cache clears and rebuilds it only happened on prod and consistantly happened even after a cache clear.

Setting my local php max_input_vars really low and ensuring that all Drupal caching was turned on seems to replicate the issue so hoping this is a fix for prod. Although will be a few days before we can test and push anything.

We're also encountering this issue sporadically, in production only. I haven't been able to reproduce it, but I have videos and reports from those who have. As in #1, we're using the view as shipped by core, and it happens when using the core label string field, with redis caching on. Interestingly, I have a screenshot from one of my users showing that the checkbox for the image she was trying to choose has the wrong id in its `value` attribute.

We're seeing the same issue here, it doesn't appear to be related to Redis, I can reproduce it as long as the render cache is enabled.

After some debugging it looks like the issue is that \Drupal\media_library\Plugin\views\field\MediaLibrarySelectForm renders a placeholder with the row index (e.g. <!--form-item-media_library_select_form--0-->), which is then replaced later with the actual checkbox.

Problem is when the render cache is used the placeholder gets cached and then when you add a new item that matches the filter you end up with multiple items with <!--form-item-media_library_select_form--0--> and then all the following row indexes are still the old cached ones and are incorrect, leading to the code inserting the wrong item.

Setting the cache plugin to None on the view does seem to fix the issue, but the core configuration for the media library view is set to tag-based caching so I'm not sure if this combination is expected to work? Other option would be to disable caching in the MediaLibrarySelectForm, as it seems like the approach taken here is incompatible with the render cache if it relies on printing a placeholder with the row index.

I'm wondering if this is only showing up now because of this change in 10.1 (AJAX views using GET by default)?

https://www.drupal.org/node/3193798 →

Previously the AJAX form would have been POSTed which would have skipped the render cache entirely?

https://git.drupalcode.org/project/drupal/-/blob/11.x/core/lib/Drupal/Co...

For those having difficulties reproducing, the following steps will be useful (do this after clicking "Add media" to use Media Library widget):

1. Scroll down on the listing until pager, click on the link to visit second page.
2. Memorize one of the first images, and its position on the grid.
3. Go back to page 1. Use ANY filter that will include the image you memorized in step 2 into the first page.
4. Click on that image.
5. The image at the same position you memorized in step 2 will appear instead of the one you selected.

All this, with

parameters:
  twig.config:
    debug: true

I believe we're experiencing this issue. The current media view we're using has filters, but, I can replicate that the checkbox value and the image associated with it are out of sequence even without clicking a filter.

Just using the pager seems to render some items incorrectly. I wrote a quick script to try in the browser to compare the input value with the name of the image, does anybody else have this same markup?

jQuery('.js-media-library-item').each(function() {
    var $wrapper = jQuery(this);
    console.log($wrapper.find('.form-item__label').text() + ' ---- ' + $wrapper.find('.media-library-item__name').text())
})

Building on #12 above by @asherry, if you paste this into the console it will highlight in red the the items that are wrong and will cause issues:

jQuery('.js-media-library-item').each(function() {
  var $wrapper = jQuery(this);
  var label = $wrapper.find('.form-item__label').text().replace('Select ', '').trim();
  var name = $wrapper.find('.media-library-item__name').text().trim();
  if (label !== name) {
    $wrapper.attr('style', 'background-color: red;');
    console.log('Item displayed as ' + name + ' has incorrect label and value.');
  }
})

Turning off caching on the Widget and Widget (table) displays of the core Media library View definitely fixes the issue.

The BulkForm plugin in core/modules/views/src/Plugin/views/field/BulkForm.php makes itself not cacheable using UncacheableFieldHandlerTrait, so I tried something similar on MediaLibrarySelectForm per this attached patch. IT DOES NOT WORK, but I wanted to leave it here as a reference.

I assume this doesn't work because of the way the placeholder replacement is done per #3401815-9: Media library widget broken when using exposed filter → .

DO NOT USE THIS!!!!!

Adding credit here for @jrb for filing this with lots of supporting info in 🐛 Wrong media item inserted by "Insert Media" button in WYSIWYG toolbar Closed: duplicate which is now closed.

Following on from my comment in #7 our issue turned out to be a Cloudflare worker with a caching issue since the D10 changes to caching. Since we fixed that its all sorted.

This appears to be a duplicate of 🐛 Media library modal field widget does not render selection checkbox after search Active , and seems to have been resolved in 10.3.x and 11.x