[ui5-table]: TypeError: Cannot use 'in' operator to search for 'isTable' in null when table rows are destroyed while pending re-render

[AnastasiyaVavilava]

Bug Description

When ui5-table-row elements are removed from the DOM (e.g. because a parent framework re-renders the list with new data), a pending onBeforeRendering call fires on the detached row. At that point this.parentElement is null. The _table getter passes this null to isInstanceOfTable(), which calls createInstanceChecker, which does "isTable" in null — causing an uncaught TypeError.

Root cause

In TableRowBase.js:

get _table() {
    const element = this.parentElement; // can be null after detach
    return isInstanceOfTable(element) ? element : undefined;
}

In @ui5/webcomponents-base/dist/util/createInstanceChecker.js:

function createChecker(prop) {
    return (object) => {
        return object !== undefined && prop in object && object[prop] === true;
        //     ^^^^^^^^^^^^^^^^^^^ null is not guarded — "prop in null" throws
    };
}

The in operator throws TypeError if the right-hand operand is null. Only undefined is guarded.

Proposed fix

In createInstanceChecker.js (both dist/util/ and dist/prod/util/):

return object !== undefined && object !== null && prop in object && object[prop] === true;
Or alternatively guard in TableRowBase._table:

get _table() {
    const element = this.parentElement;
    return element && isInstanceOfTable(element) ? element : undefined;
}

Workaround

Patch node_modules/@ui5/webcomponents-base/dist/util/createInstanceChecker.js with patch-package.

Affected Component

ui5-table-row, ui5-table-header-row

Expected Behaviour

No response

Isolated Example

No response

Steps to Reproduce

1. Use ui5-table with Angular (or any framework that re-renders the row list reactively)
2. Render a table with rows
3. Trigger a data reload that replaces all rows (e.e. search/filter reset)
4. The framework destroys the old ui5-table-row elements while UI5's render queue still has a pending onBeforeRendering for them
5. TypeError: Cannot use 'in' operator to search for 'isTable' in null is thrown

Log Output, Stack Trace or Screenshots

No response

Priority

High

UI5 Web Components Version

2.23.1

Browser

Chrome

Operating System

No response

Additional Context

No response

Organization

No response

Declaration

• I’m not disclosing any internal or sensitive information.

[plamenivanov91]

Hello @UI5/ui5-team-webc ,

Seems the issue is in the core, and not table.

Here is a short summary of my AI analysis:

This is a legitimate library bug, not an app dev issue. Here's why:

The bug is real. createInstanceChecker.ts:4 only guards !== undefined but in throws on null too — and this.parentElement returns null (not undefined) for detached elements. So isInstanceOfTable(null) crashes.

It's not the app dev's fault because:

The _table getter at TableRowBase.ts:119-122 is called internally during the component lifecycle — the app doesn't call it
The lifecycle callback (onBeforeRendering) firing on a detached element is the framework's own render queue not cleaning up promptly — that's expected behavior under async rendering
Any framework (Angular, React, Vue) that replaces list items reactively will hit this, which is a normal, common use case
The fix belongs in createInstanceChecker.ts:4 since it's the utility's contract to handle any value safely:

return object !== undefined && object !== null && prop in object && object[prop] === true;
The _table getter fix is also valid as defense-in-depth, but the root cause is in createInstanceChecker. It's a small, low-risk fix worth a PR.

Core (createInstanceChecker) is the right fix.

The reason: createInstanceChecker is a general-purpose utility in @ui5/webcomponents-base used across the entire codebase — Table, Tree, List, and anything else that uses duck-type instance checking. Its implicit contract is "pass me any value, I'll tell you if it's the right type." Crashing on null violates that contract for every caller.

If you only fix _table in TableRowBase, you paper over one call site but leave the same trap for every other component that ever passes a parentElement (or any nullable DOM result) to an instance checker.

One-line fix in one file, all callers protected.

Could you please take over?

Regards,
Plamen