react-block-ui icon indicating copy to clipboard operation
react-block-ui copied to clipboard

Warning | validateDOMNesting For Helper Ref

Open GoPro16 opened this issue 4 years ago • 1 comments

Currently if a user wants to override the tag prop of react-block-ui they can but it doesn't account for warnings that may come up if per say we were to have a tag of <tbody>

Example Code:

<BlockUI tag="tbody">
   <td>hello</td>
</BlockUI>

rendered HTML

<tbody>
   <td>hello</td>
   <span />
</tbody>
Warning: validateDOMNesting(...): <span> cannot appear as a child of <tbody>.

Code Link

I would suggest the we move the span ref helper out of the component and return BlockUI as a fragment of both. Then we can just have the span grab the same element from helper.previousSibling to allow any tag to be overridden for the BlockUI tag prop.

GoPro16 avatar Jan 25 '20 17:01 GoPro16

Came here to report the same. This looks very ugly in the console.

djejaquino avatar Mar 23 '20 20:03 djejaquino