ContextMenu & transform

[brezetsky]

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]

Hey @brezetsky ,

Indeed, I reproduced the issue there:

I'll fix it asap.

[fkhadra]

@brezetsky I don't know if I'll be able to fix it but I found a post which explains what's going on.
BTW, thanks I learned something 😀
Explaination here

[brezetsky]

@fkhadra yes, I read about this. But I think context menu should work from any place on the page. In this case, it should be moved to body and then it will work. Is it possible?

[fkhadra]

Hmm, it can do the job. Just thinking if there is a way to implement it without relying on findDOMNode. I'm not even sure that findDOMNode can do the trick. I need to find if there is a pattern for this kind of use.

[fkhadra]

Hey @brezetsky ,
I managed to fix it. I'll publish a new version tomorrow. I have to write more tests.

[brezetsky]

Hey @fkhadra ,

Cool. Thanks.

[brezetsky]

Hi @fkhadra,

Will you publish it today?

[fkhadra]

Hey @brezetsky,

I will in a few minutes. I'll let you know

[fkhadra]

@brezetsky published !

[brezetsky]

Great! Thanks!

[brezetsky]

Hi @fkhadra,

it doesn't work now - https://codesandbox.io/s/j2nq05qox9

[fkhadra]

weird @brezetsky, it's working for me. Cache issue ?

[brezetsky]

Yes, it was cache but still got problem in my app.

[fkhadra]

For your app, maybe delete node_modules and reinstall the package

[vladminsky]

I have the "Did you forgot to bind the event?" error with 2.1.0 update too.
Can you advice how to handle migration from 2.0.7 to 2.1.0?

Thank you for the lib!

[fkhadra]

hmm @brezetsky, @vladminsky I think I know why it's happening.

This error means that the event is not bound. Can you show me where in your application you are rendering the ContextMenu component? Did you render it in the root component ?

Anyway, I need to add a rule to check if in that case the event is bound. I'll fix it today.

[vladminsky]

@fkhadra

Thank you for the quick reply.

Did you render it in the root component?

No. I render ContextMenuProvider and ContextMenu within a subcomponent since it is the only place I need a context menu.

[brezetsky]

Hey @fkhadra,

I tried to delete node_modules few times. Sometimes, context menu worked form for few elements, but not for all. That's why I continue to use the previous version. Waiting for new version :)

[brezetsky]

@fkhadra , any updates today?

[fkhadra]

Hello @brezetsky @vladminsky,

I published a new version could you try it and tell me if it fix your issue please ? Don't forget to clear your cache 😁 .
Thanks

[brezetsky]

Hello @fkhadra
Still no. For some elements works and for some - no

[fkhadra]

I don't have a snippet so it's hard to reproduce.Can you provide a snippet, it will be easier for me to see what's going on.

[Neophius]

I'm having the same issue. Assume that ContextMenuComponent is returning
<ContextMenu id="ContextMenuID" />

() => {
return (
<ContextMenuComponent />
.
.
.
<div className="row">
   <ContextMenuProvider id="ContextMenuID"><Button /></ContextMenuProvider>
</div>
)
}

This produces the same event not bound error referenced above.

[fkhadra]

I'll work on it tonight. I think i will use react portal instead of the solution I put in place.

PS: I hate computer

[brezetsky]

Will try to make snippet today.
But if you have already a new version - I am ready to test it

[fkhadra]

im trying to reproduce the bug first

[brezetsky]

hey @fkhadra ,
one of snippets https://codesandbox.io/s/zl9n9496wp

[fkhadra]

Hey @brezetsky,

Thanks for the snippet i'm working on it

[fkhadra]

@brezetsky I'm able to reproduce the bug thanks to your snippet. Usually, when I work on a package I use npm link.

With npm link I don't have the bug. I'm trying to understand but this is the first time I encounter such a behavior.

I even tried to pack the lib with npm pack and install it from the packaged archive but still buggy.

Edit: diff output nothing also

[brezetsky]

@fkhadra ,
unfortunately, I didn't work with events. maybe you don't register events for nested elements?
and another question - do you a new context menu for nested elements? Maybe, warning messages are switched off?

[fkhadra]

@brezetsky I finally found the bug 🎉 !
I must call setState by passing a callback cause I need the previous state. Release the fix in few minutes

[brezetsky]

@fkhadra really wait it!

[brezetsky]

You can add tests later :)

[brezetsky]

@fkhadra could I expect the release today? I am sorry that I disturb you, but I want to implement new version of context menu in my project :)

[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

[brezetsky]

@fkhadra but this Nested context menu worked before for me
I have nested components in my app and for each I have context menu

[brezetsky]

Please, find snippet - https://codesandbox.io/s/zl9n9496wp
I would like to have the different menu for both elements: black and green.

[fkhadra]

@brezetsky are you sure it was working that way before ?
I made a snippet with an old version and only the parent menu is showing up.

Anyway I understand your use case.

[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
        )}