Menu control issue

Hi,

I’m trying to use an <Avatar /> as a control for a menu but it seems it doesn’t work properly (I cannot click the element and open the menu) when you wrap the element between <Suspense />

I’m getting the initials from an async call, the hardcoded example is just to recreate the issue

        <Menu
          menuPosition={{ top: 40, right: 0 }}
          control={
            <Suspense fallback="...">
              <Avatar>JM</Avatar>
            </Suspense>
          }
        >
          <MenuItem icon={<RiSettings2Line />}>Settings</MenuItem>
          <MenuItem icon={<RiMessage3Line />}>Messages</MenuItem>
          <Hr />
          <MenuItem color="red">Delete account</MenuItem>
        </Menu>

Thanks.

[rtivital]

You need to spread props to target element – https://codesandbox.io/s/zealous-euclid-h6vly?file=/src/App.tsx

[juan-manuel-alberro]

Following your example, I added the other cases I tried before - https://codesandbox.io/s/musing-lovelace-unywp For some reason including the parent inside the component didn’t work.