[Bug]: NewsGrid category filter state desynchronizes after navigating away and returning to /company/news
@suryaff733 is already working on this.
Since Sep 9, 2026.
- 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
trueacross unmounts/remounts). - The buttons lose the
.mystyleactive 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:
- Click "Coverage" filter button (active style applies, list filters to Coverage).
- Navigate away (e.g., click an external link or back to home).
- Click back to
/company/news— list stays filtered to Coverage, but button active style is missing.- Click "Coverage" button again — button gains active style, but data un-filters to show all articles.
Steps to Reproduce
- Go to https://layer5.io/company/news.
- Click the Coverage filter button. (Only Coverage articles are displayed, and the button becomes highlighted).
- Click any article link or navigate to another page (e.g. click the Layer5 logo to go to Home).
- Click the browser's Back button to return to
/company/news. - Observe:
- The news list remains filtered to Coverage articles only.
- The Coverage button has lost its active styling and appears unselected.
- Click the Coverage button again.
- 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.
- The button now becomes styled as active (
Expected Behavior
Filter button active styles and the filtered dataset should be managed via React component state (useState / URL parameters) so that:
- Component remounts correctly reset or synchronize the filter state.
- Active button styles dynamically reflect the current state (e.g.,
className={selectedCategory === "Coverage" ? "mystyle" : ""}) rather than imperatively toggling classes withdocument.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:
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.