react-contexify Props not passed when Items inside intermediary component

Props not passed when Items inside intermediary component

Open rafaponieman opened this issue 4 years ago • 8 comments

Hi! While running similar code to the following, I find that, when Item is placed inside a fragment, or inside of another component that goes into Menu, the click event received by the handler is undefined, and the props aren't passed on.

<Menu>
  <Item onClick={onMenuItemClick}>Item 1</Item>
  {asd === dsa && (
    <>
      <Item onClick={onMenuItemClick}>Item 2</Item>
      <Item onClick={onMenuItemClick}>Item 3</Item>
    </>
  )}
</Menu>

Dec 04 '19 02:12 rafaponieman

Happens to me to. Something broke in the latest versions - it used to works. It seems the when Item is created, for the inner items, props.propsFromTrigger isn't passed.

When investigating more, it may be due to cloneItem doing React.cloneElement to theitem - it does a shallow clone, and so the object propsFromTrigger isn't cloned.

edit: That's not it. I don't knoe the reason.

Jan 12 '20 14:01 ymoran00

I could be wrong, but I believe it's this line where the children are cloned.

From react docs

If children is a Fragment it will be treated as a single child and not traversed.

If that is the issue, possible solution with react-is lib and editing this util fn. https://stackoverflow.com/questions/49012718/check-if-a-child-is-react-fragment