Facet checkboxes are disabled after pressing the browser back button in Firefox

Created on 22 January 2024, 8 months ago
Updated 29 August 2024, 9 days ago

Problem/Motivation

Firefox (and other browsers) are showing disabled checkboxes when using the back button after clicking a facet. This appears to be caused by the browser loading the page from bfcache (back-forward-cache), whose last state included disabled checkboxes for the facet clicked.

I was hesitant to create this issue, given how long bfcache as been used by some browsers. It seemed unlikely to me that this issue hasn't been found and fixed. But I haven't found anything in the facets queue so far. (I did find an active issue in the old facets_api 7.x module.)

Steps to reproduce

  1. Add facets for a search or view (not using ajax).
  2. In Firefox, click on a facet (loading a new page). This disables all of the checkboxes for this facet before loading the new page.
  3. Click the back button. All checkboxes within that facet are still disabled.

Proposed resolution

I know that adding an empty window.onunload function seems to fix it, but it seems a bit heavy-handed. I will provide it as a patch.

🐛 Bug report
Status

Needs review

Version

2.0

Component

Code

Created by

🇺🇸United States mkindred

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

Comments & Activities

  • Issue created by @mkindred
  • 🇺🇸United States mkindred

    Patch to add empty window.onunload function.

  • Status changed to Needs review 7 months ago
  • 🇮🇪Ireland markconroy

    I'm not sure exactly why we need to disable the checkboxes when we are creating checkboxes from links for facets, so I created this small patch to remove the disabling of the checkboxes and it seems to fix the back button issue.

  • 🇺🇸United States mkindred

    @markconroy I like disabling them after selecting one to give the user feedback and prevent clicking on a second facet prior to loading the new page. I've shopped on quite a few ecommerce sites where the subsequent page was slow to load, and without feedback I thought I might have missed the facet link.

  • 🇮🇪Ireland markconroy

    and prevent clicking on a second facet prior to loading the new page.

    ^ That's a good point.

  • 🇫🇷France AimadBachar

    Hello,
    The patch stop-disabling-checkboxes-3416333-4.patch works, I can now use the facets after using the back button on my web browser.
    Thanks

  • 🇨🇦Canada jmoruzi Brantford, ON

    The following applies to both 2.0.8 (patched or un-patched) and 3.0.0-beta1

    Neither of these patches has any affect for me. I tested each patch individually on v2.0.8, as well as together, and in all 3 situations I see the same behaviour as if no patches are installed. In all browsers facets work as expected as long as you do not touch the back button.

    There is no change in behaviour in Firefox, and there are issues in Chromium browsers as well.

    In Firefox:

    1. I select a facet and results are filtered properly.
    2. Select a second facet and results are filtered properly.
    3. Click the back button, and the previous page loads with the results from the first facet, which is the desired behaviour, but both facets are still selected, and disabled
    4. Click the back button again, and only the first facet is selected, but disabled

    Even if I click the back button again to go to the previous page that has filtered results, and then select the forward button to go to the page with the faceted results, the facets are still disabled until I reload the page.

    Chrome, Edge and Brave:

    There are no issues with the facets being disabled, but they are not activated properly once you use the back button.

    1. Select a facet and results are filtered
    2. Select a second facet, and results are filtered
    3. Uncheck the first facet and results are filtered properly
    4. Click the back button, you're taken back to the previous page, but the facet that was deselected in step 3 is still unchecked, so there is a disconnect between the selected facets and the results shown on the page. You're seeing the result of facet 1 and 2 being selected, but only facet 2 is checked.
    5. Uncheck facet 2, the page reloads, and now the first facet is checked. The results on the page are filtered properly.
    6. Click the back button. No facets are checked, but the results are filtered on the first and second facets.

    This may be the same behaviour you would see in Firefox, but since the facets are disabled after clicking the back button there's no way to know.

Production build 0.71.5 2024