Fix bfcache filter state preservation on events page

[Copilot]

PR #4480 introduced an unconditional page reload on bfcache restoration, breaking temporary filter modifications on the events page when using the back button.

Changes

web/skins/classic/js/skin.js

• Conditionally reload only when rendering issues detected (mainContentJ[0].clientHeight < 1)
• Allows individual pages to handle bfcache restoration otherwise

web/skins/classic/views/js/events.js

• Save filter state to sessionStorage on pagehide
• Restore filter state from sessionStorage when page loaded from bfcache (event.persisted)
• Validate select values against available options before restoration
• Comprehensive error handling for quota exceeded, disabled sessionStorage, corrupted data
• Element-based iteration to prevent XSS via string interpolation

// Store state before navigation
window.addEventListener('pagehide', function() {
  const filterState = {};
  $j('#fieldsTable input, #fieldsTable select').each(function() {
    const name = $j(this).attr('name');
    if (name) filterState[name] = $j(this).val();
  });
  sessionStorage.setItem('eventsFilterState', JSON.stringify(filterState));
});

// Restore state when returning via bfcache
window.addEventListener('pageshow', function(event) {
  if (event.persisted) {
    // Restore and validate filter values, refresh table
  }
});

This preserves temporary filter changes across back-button navigation while maintaining bfcache performance benefits and handling rendering edge cases.

Original prompt

Problem

Issue #4493 reports that temporary filter changes on the events page get wiped out when returning from an event view using the browser's back button.

This regression was introduced by PR #4480, which modified the pageshow event handler to unconditionally reload the page whenever it's restored from the browser's back-forward cache (bfcache). While this fixed rendering issues on some browsers, it breaks the legitimate use case of temporary filter modifications.

Root Cause

In web/skins/classic/js/skin.js (lines 2092-2097), the current code always forces a page reload when bfcache restores a page:

window.addEventListener('pageshow', (event) => {
  if (event.persisted) {
    // Do any checks and updates to the page
    window.location.reload( true );
  }
});

Previously, this had a conditional check that only reloaded if there was an actual rendering problem (mainContentJ[0].clientHeight < 1).

Solution

Implement a proper bfcache handling strategy that:

1. Preserves filter state in sessionStorage before navigation
2. Restores filter state when the page is loaded from bfcache
3. Only forces reload in skin.js when there's an actual rendering problem

Changes Required

1. In web/skins/classic/views/js/events.js

Add handlers to save and restore filter state:

// Store filter state before navigating away
window.addEventListener('pagehide', function() {
  const filterState = {};
  $j('#fieldsTable input, #fieldsTable select').each(function() {
    const el = $j(this);
    filterState[el.attr('name')] = el.val();
  });
  sessionStorage.setItem('eventsFilterState', JSON.stringify(filterState));
});

// Restore filter state when coming back via bfcache
window.addEventListener('pageshow', function(event) {
  if (event.persisted) {
    const savedState = sessionStorage.getItem('eventsFilterState');
    if (savedState) {
      const filterState = JSON.parse(savedState);
      Object.keys(filterState).forEach(function(name) {
        $j('#fieldsTable [name="'+name+'"]').val(filterState[name]);
      });
      // Refresh the table with the restored filter values
      table.bootstrapTable('refresh');
    }
  }
});

2. In web/skins/classic/js/skin.js

Restore the conditional reload logic (revert the change from PR #4480):

window.addEventListener('pageshow', (event) => {
  if (event.persisted) {
    // Only reload if there's an actual rendering problem
    if (mainContentJ && mainContentJ[0] && mainContentJ[0].clientHeight < 1) {
      window.location.reload( true );
    }
    // Otherwise, let individual pages handle bfcache restoration
  }
});

Benefits

• ✅ Fixes the regression - temporary filter changes are preserved
• ✅ Maintains the performance benefits of bfcache (instant back-button navigation)
• ✅ Still handles rendering issues by conditionally reloading when needed
• ✅ Establishes a pattern that can be applied to other views
• ✅ Better user experience overall

Testing Steps

1. Navigate to the events page and apply a named filter
2. Modify one or more filter fields at the top of the page (temporary changes)
3. Click on an event to view it
4. Use the browser's back button to return to the events page
5. Verify that the temporary filter changes are still applied
6. Verify that the page doesn't appear blank or broken (rendering check still works)

Closes #4493

This pull request was created from Copilot chat.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.