[Bug]: #text node as firstChild in <colgroup> after upgrading to Vue 3

[raftx24]

Affected Packages

table

Version(s)

2.6.6

Bug Description

We recently upgraded our project from Vue.js 2 to Vue.js 3, and after the upgrade, I encountered an issue with how firstChild is handled in a element.

Specifically, the following line of code throws an error because the firstChild of the colgroup is now a #text node.

function updateColumnsOnResize(node, colgroup, table, cellMinWidth, overrideCol, overrideValue) {
  var _a;
  let totalWidth = 0;
  let fixedWidth = true;
  let nextDOM = colgroup.firstChild; // this line
  const row = node.firstChild;
  if (!row)
    return;
  for (let i = 0, col = 0; i < row.childCount; i++) {
    const { colspan, colwidth } = row.child(i).attrs;
    for (let j = 0; j < colspan; j++, col++) {

<colgroup>
  <col style="width: 25px;">
  <col style="width: 276px;">
  <col style="width: 50px;">
</colgroup>

Suggested Fix: Replacing firstChild with firstElementChild solves the issue, as it correctly skips over the text nodes and selects the first actual element:

Browser Used

Chrome

Code Example URL

No response

Expected Behavior

When I resize column I shouldn't get error

@tiptap_extension-table.js?v=b69cc675:1377 Uncaught TypeError: Cannot read properties of undefined (reading 'width')
    at updateColumnsOnResize (@tiptap_extension-table.js?v=b69cc675:1377:27)
    at displayColumnWidth (@tiptap_extension-table.js?v=b69cc675:1635:3)
    at move (@tiptap_extension-table.js?v=b69cc675:1548:7)

Additional Context (Optional)

No response

Dependency Updates

• [X] Yes, I've updated all my dependencies.

[nperez0111]

I would take a PR to resolve this

[raftx24]

@nperez0111 I create a PR to fix this.