Nested ContextMenuProvider

[sergeymild]

<Home>
  <ContextMenuProvider id="home-context-menu">
    {files.map((file) => (
      <ContextMenuProvider id="list-iteme-context-menu">
        <div>File</div>
      </ContextMenuProvider>
    ))}
  </ContextMenuProvider>
</Home>


const HomeContextMenu = props => (
    <ContextMenu id='home-context-menu'>
        <Item onClick={props.onClick}>Edit</Item>
    </ContextMenu>
);

const ListItemContextMenu = props => (
    <ContextMenu id='list-iteme-context-menu'>
        <Item onClick={props.onClick}>Delete</Item>
    </ContextMenu>
);

Then i did this, and clicked on File i have an error Cannot read property 'offsetWidth' of null
How to make different menus for Home and nested list items?

[fkhadra]

Hello @sergeymild ,

Sorry for the late reply, could you put a sample on codesanbox please?

Thanks

[cmcgdd]

I believe I'm having the same issue and threw together a quick codesandbox to demonstrate. https://codesandbox.io/s/l5mlywrk67

Seems like you can't make a container with a context menu have children with a different context menu.

[fkhadra]

Hello,

Thanks for the sandbox. I think there is an issue in my ContextMenuProvider implementation. I'll put it on my todo list.

[fkhadra]

Hello @sergeymild, @cmcgdd,

Here is a working sample:

By default, the ContextMenuProvider use a div, I replaced the div with a p tag so the content don't take the whole line.