layer5io / layer5io/layer5

[Bug]: NewsGrid category filter state desynchronizes after navigating away and returning to /company/news

Open
#8,032 4 comments 0 reactions 1 assignee View on GitHub

@suryaff733 is already working on this.

Since Sep 9, 2026.

framework/gatsby help wanted kind/bug
Dominant language
JavaScript
Stars
1.1k
Forks
1.6k
Avg merge
2d 10h
Merged PRs (30d)
18

Description

Description

On the Layer5 in the News page (/company/news), the category filter buttons (Coverage and Releases) use module-level variables (let coverageFiltered = false; let pressReleaseFiltered = false;) and direct DOM manipulation (classList.toggle("mystyle")) rather than React component state.

When a user applies a filter, navigates to another page (or an article), and returns via browser back navigation or client-side links, the filter state and the visual button state invert and desynchronize:

  • The list remains filtered to the selected category (because the module-level variables stay true across unmounts/remounts).
  • The buttons lose the .mystyle active highlight because the DOM is recreated fresh without the class.
  • Clicking the seemingly inactive button toggles the active visual style ON while resetting the filtered data back to all items (active appearance, un-filtered data).
Video / Screen Recording

https://github.com/user-attachments/assets/7020a909-6c59-4c4c-8ea1-ce0c86931036

Reproduction shown in video:

  1. Click "Coverage" filter button (active style applies, list filters to Coverage).
  2. Navigate away (e.g., click an external link or back to home).
  3. Click back to /company/news — list stays filtered to Coverage, but button active style is missing.
  4. Click "Coverage" button again — button gains active style, but data un-filters to show all articles.

Steps to Reproduce
  1. Go to https://layer5.io/company/news.
  2. Click the Coverage filter button. (Only Coverage articles are displayed, and the button becomes highlighted).
  3. Click any article link or navigate to another page (e.g. click the Layer5 logo to go to Home).
  4. Click the browser's Back button to return to /company/news.
  5. Observe:
    • The news list remains filtered to Coverage articles only.
    • The Coverage button has lost its active styling and appears unselected.
  6. Click the Coverage button again.
  7. Observe:
    • The button now becomes styled as active (.mystyle).
    • But the news list un-filters and displays all articles (both Coverage and Releases). The visual button state and actual data state are inverted.
Expected Behavior

Filter button active styles and the filtered dataset should be managed via React component state (useState / URL parameters) so that:

  1. Component remounts correctly reset or synchronize the filter state.
  2. Active button styles dynamically reflect the current state (e.g., className={selectedCategory === "Coverage" ? "mystyle" : ""}) rather than imperatively toggling classes with document.getElementById(...).
Actual Behavior

Module-level variables persist across unmount/remount cycles while the DOM resets, decoupling the button styling from the displayed news dataset.

Technical Details & Code Reference

In src/sections/Company/News-grid/index.js:

  1. Module-scoped state & imperative DOM mutation (Lines 13–19):
    let coverageFiltered = false;
    let pressReleaseFiltered = false;
    
    function colorchange(id) {
      let element = document.getElementById(id);
      element.classList.toggle("mystyle");
    }
    

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.