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

next structure doesn't work in case of condition is false {condition && <Separator/> && <Item label="label" disabled/>}

When I right click to open the context menu there was an error in the console "Uncaught TypeError: Cannot read property 'offsetWidth' of null". Please find the attached image for more information.

But the context menu is working as expected.

Hi @fkhadra example https://codesandbox.io/s/3z3lq9zn1

thanks for nice lib

please when i click right click add row above, add row bellow and delete row when i select multi rows using check box i want to show delete all text need to show please suggest me

thanks

Do you want to request a feature or report a bug? Bug

What is the current behavior? Menu pops up for a seconds when closing. https://streamable.com/9ff7um

`const Test = () => { const { show } = useContextMenu({ id: "test" });

return (
    <>
        <div onContextMenu={(e) => {
            show(e, {
                id: "test"
            });
        }}>
            <Menu id={"test"}>
                <Item onClick={(e) => {console.log(2)}}>
                    We
                </Item>
            </Menu>
            WEWEWEWEW
        </div>
    </>
);

}`

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? React 18.2.0, Firefox, Chrome, Chromium on Windows 11

Also, I'm using Vite to the latest version.

Hello, I am used this component. I have a problem with nested item. I have no access to properties inside items of submenu. I am used contextMenu.show to pass props. How solve this problem???. Regards

Hi There, I'm not sure this is the correct place to ask for help, sorry in advance if it isn't. I am new to React, so sorry for the crudity... I am trying to integrate the contextify with react d3-tree component (which basically draws a tree). I would like to couple the menu item to the tree node, while I am standing over it. the problem is that I don't have explicit accsess to tree elements. what I do have is the onClick and onMouseOver callbacks which fires back the node in question. Is there a way to somehow update the menu uppon mouseover event, or am I doomed?

Thanks, Jonathan

Hi I found a few issues related to this error, but mine might be different. If not, my apologies.

My app is a chat app with a header of the selected conversation. When the selected conversation is switched, the header is updated with new props. One of them is the conversation id. This header has a Menu available (onClick, but same issue with the onContextMenu) and this menu id basically header-${conversation-id}.

Looking at the code, I think I have this issue because we only subscribe to menu events on the componentDidMount() method. https://github.com/fkhadra/react-contexify/blob/master/src/components/Menu.tsx#L91

Shouldn't we unsubscribe and resubscribe on componentDidUpdate() too? I double checked, and if I just use a static id for the header menu, everything works as expected.

I understand this might not have happen to you already, and I can just use the same id for my header in the end, but I guess it's an easy fix and it makes sense to me.

What do you think? I can get a PR if you approve.

Hello, I'm trying to make context menu work but I have some issue when I right click on my text that should display the context menu : js <display::menu> Event is not registered. Did you forgot to bind the event ?

const myMenu = () => (<ContextMenu id="menu">
                          <Item >Ipsum</Item>
                       </ContextMenu>);
        
        return {icons: [
                <div
                style={iconStyle}
              />,
            ],
            title : 
                     <div>
                          <ContextMenuProvider id="menu">
                          <span>{rowInfo.node.title}</span>
                          </ContextMenuProvider>
                          {myMenu}
                          </div>
                          ,
            onClick: event => this.nodeClicked(event, rowInfo),
            style : innerStyle
        };

I'm using it with react-sortable-tree to add a contextual menu on my items...

Thanks !

I'm changing a component that was being wrapped by MenuProvider to a function component, and am getting this warning.

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

It still seems to work, however.

I didn't see an existing issue for it.

I'd like to trigger an action before context menu is show to the user.

Is there a way to provide like a callback on the event ?

For instance : User click context menu provider with contextmenu event => I do some actions => menu is displayed to user.

Bumps qs from 6.5.2 to 6.5.3.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

I need to put a <input type="file"> as a menu item, but as the file chooser dialog steal the focus, the menu is removed from DOM and then the change event from input element is not fired.

Of course closeOnClick does not help as the problem is due to focus loss.

Do we have a way to avoid that menu is removed (e.g. just hiding it)?

Do you want to request a feature or report a bug? Bug

What is the current behavior? Unstyled submenu no longer has left/right positioning and appears over the top of the current context menu

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your CodeSandbox (https://codesandbox.io/s/new) example below: Tried this but ran into X is not a function using the example on react-contextify's website https://codesandbox.io/s/upbeat-hamilton-sn3g71

What is the expected behavior? Unstyled submenu appears to the right when there is room for it to display, or on the left if there is no screen space on the right.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? React 16.14.0, Chrome, working in version 5.0.0 of react-contextify, broken in 6.0.0

Currently all the event listeners that handle close are set to be handled at bubbling phase.

if (state.visible) {
      window.addEventListener('keydown', handleKeyboard);

      for (const ev of hideOnEvents) window.addEventListener(ev, hide);
    }

Will there be any unintended consequences if we take the approach mentioned below? Change all the events to be handled during capture phase, this offers us the following advantages:

• scroll: the behavior gets inline with the browser's default context menu
  • works with any scroll action (even when there is no scroll bar). This should fix #161.
  • works even when scroll happens anywhere on the screen. Consider a two column layout where the right one has the context menu and the left one has a scroll. The menu will close when the scroll happens in the left column(browser's default context menu works like this).
• other events: there might be few elements on the screen which might do stopPropagation and prevent the context menu from closing. capturing the event fixes this issue.

Also adding a mousedown event would be helpful in cases where we have elements that are draggable.

I would be happy to work on this if you are okay with this.

Do you want to request a feature or report a bug? Report Bug

What is the current behavior? After upgrading to V6 the context menu is not behaving as expected—it opens and then quickly closes without moving the cursor away. This works as expected on a normal div, but when I use a wrapper to pass in additional event data on click it fails to work as in V5. The gif below shows the updated vs. old behavior:

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your CodeSandbox (https://codesandbox.io/s/new) example below:

Minimal demo: https://stackblitz.com/edit/vitejs-vite-tnxa5e?file=src/ContextWrapper.tsx

What is the expected behavior? For the context to open and stay open until an event (e.g., mouse moving away, click on item)

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? This worked in react-contexify V5, with the same packages.

  "dependencies": {
    "@types/react-plotly.js": "^2.5.2",
    "plotly.js": "^2.16.3",
    "react": "^18.2.0",
    "react-contexify": "^6.0.0",
    "react-dom": "^18.2.0",
    "react-plotly.js": "^2.6.0"
  }

Bumps minimatch from 3.0.4 to 3.1.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.