ant-design: Trying to use react-beautiful-dnd but can't use ref or innerRef on List component
- I have searched the issues of this repository and believe that this is not a duplicate.
Reproduction link
Steps to reproduce
- Add
react-beautiful-dnd - Wrap your content with
<DragDropContext> - Render an
antd<List>as a child of<Droppable> - innerRef/ref??? - not working for
Droppable - Render children as
<Draggable><List.Item /></Draggable> - innerRef/ref??? - not working for
Draggable
(There are also errors in the console from react-beautiful-dnd saying that the ref was not provided
What is expected?
ref prop should be the ref of the HTML element.
What is actually happening?
ref is ignored by antd
| Environment | Info |
|---|---|
| antd | 3.25.1 |
| React | 16.11.0 |
| System | Windows 10 |
| Browser | Chrome Version 78.0.3904.97 (Official Build) (64-bit) |
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Reactions: 8
- Comments: 15 (4 by maintainers)
Commits related to this issue
- feat: List.Item supports ref forwarding (#19764) — committed to buhichan/ant-design by buhichan 4 years ago
- feat: List and List.Item supports ref forwarding (#19764) — committed to buhichan/ant-design by buhichan 4 years ago
- feat: List and List.Item supports ref forwarding (#19764) — committed to buhichan/ant-design by buhichan 4 years ago
@afc163 Hello! Any plans for adding ref to Collapse and Panel? I wanted to implement a drag and drop feature for my collapsible panels.
Hello there! I’m currently facing this same issue with the Collapse.Panel component. I’m working on a file dropping system and would need to have a ref on the Panel component - which would allow me to track whether the user is dragging a file over it. Is it still planned to forward the ref at this point?
https://medium.com/versatileai/react-beautiful-dnd-with-antd-list-19ed6d77ae42