Menu position wrong when anchored to upper right corner view

[jeremy303]

Environment

Paper v2.15.2

Description

My project is presently using React Native Navigation and I would like to display a Menu when a button is clicked in the native top navigation bar / app bar. Since the top bar is native, it's button can't serve as an anchor for the Menu, so I planned to instead anchor to an invisible View immediately below the native toolbar button.

Unfortunately, when the Menu renders it does not appear below the anchor view in the top-right corner. I'm assuming that the Menu should display immediately below this anchor, so this would be a bug? Is there a better way to accomplish the effect I am after?

Thanks!

Reproducible Demo

I've created a snack which demonstrates the issue: https://snack.expo.io/@holysamosa/c16159

Screenshot

Here's an example: (I've given the anchor view a red background for visibility)

[iyadthayyil]

I don't know why this issue is caused.

As a quick workaround wrap the menu in another view with position styles.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  row: {
    width: '100%',
    backgroundColor: 'green',
  },
  mainMenuAnchor: {
    width: 24,
    height: 5,
    backgroundColor: 'red',
  },
  menuWrapper: {
    alignSelf: 'flex-end',
    margin: 8,
  }
});

<Provider>
        <View style={[styles.container]}>
          <View style={[styles.row]}>
          <View style={styles.menuWrapper}>
            <Menu
              visible={this.state.visible}
              onDismiss={this._closeMenu}
              anchor={
              <View style={[styles.mainMenuAnchor]} />
              }
            >
              <Menu.Item onPress={() => {}} title="Item 1" />
              <Menu.Item onPress={() => {}} title="Item 2" />
            </Menu>
            </View>
          </View>
        </View>
        <Button style={[styles.button]} onPress={this._openMenu}>Show menu</Button>
</Provider>

[jeremy303]

@iyadthayyil Thanks for the work around!

[ferrannp]

Wdyt @Trancever ?

[jeremy303]

Also, while the suggested work-around of wrapping the Menu in a positioned view does move the menu to the right edge of the screen, the menu is still appearing a significant distance below the anchor (as also seen in the original image).

Any ideas?

[iyadthayyil]

@HolySamosa can you provide a snack? It looks fine for me: https://snack.expo.io/@iyadthayyil/menu-position-bug

[jeremy303]

@iyadthayyil: Looks like it renders correctly in Expo, but the additional vertical spacing appears when using vanilla React Native on iOS (Android is untested).

Here's the rendering of the same come from your snack running under vanilla React Native:

[github-actions[bot]]

Hello 👋, this issue has been open for more than 2 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix the issue.

[Trancever]

@HolySamosa There was some work done with Menu in recent versions of Paper. Can you tell us if this issue still occurs in v3.4.0?

[jeremy303]

Thanks, @iyadthayyil. The affected project has been on the backburner and I'm presently working to get another app out the door, but I'll test this out in the next couple of weeks and let you know.

[elmcapp]

This issues is still happing

[conor909]

Menu seems very broken, when I use it in table rows the anchor point gets very confused and causes the page to scroll to and the menu to open in the wrong location. Maintainers need to stop pushing bugs out, and stop github actions closing valid issues

[veliseev93]

Still have this issue. Please fix Menu component, now it is impossible to use.

[federicogomezlara]

I found a simple workaround to this, but I agree with @conor909 , I know you guys are probably not getting paid for this, but it would be nice if at least the issues didn't get closed without being solved, that way they might be easier to find for someone else, who, maaaybe, might be up for fixing it themselves.

But in the meantime... we needed not one but two buttons that used the Menu component side by side (though this works with just one aswell if you only have one), what ended up working was simply wrapping the components in a View with flex direction set to row, and justify content set to the flex's end

<View
        style={{ flexDirection: 'row', justifyContent: 'flex-end', gap: 16 }}
      >
        <ThemeDropdown />

        <ThemeDropdown />
</View>