[SideNavigation]: throws "getComputedStyle: parameter 1 is not of type 'Element'" error #12261
Description
Bug Description
The ui5-side-navigation web component throws a runtime error when getComputedStyle() is called with a null DOM reference, causing application crashes in production.
TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
node_modules/@ui5/webcomponents-fiori/dist/SideNavigation.js
Line 320: const { marginTop, marginBottom } = window.getComputedStyle(selectedItemDomRef);
- Package: @ui5/webcomponents-fiori: 2.10.0
- Component: ui5-side-navigation
- Framework: React 18+ (using @ui5/webcomponents-react wrapper)
- Browser: Chrome, Firefox (reproduced across browsers)
- Build: Production (reported via error monitoring)
The error occurs in the web component's internal DOM management code around line 317-320:
const selectedItem = overflowItems.filter(isInstanceOfSideNavigationSelectableItemBase).find(item => item._selected);
if (selectedItem) {
const selectedItemDomRef = selectedItem.getDomRef(); // ⚠️ Can return null
const { marginTop, marginBottom } = window.getComputedStyle(selectedItemDomRef); // 💥 FAILS HERE
itemsHeight += selectedItemDomRef.offsetHeight + parseFloat(marginTop) + parseFloat(marginBottom);
}
The Issue: selectedItem.getDomRef() can return null during DOM lifecycle transitions, but the code doesn't check for this before calling getComputedStyle().
Affected Component
SideNavigation
Expected Behaviour
Add a null check before calling getComputedStyle():
const selectedItem = overflowItems.filter(isInstanceOfSideNavigationSelectableItemBase).find(item => item._selected);
if (selectedItem) {
const selectedItemDomRef = selectedItem.getDomRef();
if (selectedItemDomRef) { // ✅ Add this null check
const { marginTop, marginBottom } = window.getComputedStyle(selectedItemDomRef);
itemsHeight += selectedItemDomRef.offsetHeight + parseFloat(marginTop) + parseFloat(marginBottom);
}
}
Isolated Example
No response
Steps to Reproduce
This occurs with dynamic content (common in modern web applications):
- Navigation items that appear/disappear based on conditions
- Framework re-rendering cycles (React, Vue, etc.)
- Route-based navigation changes causing DOM updates
Log Output, Stack Trace or Screenshots
No response
Priority
None
UI5 Web Components Version
2.10.0
Browser
Chrome
Operating System
Mac OS
Additional Context
This is a defensive programming issue in the web component's internal DOM management that should be addressed in the core library.
Organization
SAP Signavio
Declaration
- I’m not disclosing any internal or sensitive information.
Metadata
Metadata
Assignees
Type
Projects
Status