palantir/blueprint

Cannot render Collapse inside table rows or cells

Open

#3,951 opened on Feb 2, 2020

View on GitHub
 (0 comments) (3 reactions) (0 assignees)TypeScript (20,263 stars) (2,167 forks)batch import
P2Package: coreType: bughelp wanted

Description

Environment

  • Package version(s): 3.18
  • Browser and OS versions: Chrome 79.0.3945.117; Windows 10 Home OS Build: 18362.592

If possible, link to a minimal repro (fork this code sandbox): https://codesandbox.io/s/blueprint-sandbox-kxl82

Steps to reproduce

  1. Make Collapse element visible by clicking plus button

Actual behavior

Collapse renders a tr root element, then wraps the contents in an invalid <div> tag, which causes the browser to wrap the div in a td element. Discussed here: https://github.com/palantir/blueprint/issues/3652

Expected behavior

Collapse renders one or more tr elements containing td children into the existing table

Possible solution

The root tag specified by the component prop is rendered and passed container style classes, etc., but then a div tag is hardcoded as the direct child. The div would need to be removed, since it is not a valid child of a tr or other table elements. Could the properties currently embedded in the div be passed directly to the children?

Contributor guide

Tech stack
reacttypescripthtml
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
React basicsHTML table elements
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
40
Research direction
The issue involves the Collapse component rendering a <div> inside a <tr>, which is invalid HTML. The fix is to remove the hardcoded <div> in the Collapse component and pass its properties directly to the children or allow a configurable root element. Look at the Collapse component source in `src/components/collapse/collapse.tsx` and consider the comment in issue #3652. Ensure the component works correctly when used inside table rows.