0

I have a component called AvatarMenu and inside of this component his built like this.

AvatarMenu component

export function AvatarMenu() {
  return (
    <IconButton>
      <ProfileContainer>
        <Avatar />
        <Icon
          name="caret-down"
          width={RFValue(8)}
          height={RFValue(4)}
          style={{ marginLeft: 8 }}
        />
      </ProfileContainer>
    </IconButton>
  )
}

And I would like to use this component with the MenuTrigger wrapper, but it does not work, like something this

<MenuTrigger>
   {/* <Icon name="trash" width={RFValue(18)} height={RFValue(20)} /> */}
   <AvatarMenu />
</MenuTrigger>

But if I comment the AvatarMenu and uncomment the Icon it works. Because I would like to do something like this enter image description here

Vagner Wentz
  • 391
  • 1
  • 7
  • 29
  • not sure what's not working... but only thing that caches my eyes is that your avatarMenu has button inside - you should let MenuTrigger handle the clicks - not to be "catched" by your button – sodik Aug 11 '22 at 10:12
  • alternatively - use your button to trigger menu programatically but it is more "hacking" – sodik Aug 11 '22 at 10:13

0 Answers0