Component update fails if <tr> is root tag

[Alex-Sichkar]

First of all, thank you for this promising project. Is it required to use <div> as a component root in the template? I'm trying to use <tr> and get an exception:

alpinejs.morph.cdn.min.js:2 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'nodeType')

Minimal component to reproduce:

@default.register
class TableRow(Component):
    flag = True

    template: django_html = """
    <tr {% ... attrs %}>
      <th>Flag</th>
      <td @click="toggle">{{ flag }}</td>
    </tr>
    """

    @public
    def toggle(self, e):
        self.flag = not self.flag

[samwillis]

Hi Alex, I have spotted you have submitted an issue to Alpine. I suspect you are right about it being an Alpine issue. Will add my thoughts there...

https://github.com/alpinejs/alpine/discussions/3019

[samwillis]

I have submitted a pull request to Alpine.js to change the DOM fragment creation method to enable table support: https://github.com/alpinejs/alpine/pull/3020

[Alex-Sichkar]

@samwillis thank you!

[samwillis]

No worries, 'tr' as a component root element is clearly going to be a very common pattern so it's quite critical that it works!

[nerdoc]

I think you can close this issue as https://github.com/alpinejs/alpine/pull/3020 is already merged. It's merged, but with the version included in Tetra it does not work. And the newest version (3.10.5) seems to break Tetra completely. Any workarounds?

[nerdoc]

I've included Alpine v3.13.8 in tetra, and <tr> tags as root element are working flawlessly now.