Rendering `Collapse` within `HTMLTable` doesn't seem to work, what am I doing wrong?

Environment

• Package version(s): 3.17.1
• Browser and OS versions: Electron 3.0.7

Question

I don’t really get the behavior that I expect from the interaction between Collapse and HTMLTable. Basically, I have a list of table rows that need to expand into larger groups, e.g.:

foo v
    sub foo 1
    sub foo 2
    sub foo 3
bar ^
baz ^

Clicking foo should expand or collapse the subcategories as necessary. Pretty straightforward.

The problem is that neither of the things I expect to work actually work when the Collapse contents are generated from props. I tried two things:

render() {
        return (
            <React.Fragment>
                <tr>
                    ...
                </tr>

                {redacted.map((...) =>
                    <Collapse isOpen={this.state.isOpen} component="tr" keepChildrenMounted={true}>
                        ...
                    </Collapse>
                )}
            </React.Fragment>
        )
    }

which renders a ton of collapses as trs, as well as having Collapse outside of the map call, which creates one single Collapse with a bunch of programmatically generated trs.

Both of these fail for the same reason, because the contents of Collapse are still a div:

<tr class="bp3-collapse">
    <div class="bp3-collapse-body" aria-hidden="true" style="transform: translateY(0px);">   
        <td>blah</td>
         ... a bunch more td tags
    </div>
</tr>

which just throws:

Warning: validateDOMNesting(...): <div> cannot appear as a child of <tr>.
    in div
    in tr
    in Blueprint3.Collapse (created by Redacted)

So, uh, what am I doing wrong? The documentation says that component is used for rendering collapses inside tables, so I know this is POSSIBLE. :p Thanks in advance.

[justinbhopper]

@adidahiya I think at this point this should just be considered a documentation bug.

The docs say “Useful when rendering a Collapse inside a <table>, for instance.”, but really it should say “Useful when rendering a Collapse inside a <td>, for instance.”

Because there’s no way the current implementation could render valid HTML if setting component="tr" or component="table", since a div will always be rendered wrapping the children.

[adidahiya]

If anyone is still encountering this issue, can you please use the issue template and provide a code sandbox we can poke at to debug? Thanks