Render using theme input and select instead of lists with links for checkboxes and dropdown

Created on 16 January 2018, about 7 years ago
Updated 7 February 2023, about 2 years ago

Currently the facets are always rendered as lists with links, which are rewritten by javascript to form elements.
A few issues arise:

  • In some themes javascript is loaded from the footer, some flickering may arise.
  • Slight lag ofcourse because javascript has to do it's thing to enable checkboxes and dropdowns
  • Styling issues, because the form elements are not rendered by the theme functions of these elements, the html is different and it has to be styled and fixed seperately. For a lot of frontenders this could be found annoying.

What did I do?

  • Rewritten the DropdownWidget and CheckboxWidget to render the elements serverside using the theme functions for select and checkbox (input__checkbox).
  • Rewritten the javascript just to trigger on change events for checkboxes and facets.
  • Also fixed that theme suggestions are correctly added for the available widget types.
  • Added a twig file for checkboxes, because for this element we do not need the (-) element anymore when it is active.
🐛 Bug report
Status

Needs review

Version

2.0

Component

Code

Created by

🇳🇱Netherlands jefuri

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Sign in to follow issues

Merge Requests

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • 🇯🇴Jordan Anas_maw

    You are missing templates/facets-item-list.html.twig changes
    Here is a new patch that solves the issue

  • 🇯🇴Jordan Anas_maw

    Please ignore my previous patch, here is the right one

  • Open in Jenkins → Open on Drupal.org →
    Core: 9.5.x + Environment: PHP 8.0 & MySQL 5.7
    last update almost 2 years ago
    424 pass, 2 fail
  • @codebymikey opened merge request.
  • First commit to issue fork.
  • Open in Jenkins → Open on Drupal.org →
    Core: 9.5.x + Environment: PHP 8.0 & MySQL 5.7
    last update almost 2 years ago
    415 pass, 4 fail
  • Open in Jenkins → Open on Drupal.org →
    Core: 9.5.x + Environment: PHP 8.0 & MySQL 5.7
    last update over 1 year ago
    413 pass, 4 fail
  • Open in Jenkins → Open on Drupal.org →
    Core: 9.5.x + Environment: PHP 8.0 & MySQL 5.7
    last update over 1 year ago
    413 pass, 4 fail
  • Rerolled the patch to support D10 as well as ensure that the tests pass.

  • Open in Jenkins → Open on Drupal.org →
    Core: 9.5.x + Environment: PHP 8.0 & MySQL 5.7
    last update over 1 year ago
    421 pass, 2 fail
  • Open in Jenkins → Open on Drupal.org →
    Core: 9.5.x + Environment: PHP 8.0 & MySQL 5.7
    last update over 1 year ago
    421 pass, 2 fail
  • Open in Jenkins → Open on Drupal.org →
    Core: 9.5.x + Environment: PHP 8.0 & MySQL 5.7
    last update over 1 year ago
    432 pass
  • Open in Jenkins → Open on Drupal.org →
    Core: 9.5.x + Environment: PHP 8.0 & MySQL 5.7
    last update over 1 year ago
    432 pass
  • Upload latest patch with all the tests passing. Patch #75 had a bug where it was making use of the jQuery :checkbox pseudo-selector.

  • 🇬🇧United Kingdom rossb89 Bristol

    This is great! I realised that javascript was being used to render this facet style ... which was no good for us on this project which is making heavy use of tailwind and associated templates.

    The patch applies cleanly and appears to do what it say on the tin, so far so good.

  • 🇧🇪Belgium matthiasm11

    Using patch #76 to have the select element instead of generating it through javascript. Works fantastic and is so much cleaner!
    It is also compatible with the Chosen module (tested with 4.x), out of the box.

    One remark though: it is not compatible with selecting multiple values, so in the facet config Ensure that only one result can be displayed should be set to TRUE to avoid unexpected results. Not sure how to fix this, since the page already reloads when selecting the first item, so you have no time to select the second item. (unless you do this after the page reload) Maybe we should only reload if the select element becomes unfocused AND changed AND isMultiple?

  • 🇮🇳India AkshayAdhav Pune, India 🇮🇳

    The patch failed to apply.

  • 🇳🇿New Zealand jonathan_hunt

    The patch applies for me ok on Facets 2.0.7. This patch is very useful as I have several sites where bots are aggressively indexing all search facet links. I hope that changing the facets to genuine form checkboxes will reduce the bot impacts.

  • 🇳🇿New Zealand jonathan_hunt

    fwiw, this change has stopped the bots smashing our facet links. It would be great if this patch could be committed.

  • Id like to echo #81. This patch really helps with bots hitting our site as well. Can this be merged?

  • Status changed to Needs work 7 months ago
  • 🇧🇪Belgium matthiasm11

    Patch #76 doesn't apply anymore due to conflicting tests in v2.0.8. Attaching a patch without changed tests.
    Tests should be looked into, marked the issue as "Needs work".

  • 🇳🇿New Zealand jonathan_hunt

    Patch applies to Facets 2.0.9, thanks @matthiasm11

  • First commit to issue fork.
  • 🇺🇸United States mark_fullmer Tucson

    Patch #76 doesn't apply anymore due to conflicting tests in v2.0.8. Attaching a patch without changed tests.
    Tests should be looked into, marked the issue as "Needs work".

    The latest commits to MR 146 resolve the conflicts in the tests; additionally, commit https://git.drupalcode.org/project/facets/-/merge_requests/146/diffs?com... addresses an oversight where the new checkboxes rendering did not properly retain the "Reset all" configuration option.

    Setting back to "Needs review"...

  • Pipeline finished with Failed
    2 months ago
    Total: 730s
    #402134
  • Pipeline finished with Failed
    2 months ago
    Total: 1041s
    #402158
  • Pipeline finished with Failed
    2 months ago
    Total: 1170s
    #402173
  • 🇺🇸United States mark_fullmer Tucson

    After resolving merge conflicts in the tests, there remain some failing tests that look to be valid divergences from the intended design. Specifically, it looks like the original Links facet plugin may behave differently than it used to, per this code change (though at the same time, that shouldn't be the case because this only modifies the Checkbox and Dropdown plugins, which extend that Links plugin...)

    In any case, more investigation is needed. Setting back to Needs Work.

  • 🇺🇸United States mark_fullmer Tucson

    Noting that the observation in #77, namely, that the staged code does not yet support Facets' taxonomy hierarchy display, qualifies as another element that "Needs Work" before this is ready for prime-time.

  • 🇳🇿New Zealand ericgsmith

    ericgsmith changed the visibility of the branch 8.x-1.x to hidden.

  • 🇳🇿New Zealand ericgsmith

    ericgsmith changed the visibility of the branch 2.0.x to hidden.

  • 🇳🇿New Zealand ericgsmith

    I've reverted the change made in e49931def619c244d72fe6f12eb9bacd5311bf14 that was subsequently bugged in the rebase and causing a test failur - that test change is unrelated to this MR and the existing test from the 2.0.x branch should still pass as there is no expected behaviour change here.

    There is another unrelated test change there that should be reverted - missed it before I pushed my change.

  • Pipeline finished with Success
    29 days ago
    Total: 1174s
    #440238
  • 🇺🇸United States DamienMcKenna NH, USA

    This needs to be reworked for v3.

  • 🇺🇸United States DamienMcKenna NH, USA

    Am working on porting it to v3.

  • 🇺🇸United States DamienMcKenna NH, USA

    A patch for v3.0.x - I tried to create a merge request for it but gitlab wouldn't let me pick 3.0.x as a destination branch, even after I updated the issue fork from the main repo.

  • 🇺🇸United States DamienMcKenna NH, USA

    Fixed some copy pasta on CheckboxWidget.php.

  • 🇺🇸United States DamienMcKenna NH, USA
  • 🇺🇸United States DamienMcKenna NH, USA

    This breaks the taxonomy hierarchy display.

    A structure like this:

    - Term 1 (weight 0)
      - Term 1.1 (weight 0)
        - Term 1.1.1 (weight 0)
      - Term 1.2 (weight 1)
    - Term 2 (weight 1)
    - Term 3 (weight 2)
      - Term 3.1 (weight 0)
    

    This turns into the following:

    - Term 1 (weight 0)
    - Term 1.1 (weight 0)
    - Term 1.1.1 (weight 0)
    - Term 3.1 (weight 0)
    - Term 2 (weight 1)
    - Term 1.2 (weight 1)
    - Term 3 (weight 2)
    

    (or worse)

  • 🇩🇪Germany Saif Al-Dilaimi

    Hey, after doing everything I could from installing firewalls, banning search engine bots or manually renaming urls I found out in a slack group that facets are causing my page to be constantly scanned by bots....

    I get on a university page (not a lot of traffic) each second several request to my search page with access to the facets url. I would love to use facets blocks but the current situation is causing the site cache to be overloaded in few days. I could really need a solution to this.

    Some details:

    ## Urls that are called

    - - [02/Apr/2025:11:00:29 +0200] "GET /de/suche?f%5B0%5D=tags_und_themen%3A345&f%5B1%5D=tags_und_themen%3A479&f%5B2%5D=tags_und_themen%3A717 HTTP/1.1" 200 6325
    - - [02/Apr/2025:11:00:31 +0200] "GET /en/suche?title=open-access&f%5B0%5D=format%3A591 HTTP/1.1" 200 5596
    - - [02/Apr/2025:11:00:31 +0200] "GET /de/suche?f%5B0%5D=tags_und_themen%3A345&f%5B1%5D=tags_und_themen%3A790&f%5B2%5D=tags_und_themen%3A956 HTTP/1.1" 200 6078
    - - [02/Apr/2025:11:00:34 +0200] "GET /de/suche?f%5B0%5D=tags_und_themen%3A126&f%5B1%5D=tags_und_themen%3A348&f%5B2%5D=tags_und_themen%3A761&f%5B3%5D=tags_und_themen%3A808 HTTP/1.1" 200 6022
    - - [02/Apr/2025:11:00:34 +0200] "GET /de/suche?f%5B0%5D=tags_und_themen%3A346&f%5B1%5D=tags_und_themen%3A752&f%5B2%5D=tags_und_themen%3A832 HTTP/1.1" 200 5807
    - - [02/Apr/2025:11:00:37 +0200] "GET /index.php/en/lernangebot/selbstlektuerekurs-buddhismus-suedasien HTTP/1.1" 200 5890

    ... those every second several times

  • 🇺🇸United States timwood Rockville, Maryland

    @saif al-dilaimi We've had success against the same scenario you describe by updating Facets to the 3.x release and then rather than using normal Facets, configuring your view to use Facets as views exposed filters which is a new feature in the 3.x branch. Users have to select from a drop down (in our case) and submit the form. It's not quite as elegant or convenient, but so far has prevented the bots from using the filters. The URL format is slightly different so we also were able to block the bot from accessing the old facet URLs with .htaccess rules.

    RewriteCond %{HTTP_HOST} HOSTNAME_HERE
    RewriteCond %{REQUEST_URI} ^/OPTIONAL/PATH [OR]
    RewriteCond %{REQUEST_URI} ^/OPTIONAL/SECOND/PATH
    RewriteCond %{QUERY_STRING} f%5B
    RewriteRule ^.* - [R=404,L]
    
  • 🇺🇸United States mark_fullmer Tucson

    People coming here with problems with spider traps on the facets should look at the newly released https://www.drupal.org/project/facet_bot_blocker . I haven't tested it yet, but its methodology allows still using checkbox-style facets (instead of dropdowns -- #99) by rate-limiting repeated queries for facets.

Production build 0.71.5 2024