Contrib.social

Views exposed filters adds a random suffix with letters and numbers

Open on Drupal.org →
Created on 31 March 2025, 28 days ago

I've run into a problem with the module that I'm not quite sure how to solve. Let me explain:

I created a view with an exposed filter that displays several taxonomy terms. With the module, I convert the selector into links that, when selected with the mouse, display the nodes that have that term added. To make it work more dynamically, I enabled the Ajax option. The problem is that using Ajax, exposed filters add a random suffix with letters and numbers to the term's ID once you click on one of the terms. For example, the ID is as follows:
edit-plataform-16404
Since my intention is to add CSS to that ID, I add the following to my CSS:
a#edit-plataform-16404
and add the necessary attributes and everything works fine, but when you click on a term to view the nodes, that ID changes by adding a suffix that's always random, like this:

edit-platform-16404--abBoiUasal4 (adds this suffix "--abBoiUasal4" or something like this)

So the added CSS is no longer useful because the ID changes randomly.

Can anyone help me? What should I do to prevent the ID of each term from changing?
I've read in some issue that it could be due to the cache, but I have disabled the view cache and have also tried deleting the entire website cache without any luck. Any ideas?

🐛 Bug report
Status

Active

Version

7.0

Component

Code

Created by

🇪🇸Spain dcine

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

Comments & Activities

  • Issue created by @dcine
  • Comment 27 days ago →
    🇪🇸Spain dcine

    I haven't been able to fix this situation, but I have found a solution to make the CSS work without problems. I'm posting the solution here in case it might be helpful to another user:

    If, for example, one of the terms/links/filters has the following ID:

    edit-platform-16404

    For the CSS to apply in any situation (whether the ID has a suffix or not), you must add the following to your CSS:

    a#edit-platform-16405, a[id*="16405"]

    Do this for each of the links/terms in the filters.
    I hope this helps someone so they don't have to spend as many hours as I did...

  • Comment 13 days ago →
    🇺🇸United States smustgrave

    Believe this is by design

    'id' => Html::getUniqueId('edit-' . implode('-', [$name, $optionValue])),

    Not sure this is fully a bug nor do I think we can change it without BC concerns.

  • Comment 13 days ago →
    🇺🇸United States smustgrave

    Thinking out loud maybe a better class can be added though? Since my understanding using ID as selectors triggers stylelint issues usually.

  • Comment 11 days ago →
    🇪🇸Spain dcine

    Well, I don't know for sure, but I tried a thousand ways and couldn't find a better solution. Nothing I tried with CSS worked except the solution I showed.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024