Comments (39)
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
from react-contexify.
Hey @brezetsky ,
Indeed, I reproduced the issue there:
I'll fix it asap.
from react-contexify.
@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
from react-contexify.
@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?
from react-contexify.
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.
from react-contexify.
Hey @brezetsky ,
I managed to fix it. I'll publish a new version tomorrow. I have to write more tests.
from react-contexify.
Hey @fkhadra ,
Cool. Thanks.
from react-contexify.
Hi @fkhadra,
Will you publish it today?
from react-contexify.
Hey @brezetsky,
I will in a few minutes. I'll let you know
from react-contexify.
@brezetsky published !
from react-contexify.
Great! Thanks!
from react-contexify.
Hi @fkhadra,
it doesn't work now - https://codesandbox.io/s/j2nq05qox9
from react-contexify.
weird @brezetsky, it's working for me. Cache issue ?
from react-contexify.
Yes, it was cache but still got problem in my app.
from react-contexify.
For your app, maybe delete node_modules and reinstall the package
from react-contexify.
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!
from react-contexify.
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.
from react-contexify.
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.
from react-contexify.
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 :)
from react-contexify.
@fkhadra , any updates today?
from react-contexify.
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
from react-contexify.
Hello @fkhadra
Still no. For some elements works and for some - no
from react-contexify.
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.
from react-contexify.
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.
from react-contexify.
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
from react-contexify.
Will try to make snippet today.
But if you have already a new version - I am ready to test it
from react-contexify.
im trying to reproduce the bug first
from react-contexify.
hey @fkhadra ,
one of snippets https://codesandbox.io/s/zl9n9496wp
from react-contexify.
Hey @brezetsky,
Thanks for the snippet i'm working on it
from react-contexify.
@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
from react-contexify.
@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?
from react-contexify.
@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
from react-contexify.
@fkhadra really wait it!
from react-contexify.
You can add tests later :)
from react-contexify.
@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 :)
from react-contexify.
@fkhadra but this Nested context menu worked before for me
I have nested components in my app and for each I have context menu
from react-contexify.
Please, find snippet - https://codesandbox.io/s/zl9n9496wp
I would like to have the different menu for both elements: black and green.
from react-contexify.
@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.
from react-contexify.
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
)}
from react-contexify.
Related Issues (20)
- A small note on close event listeners
- Submenu positioning missing in 6.0.0
- Menu is removed before item actions are completed. HOT 1
- for dragable modal position of menu is wrong HOT 2
- In your documentation on your main page, your import statement has a typo - 'react-contexify' HOT 2
- "Uncaught TypeError: X is not a function" in Menu.tsx HOT 3
- menu show offscreen when only the position is toggled HOT 1
- Submenu not opening in mobile
- bro can you make better docs with pic and images
- Can we get the Quick Start sample written in Typescript?
- Cannot read properties of undefined (reading 'preventDefault') HOT 1
- how to prevent closest scrollElement scrollable when show ?
- TypeError: event.stopPropagation is not a function in 6.0.0 HOT 3
- Using arrow keys bindings in keyMatcher
- `onShown` and `onHidden` continue appearing in the doc after been removed HOT 2
- Build error: Can't import the named export 'Children' from non EcmaScript module (only default export is available) HOT 3
- Uncaught TypeError: t is undefined HOT 1
- Is there a way to disable the custom context menu for a tag HOT 1
- how to change the style of this menu?!
- RTL support
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-contexify.