Source

Reported via WordPress.org support: https://wordpress.org/support/topic/l-broken-elements-on-dashboard-on-last-version-5-4/

Description

The fetchChartData() function in admin/assets/js/slimstat-chart.js uses CSS :has() pseudo-class in querySelector() calls without null checks. This causes chart rendering to crash in browsers that don't support :has() (Firefox < 121, older Chrome/Safari/Edge), and can also fail if the DOM structure doesn't match expectations.

Affected Code

File: admin/assets/js/slimstat-chart.js

Line 84:

var inside = document.querySelector(".inside:has(#slimstat_chart_" + chartId + ")");

Line 90-91:

inside.appendChild(loadingIndicator); // crashes if inside is null
document.querySelector(".slimstat-chart-wrap:has(#slimstat_chart_" + chartId + ")").style.display = "none"; // crashes if null

Line 142-143:

inside.removeChild(loadingIndicator); // crashes if inside is null
document.querySelector(".slimstat-chart-wrap:has(#slimstat_chart_" + chartId + ")").style.display = "block"; // crashes if null

Root Cause

The :has() CSS pseudo-class is relatively new (Chrome 105+, Safari 15.4+, Firefox 121+). When querySelector() with :has() is called on an unsupported browser, it returns null. The code then immediately calls methods on null, throwing TypeError: Cannot read property 'appendChild' of null.

Even on supported browsers, if the expected DOM structure (.inside containing #slimstat_chart_X) doesn't exist, the same crash occurs.

Reproduction Steps

1. Open WP Admin → Slimstat → any dashboard view with charts (using Firefox < 121 or older browser)
2. Charts may fail to render (check browser console for JS errors)
3. If charts render, change the granularity dropdown (e.g., Daily → Weekly)
4. Observe: TypeError in console, chart disappears permanently

Expected: Chart refreshes with new granularity data
Actual: JavaScript crash, chart hidden, loading spinner never appears

Suggested Fix

Add null checks before DOM operations. Consider replacing :has() with closest() or parentElement traversal for broader browser compatibility:

// Instead of:
var inside = document.querySelector(".inside:has(#slimstat_chart_" + chartId + ")");

// Use:
var chartEl = document.getElementById("slimstat_chart_" + chartId);
var inside = chartEl ? chartEl.closest(".inside") : null;
if (!inside) return;

// And similarly for .slimstat-chart-wrap:
var chartWrap = chartEl ? chartEl.closest(".slimstat-chart-wrap") : null;
if (chartWrap) chartWrap.style.display = "none";

Environment

• WP Slimstat 5.4.0
• Affects all dashboard views with charts (slimview1-5)
• Browser: any without CSS :has() support

Validated via qa-issue-validate skill (jaan.to plugin)