Skip to content

Fix #149: guard null Home Assistant root before accessing shadowRoot (Firefox crash)#157

Open
program-the-brain-not-the-heartbeat wants to merge 1 commit into
DBuit:masterfrom
program-the-brain-not-the-heartbeat:fix/149-firefox-shadowroot-null
Open

Fix #149: guard null Home Assistant root before accessing shadowRoot (Firefox crash)#157
program-the-brain-not-the-heartbeat wants to merge 1 commit into
DBuit:masterfrom
program-the-brain-not-the-heartbeat:fix/149-firefox-shadowroot-null

Conversation

@program-the-brain-not-the-heartbeat

Copy link
Copy Markdown

Fixes #149

The crash

On Firefox, sidebar-card intermittently throws:

TypeError: can't access property "shadowRoot", s is null

…and the sidebar stops rendering at full width.

Cause: updateStyling() (the window resize handler registered in subscribeEvents) and watchLocationChange() call getRoot() and then dereference root.shadowRoot without a null check. When a resize or location-changed event fires while Home Assistant's DOM is mid-render — a timing race Firefox hits more often than Chromium — getRoot() returns null and the access throws, aborting the styling pass (so the sidebar isn't full width).

Fix: bail out early when root / root.shadowRoot aren't ready, mirroring the guards that already exist in buildSidebar() and getHeaderHeightPx().

Also in this PR

While fixing the above I ran into two pre-existing issues:

  1. Build was broken (npm run build → TS1128). The case 'call-service': block opened a { but was never closed (missing break; / }), leaving case 'service-js': illegally nested — so the current src doesn't compile and the committed dist predates it. I closed the block (which also fixes the unintended fall-through from call-service into service-js) so the project builds again, and rebuilt dist.
  2. Footer detection bug. root.shadowRoot.querySelector('ch-footer' || root.shadowRoot.querySelector('app-footer')) put the || inside the selector string, so it always queried the literal 'ch-footer' and never fell back to app-footer. Corrected to a real || fallback.

Changes

  • src/sidebar-card.ts — null guards in updateStyling() + watchLocationChange(); close the call-service switch block; footer selector fix.
  • dist/sidebar-card.js — rebuilt.

Verified npm run build now succeeds and the guard is present in the emitted dist.

updateStyling() (the window 'resize' handler) and watchLocationChange()
dereferenced getRoot().shadowRoot without a null check. When a resize or
location-change fires while Home Assistant's DOM is mid-render — a timing
race Firefox hits intermittently — getRoot() returns null and it throws
'TypeError: can't access property "shadowRoot", s is null', leaving the
sidebar not full-width. Now bails out like buildSidebar()/getHeaderHeightPx().

Also:
- Close the unterminated 'case call-service' block (missing break;/}), which
  left 'case service-js' illegally nested and broke 'npm run build' (TS1128);
  rebuilt dist.
- Fix footer detection: querySelector('ch-footer' || querySelector('app-footer'))
  queried a literal string; corrected to a proper || fallback.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

TypeError: can't access property "shadowRoot", s is null

1 participant