palantir/blueprint

Cannot render Collapse inside table rows or cells

Open

#3,951 创建于 2020年2月2日

在 GitHub 查看
 (0 评论) (3 反应) (0 负责人)TypeScript (20,263 star) (2,167 fork)batch import
P2Package: coreType: bughelp wanted

描述

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?

贡献者指南

技术栈
reacttypescripthtml
领域
frontend
议题类型
bug
难度面向新贡献者的预计实现难度，1 表示很小改动，5 表示专家级工作。
3
预计时间有经验贡献者完成调查、实现、测试并准备 pull request 的粗略时间范围。
half day
活动状态议题当前的可参与程度：新鲜、活跃、陈旧、阻塞或等待维护者输入。
stale
清晰度议题是否清楚说明期望改动、验收标准和下一步。
clear
前置要求
React basicsHTML table elements
新手友好度1-100 的估计分数，表示该议题对首次贡献者的友好程度。
40
研究方向
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.