Usage with Custom components as MenuItem

[Gaurav Gupta]

In the current implementation, the focus management and onClick for the MenuItem is internally taken care of . This works alright when the MenuItems are spans which need to trigger a functionality on click, but if the MenuItems are to be links (anchor tag), then this does not work as expected.

In the docs, i can see that we can pass a tag and props to the MenuItem instead of children which will make it work for the link as expected.

<MenuItem tag='a' href="https://..." > text </MenuItem>

Is there a way to make this work with Link from react router, or any other custom Link components

[Shirshendu Bhowmick]

The way the tag prop is handled internally is using React.createElement. So even if you pass a React component in tag instead of an HTML tag string that should also work.

It will also pass necessary props like to of Link to the Link component, necessary checks are in place to exclude keys which doesn't match hasOwnProperty and some internal reserved props

[Gaurav Gupta]

Yeah, I tried it like this, doesn't seem to work:

// not the exact code
import { Link } from 'react-router-dom';

<Wrapper>
        <MenuButton id="overflow" tag="button">
          <span> More </span>
        </MenuButton>
        <Menu>
          <MenuItem
            tag={Link}
            to="/someroute"
          >
            <div> something</div>
          </MenuItem>
          <MenuItem value="2" text="2">
            something else
          </MenuItem>
        </Menu>
</Wrapper>

the error i get in this case is:
focus-group: only DOM nodes allowed

[Shirshendu Bhowmick]

Which version you are using and also whats the React version ?

[Shirshendu Bhowmick]

Here is an working example

https://codesandbox.io/s/floral-flower-poc5q4?file=/src/App.js

Also note that React 18 is not yet fully supported by this library.