TypeError undefined is not an object (evaluating 'this.props.ctx.menuActions._getOpenedMenu().instance')

[Sobranier]

I am using "react-native-popup-menu": "0.14.0" "react-native": "0.55.4", "react": "16.3.1",

I come across this problem on platform Android. It is not happening 100%.

[Sobranier]

I receive this problem on Sentry

[sodik82]

do you use controlled or (default) not controlled menu?

[UchihaVeha]

I think the problem in this line {...customStyles.triggerTouchable} https://github.com/instea/react-native-popup-menu/blob/master/src/MenuTrigger.js#L26

const { customStyles } = this.props;
<View ref={onRef} collapsable={false} style={customStyles.triggerOuterWrapper}>
        <Touchable
          onPress={triggerOnLongPress ? null : onPress}
          onLongPress={triggerOnLongPress ? onPress : null}
          {...defaultTouchableProps}
          {...customStyles.triggerTouchable} // <- triggerTouchable = undefined
        >
          <View {...other} style={[customStyles.triggerWrapper, style]}>
            {text ? <Text style={customStyles.triggerText}>{text}</Text> : children}
          </View>
        </Touchable>
      </View>

MenuTrigger.defaultProps = {
  disabled: false,
  customStyles: {}, // <- triggerTouchable = undefined
};

Spreading triggerTouchable that is undefined. I notice that when trying to add custom styles for triggerTouchable. In test i found example:

const customStyles = {
      triggerWrapper: { backgroundColor: 'red' },
      triggerText: { color: 'blue' },
      triggerTouchable: { underlayColor: 'green' },
    };

but it dosn't work, becouse that should be:

const customStyles = {
      triggerWrapper: { backgroundColor: 'red' },
      triggerText: { color: 'blue' },
      triggerTouchable: {style: { underlayColor: 'green' }},
    };

Quick fix:

<MenuTrigger customStyles={{triggerTouchable: {}}} />

[sodik82]

@UchihaVeha thanks for input - can you reproduce the problem? If you can provide e.g. sample expo snack, it would be great.

because it does not seems to be a problem of spread operator - https://stackoverflow.com/questions/47155141/spreading-undefined-in-array-vs-object , https://codesandbox.io/s/vywvq06ol0

but it is strange, as error says something about this.props.ctx.menuActions._getOpenedMenu().instance but "line" shows something totally different.

[clmanalo]

I encountered this error while double clicking an option really fast. I'm not exactly sure but it might be related to this line in MenuOption.js under the _getMenusOnSelect function. the function looks like this

  _getMenusOnSelect() {
    const menu = this.props.ctx.menuActions._getOpenedMenu();
    return menu.instance.props.onSelect;
  }

I checked (via console.log) what was being returned in the menu element. the object looked like this

Object {
    "_getOpenedMenu": [Function _getOpenedMenu],
    "_notify": [Function _notify],
    "closeMenu": [Function closeMenu],
    "isMenuOpen": [Function isMenuOpen],
    "openMenu": [Function openMenu],
    "toggleMenu": [Function toggleMenu],
}

there is no "instance" key here which could be the cause of the error

[clmanalo]

I encountered this error while double clicking an option really fast. I'm not exactly sure but it might be related to this line in MenuOption.js under the _getMenusOnSelect function. the function looks like this

  _getMenusOnSelect() {
    const menu = this.props.ctx.menuActions._getOpenedMenu();
    return menu.instance.props.onSelect;
  }

I checked (via console.log) what was being returned in the menu element. the object looked like this

Object {
    "_getOpenedMenu": [Function _getOpenedMenu],
    "_notify": [Function _notify],
    "closeMenu": [Function closeMenu],
    "isMenuOpen": [Function isMenuOpen],
    "openMenu": [Function openMenu],
    "toggleMenu": [Function toggleMenu],
}

there is no "instance" key here which could be the cause of the error

If i had to guess, the page could be re rendering between the double clicks but the menu has not been populated properly yet which causes the error.

[ranvirgorai]

This issue occurs when you don't pass onSelect props to <MenuOption>

so even if you don't need onSelect Event Just pass empty function <MenuOption onSelect={()=>{}}> </MenuOption>

Hope This helps :)

[clmanalo]

This issue occurs when you don't pass onSelect props to <MenuOption>

so even if you don't need onSelect Event Just pass empty function <MenuOption onSelect={()=>{}}> </MenuOption>

Hope This helps :)

Oh i see. I switched to a different utility for dropdowns since i couldn't solve this issue. Would be great if the MenuOption element had a default empty function for the onSelect prop