Bug with multiple ContextMenu

[valentinvichnal]

Hi, great library!
If I use it on a single component it works well, but when I try to give this context for many components based on an array, it won't work.

If I try
<ContextMenu id='menu-delete'
for every component it will show the context menu on click in the right place, but
the onClick inside the MenuItem never gets called.
After I tried to use unique id for all:
<ContextMenu id={'menu-delete' + id}>
But without any luck, the onClick never triggered, and in this one the context menu sometimes appeared in a different component.

I use the latest 2.3.0 version.

import React, { Component } from 'react';
import { ContextMenu, MenuItem, ContextMenuTrigger } from 'react-contextmenu';
import { Modal, Button } from 'antd';

import { Items } from '../item';

export class Menu extends Component {
  constructor(props) {
    super(props);

    this.state = {
      items: [],
      modalVisible: false
    };
    // ContextMenu and Modal
    this.showModal = this.showModal.bind(this);
    this.handleCancelInModal = this.handleCancelInModal.bind(this);
    this.handleOkInModal = this.handleOkInModal.bind(this);
  }
  render() {
    const {id, sortable, selections, userProfileId} = this.props;
    const {record} = this.state;
    console.log(record ? record.title : '');
    return (
      <Items key={id} id={id} items={items ? items : []} context={'menu-delete' + id}>
        <div>
          <ContextMenu id={'menu-delete' + id}>
            <MenuItem onClick={this.showModal}>
              Delete
            </MenuItem>
          </ContextMenu>

          <Modal title="Delete this Menu" visible={this.state.modalVisible}
            onOk={this.handleOkInModal} onCancel={this.handleCancelInModal} >
            Do you really want to delete this Menu?
          </Modal>
        </div>
      </Items>
    );
  }
  // ContextMenu and Modal
  showModal() { console.log('asd'); this.setState({ modalVisible: true }); }
  handleCancelInModal() { this.setState({ modalVisible: false }); }
  handleOkInModal() {
    this.setState({
      modalVisible: false
    });
  }
}

import React, { Component } from 'react';
import { ContextMenuTrigger } from 'react-contextmenu';
import { Item } from './item';

export class Items extends Component {
  constructor(props) {
    super(props);

    this.state = {
      items: []
    };
  renderItems() {
    const {items} = this.props;
    return items.map((item, index) => {
      return <Item key={index} />;
    });
  }
  render() {
    const {id, items, content, children, context} = this.props;
    return (
      <ul className={itemsClass} data-id={id} >
        {context ? <ContextMenuTrigger id={context}> 'Title' </ContextMenuTrigger> : 'Title'}
        {this.renderItems()}
        {children ? children : null}
      </ul>
    );
  }
}

[Mladen-K]

Same error here. I tried to add context menu to each component rendered in a list. List items are members of an array each reached by map method. When I add context menu to each component in a scrollable list, it is displayed properly, but the on click event never gets triggered. I managed to get to the click event by using li or p tags inside MenuItem tags and calling onMouseDown event. Only problem is that I can't pass props from underlying component which triggered the event to an event handler.
Any help?

[yeze322]

@valentinvichnal Seems your items are sharing one <ContextMenu> instance. I create an <ContextMenu> instance for each item and it works fine!

This is my code:

renderTitle = (category) => (
    <div className='context-menu'>
      <ContextMenuTrigger id={category.name}>
        <p>{category.name}</p>
      </ContextMenuTrigger>
      <ContextMenu id={category.name}>
        <MenuItem data={'some_data'}>
          ContextMenu Item 1
        </MenuItem>
        <MenuItem data={'some_data'}>
          ContextMenu Item 2
        </MenuItem>
      </ContextMenu>
    </div>
  )

render () {
  items.map(item => renderTitle(item))
}

Hope it will solve your peoblem :)

[vkbansal]

@yeze322 thanks for giving a work-around.

@MladenKobiljski I'll take a closer look at this issue later this week.

[vkbansal]

@MladenKobiljski is your code similar to this example?
https://github.com/vkbansal/react-contextmenu/blob/master/examples/MultipleTargets.js

[Mladen-K]

It is similar, and I managed to overcome an issue by adding dinamically unique id for each item in list.

[valentinvichnal]

@yeze322 Thank you, I missed that, it solved one of my problem!

[robinjohnhopkins]

@yeze322 thanks - obvious now I see the answer!