TypeError when changing input in DBTabPanel

[biancavo]

Which generators are affected?

• All
• HTML
• React
• Angular
• Vue
• Web components
• Power Apps

Reproduction case

After updating to version 2.2.5 (up to and including the current version 2.4.2) we get the following error in our unit tests when changing the value of an input in a component where we have a DBInput inside a DBTabPanel.

TypeError: 'closest' called on an object that is not a valid instance of Element.
 ❯ closest node_modules/.pnpm/jsdom@26.1.0/node_modules/jsdom/lib/jsdom/living/generated/Element.js:615:15
 ❯ v node_modules/.pnpm/@db-ux+v-core-components@2.4.1/node_modules/@db-ux/v-core-components/dist/db-ux.es.js:3548:17
    3546|       const I = (k = c.target) == null ? void 0 : k.closest;
    3547|       if (!I) return;
    3548|       const A = I("ul"), b = (
       |                 ^
    3549|         // db-tab-item for angular and stencil wrapping elements
    3550|         I("db-tab-item") ?? I("li")
 ❯ B.onInput.I.<computed>.I.<computed> node_modules/.pnpm/@db-ux+v-core-components@2.4.1/node_modules/@db-ux/v-core-components/dist/db-ux.es.js:3567:45
 ❯ callWithErrorHandling node_modules/.pnpm/@vue+runtime-core@3.5.17/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:200:19
 ❯ Object.callWithAsyncErrorHandling node_modules/.pnpm/@vue+runtime-core@3.5.17/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:207:17
 ❯ HTMLDivElement.invoker node_modules/.pnpm/@vue+runtime-dom@3.5.17/node_modules/@vue/runtime-dom/dist/runtime-dom.cjs.js:665:17
 ❯ HTMLDivElement.callTheUserObjectsOperation node_modules/.pnpm/jsdom@26.1.0/node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30
 ❯ innerInvokeEventListeners node_modules/.pnpm/jsdom@26.1.0/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:350:25
 ❯ invokeEventListeners node_modules/.pnpm/jsdom@26.1.0/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:286:3
 ❯ HTMLInputElementImpl._dispatch node_modules/.pnpm/jsdom@26.1.0/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:233:9

We also get the following error in browser console (pointing to the same code lines like above):

Uncaught (in promise) TypeError: Illegal invocation
    at v (@db-ux_v-core-components.js?v=94ebf707:3747:17)
    at createElementBlock.onInput.I.<computed>.I.<computed> (@db-ux_v-core-components.js?v=94ebf707:3766:45)
    at callWithErrorHandling (chunk-MTU4XKSZ.js?v=d5bfe740:2272:19)
    at callWithAsyncErrorHandling (chunk-MTU4XKSZ.js?v=d5bfe740:2279:17)
    at HTMLDivElement.invoker (chunk-MTU4XKSZ.js?v=d5bfe740:11271:5)

Expected Behaviour

No error occurs and our tests run successfully like before.

Screenshots

No response

Browser version

None

Add any other context about the problem here.

No response

[mfranzke]

@biancavo thanks a lot for reporting this problem. Could you please provide a code example in here or even a working example via https://githubbox.com/db-ux-design-system/examples/tree/main/vue-example, please?

[biancavo]

@mfranzke Hi, here a code example with an input in the second tab: https://codesandbox.io/p/sandbox/zealous-keller-4vwsd8