Media library widget broken when using exposed filter

Created on 15 November 2023, about 1 year ago
Updated 9 April 2024, 8 months ago

Problem/Motivation

The media library widget does not work correctly when an exposed filter is added to the media library widget view.

Steps to reproduce

Base setup:
- Add a taxonomy term ER field to the media entity.
- Add an exposed filter to the media library widget view (does not matter if grid or table, both have the same problem)
- Add media ER field to a node type.

Reproduce:

  1. Create media image "green" and assign term "colors"
  2. Create media image "not-a-color" and assign term "others"
  3. Create a node and select image "green". Save.
  4. Go to media overview and add image "yellow", assign term "colors".
  5. Go back and edit node. Click on "Add media".
  6. In the media library widget, you should see yellow, not-a-color, green
  7. Filter on term "colors", you should see "yellow", "green"
  8. Select "green" and click "Insert selected"
  9. ==> Image "yellow" is inserted on the node

The attached video starts at step 5. It shows that the result is "yellow" image, even though I've selected "green" image.

Workarounds

Clearing cache (drush cr or similar) fixes the issue, but the error will come back when adding more images with terms.

Disabling cache on the media library widget prevents the error permanently.

Obervations

As long as the exposed filter is not used, selected image and result are the same.

It seems the selected image is off by the number of images added in that category since the last cache clear. E.g. if I would add 3 images in that category, the result is the image with the index position "-3" compared relatively to the selected image on the widget.

🐛 Bug report
Status

Closed: duplicate

Version

11.0 🔥

Component
Media 

Last updated 4 days ago

Created by

🇦🇹Austria hudri Austria

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @hudri
  • 🇮🇳India deepak.cms

    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

  • 🇦🇺Australia RedTop

    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.

  • 🇦🇹Austria hudri Austria

    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.

  • 🇬🇧United Kingdom chrisscrumping

    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.

  • 🇺🇸United States ksenzee Washington state

    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.

  • 🇦🇺Australia richard.thomas

    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.

  • 🇦🇺Australia richard.thomas

    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...

  • 🇪🇸Spain budalokko Girona

    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
    
  • 🇺🇸United States asherry

    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())
    })
  • 🇺🇸United States jrb Raleigh-Durham Area, NC, USA

    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.');
      }
    })
    
  • 🇺🇸United States jrb Raleigh-Durham Area, NC, USA

    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!!!!!

  • 🇦🇺Australia pameeela

    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.

  • 🇬🇧United Kingdom chrisscrumping

    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.

  • Status changed to Closed: duplicate 8 months ago
  • 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

Production build 0.71.5 2024