ContextMenu & transform

Hi fkhadra,

I got next problem: I have the parent element with style transform. When I add context menu on child element, then its behaviour incorrectly.

Please, find example below.

import React from 'react';
import { ContextMenu, Item, ContextMenuProvider } from 'react-contexify';
import './App.css';

import 'react-contexify/dist/ReactContexify.min.css' 


export default class App extends React.Component<any, any> {
  childrenShow: boolean;
  constructor(props) {
    super(props);
    this.childrenShow = true;

    this.handleMenuSelect = this.handleMenuSelect.bind(this);
    this.handleMenuUnSelect = this.handleMenuUnSelect.bind(this);
    this.handleMenuDelete = this.handleMenuDelete.bind(this);
  }

  render() {
    if ( this.childrenShow ) {
      return (
      <div className="App" style={{marginTop: '200px', transform: 'translate(0)'}}>
        <ContextMenuClass handleMenuSelect={this.handleMenuSelect} handleMenuUnSelect={this.handleMenuUnSelect} handleMenuDelete={this.handleMenuDelete} />
      </div>
      );
  }

    return (
      <div className="App">
      Hiden
    </div>
    );  
  }


  handleMenuUnSelect() {
    this.childrenShow = false;
    console.log('unSelect triggered');
  }

  handleMenuSelect() {
    this.childrenShow = false;
    console.log('select triggered');
  }

  handleMenuDelete() {
    this.childrenShow = false;
    console.log('delete triggered');
    this.forceUpdate();
  }
}

export class ContextMenuClass extends React.Component<any, any> {
  render() {
    return (
      <div>
        <ContextMenuProvider id={'context_menu'}>
        ContextMenu
      </ContextMenuProvider>
      <ContextMenu theme="dark" id={'context_menu'}>
        <Item onClick={this.props.handleMenuUnSelect} disabled>Unselect</Item>
        <Item onClick={this.props.handleMenuSelect} disabled={true}>select</Item>
        <Item onClick={this.props.handleMenuDelete}>Delete</Item>
      </ContextMenu>  
    </div>
  )
  }
}

[fkhadra]

I pushed the new version. You won’t get the “Did you forgot to bind an event” message.

@brezetsky regarding your snippet won’t work, only the parent menu will be displayed. To fix it move the <ContextNestedMenuClass /> as follow:

class ContextMenuClass extends React.Component {
  render() {
    const fn = () => { };
    return (
      <div>
        <ContextMenuProvider id={'context_menu'}>
          ContextMenu
      <ContextNestedMenuClass /> -> Remove this
      </ContextMenuProvider>
        <ContextMenu theme="dark" id={'context_menu'}>
          <Item onClick={fn} disabled>Unselect</Item>
          <Item onClick={fn} disabled={true}>select</Item>
          <Item onClick={fn}>Delete</Item>
        </ContextMenu>
{**Put the  <ContextNestedMenuClass /> here instead**}
      </div>
    )
  }
}

Sorry for the late release btw

[ekilah]

I ran into the same issue here, can’t tell if it was resolved and regressed from the old discussion above or not, but I was able to fix it by throwing the <Menu> render inside a React Portal:

        {ReactDOM.createPortal(
          this.renderContextMenu(), // this renders the `<Menu>`
          document.body
        )}