Same as #2937191: Render using theme input and select instead of lists with links for checkboxes and dropdown, but with an MR for Facets 3. Rebasing an old issue MR can be complicated (it requires godlike Git skills) and may cause an issue to stall.
Problem/Motivation
Currently the facets are always rendered as lists with links, which are rewritten by JavaScript to form elements.
A few issues arise:
- Bots are increasingly aggressively following any links, causing DDOS-like situations, due to heavy traffic. Switching from links to checkboxes may prevent this (added Aug 2025).
- In some themes JavaScript is loaded from the footer, some flickering may arise.
- Slight lag of course because JavaScript has to do it's thing to enable checkboxes and drop-downs
- 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 separately. For a lot of frontenders this could be found annoying.
What did I do?
- Rewritten the DropdownWidget and CheckboxWidget to render the elements server-side 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 any more when it is active.
See also #3528483: Add missing classes to checkbox widget so it renders correctly.
Steps to reproduce
Proposed resolution
Remaining tasks
Fix hierarchy support for the Checkbox and Dropdown widgets, since taxonomy hierarchy displays break. 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 (or worse):
- 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)User interface changes
API changes
Data model changes
Issue fork facets-3542180
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #3
ressaAdding remaining task from parent issue #2937191: Render using theme input and select instead of lists with links for checkboxes and dropdown.
Comment #4
ressaSetting to "Needs work" since taxonomy hierarchy display needs to be fixed. Feel free to add more tasks :)
Also, adding a new primary reason to implement this:
Comment #5
ressaHold on, I just now checked in Facets 3, and with "Checkboxes/Radio Buttons" selected under "Exposed form > Exposed form style > Better Exposed Filters" in the View, the facets are output as actual checkboxes, not links.
So it seems like this task is already fixed in Facets 3, and can be closed?
Comment #6
davidpetit commented@ressa
What you are saying is for Facet 3 using the exposed filters. However, when using Facet blocks in Facet 3, we still have the links in the html source when choosing checkboxes.
Comment #10
davidpetit commentedI created a new MR with a rewrite of the proposed changed in this issue taking into account the last verson of Facets 3.x.
I also added some improvements for summary links as well so that we do not have href in them and using buttons instead.
Comment #11
ressaThanks for checking up on this @davidpetit! I'll change the status.
Taxonomy hierarchy display structures seemed to break previously, did you get a chance to check if this still happens, or maybe that's no longer the case?
Comment #13
idebr commentedI have implemented hierarchy support for the Checkbox and Dropdown widgets.
Tests are currently failing on 3.0.x, see #3581854: [3.0.x] phpunit tests are failing. I'll clean the new test failures once 3.0.x is green.
Comment #19
ressaThank you so much @idebr, getting this fixed would be fantastic.