MenuItem onPress not working on web

[mathis-kdio]

Description

The "onPress" property doesn't seem to work on the web with expo

CodeSandbox/Snack link

No response

Steps to reproduce

1. Go to '...'
2. Click on '...'
3. Scroll down to '...'
4. See error

gluestack-ui Version

1.0.19

Platform

• Expo
• React Native CLI
• Next
• Web
• Android
• iOS

Other Platform

No response

Additional Information

No response

[Viraj-10]

Hey @mathis-kdio, Thanks for reporting this issue. can you please give me a your requirement? I will provide you with work around if possible for now.
In current API we have Pressable on native where as on web it implements li tag that's why onPress doesn't work on web.
We are working on new API which will bridge this gap.

[mathis-kdio]

This code works well on mobile, but not on the web. I'm interested if you have a workaround.

<Menu
  placement='bottom left'
  trigger={({ ...triggerProps }) => {
    return (
      <Button {...triggerProps} bgColor='#0594ae'>
        <ButtonText>Menu</ButtonText>
      </Button>
    )
  }}
  closeOnSelect={true}
>
  <MenuItem key="Joueurs" textValue={t("liste_joueurs")} onPress={() =>  this.props.navigation.navigate('ListeJoueur')}>
    <MenuItemLabel size='sm'>{t("liste_joueurs")}</MenuItemLabel>
  </MenuItem>
</Menu>

[Viraj-10]

Hey @mathis-kdio, you can find workaround here.

[mathis-kdio]

Thank you for this workaround. I've tested it and it works well

[hamsterhomka]

Hey @mathis-kdio, you can find workaround here.

Unfortunately, it doesn't work as expected with Expo 49. The menu doesn't close when pressing on MenuItem