When I assign a React component like this...
<MaterialTable components={{ Toolbar: props => <CustomToolbar {...props} /> }} />
...or like this...
<MaterialTable components={{ Toolbar: props => CustomToolbar(props) }} />
...it appears that React renders it differently than if it was assigned like this
<MaterialTable components={{ Toolbar: CustomToolbar }} />
Instructions to reproduce it:
- Go to this codesandbox
- Select a row from the table, then click on the button at the top right. The dropdown menu will pop-up on the top left of the page rather than near the button.
- Comment out line 56, then uncomment line 54, then repeat the previous step. Now the dropdown menu will pop-up near the button, as expected.
I believe this happens because the dropdown menu loses the reference to the button when its parent (the toolbar) is rendered.
Any idea how to overcome this?
