🐛 [BUG]: Sometimes nodeClick does not emit
Closed this issue · 34 comments
Is there an existing issue for this?
- I have searched the existing issues and this is a new bug.
Current Behavior
Sometimes the nodeClick event is not emitted when a node is clicked.
If the node is clicked again, the nodeClick event is emitted this time. After that, the nodeClick event is always emitted at the same mouse coordinates.
However, if the mouse coordinates are changed and then clicked, the event may not be emitted.
The rate of reproduction is not so low, if not frequent.
Expected Behavior
Every click should always emit a nodeClick.
Steps To Reproduce
Code
I have created a minimal code. Everything is in App.vue.
https://stackblitz.com/edit/vitejs-vite-jw9kpv?file=src%2FApp.vue&terminal=dev
I just created one node and placed it.
I have bound @node-click="onNodeClick".
Each time a node is clicked, it toggles the border display so that it is easy to see that onNodeClick() has been called.
The node information is also displayed in Developer Tools.
Video
We have created a video.
The very first click occurs suddenly. The color of the border does not change after clicking.
The node information is not displayed even when the Developer Tools is open. In other words, the onNodeClick() call itself is not made.
After that, the border color changes, but it reproduces eventually.
nodeClick.mp4
Relevant log output
No response
Anything else?
@vue-flow/corev1.38.2vuev3.4.31- macOS, Chrome, Firefox, Safari
Sometimes the nodeClick event is not emitted when a node is clicked.
Not sure what this exactly means. What is "sometimes" in this context? How is this exactly reproducible? I need exact reproduction steps otherwise I can't debug the issue if there is any at all.
The very first click occurs suddenly.
What does this mean?
The color of the border does not change after clicking.
Works perfectly fine for me in the Sandbox you linked.
The node information is not displayed even when the Developer Tools is open. In other words, the onNodeClick() call itself is not made.
I cannot confirm this either, the sandbox shows me that it does get called on every click.
What is a problem though is that you try to import VueFlow styles in a scoped tag.
That is not going to work.
You cannot use a scoped style and expect it to cascade down to the VueFlow elements, you are actively breaking the styles by doing that.
So either import the VueFlow styles in a global stylesheet or remove scoped from the <style> tag.
Here's the Sandbox in a fixed version.
Other than that I don't see any reproducible issue.
I found that paneClick does not emit in the same way.
I am currently trying Toolbar.
After clicking on a node to display the Toolbar, clicking on a pane usually causes the Toolbar to disappear.
However, there is also a 20-30% chance that, randomly, the toolbar will not disappear.
When the toolbar does not disappear, the console.log is not displayed either. Same as nodeClick.
function onPaneClick(e: MouseEvent) {
console.log('onPaneClick', e);
}
<VueFlow @pane-click="onPaneClick” />
The Toolbar itself has nothing to do with the problem, I noticed the problem because when I click on the pane the Toolbar doesn't disappear.
Do not close it without permission.
First off that is not appropriate in any shape or form, therefore your response has been deleted.
You are more than free to re-post but please try to keep it respectful, thank you :)
If I am given a proper reproduction I am more than happy to re-open an issue but atm I don't believe there is an issue so I closed this ticket.
Here's the Sandbox in a fixed version.
This still reproduces it.
I made a video about this.
In the video there are 17 clicks.
The issue reproduces on the 1st, 5th, 8th and 17th clicks.
nodeClick.mp4
However, there is also a 20-30% chance that, randomly, the toolbar will not disappear.
As I said before, this is not a clear statement and I can't reproduce bugs on the basis of "sometimes it doesn't work".
Please find a way to exactly reproduce the issue.
For the sake of it here is a recording of my fixed sandbox where I cannot see any problem whatsoever with the onNodeClick event.
Screen.Recording.2024-07-08.at.21.01.47.mov
Same goes for the onPaneClick event
Screen.Recording.2024-07-08.at.21.05.22.mov
Please resolve the style issue I mentioned first and then re-check if your issue persists and provide exact reproduction steps that aren't based on "20-30% of the times it works or it doesn't" since that's too vague 😅
You are repeatedly clicking at the same mouse coordinates.
If the nodeClick is emit without problems, no matter how many times you repeat it at the same mouse coordinates.
So in my videos I always move the mouse.
Sometimes a problem occurs, but if I click again without moving the mouse coordinates, the nodeClick is emitted with no problem.
But if I move the mouse coordinates and click again, sometimes the problem occurs.
As I said before, this is not a clear statement and I can't reproduce bugs on the basis of "sometimes it doesn't work".
Have you had a chance to look at my code?
@node-click=“onNodeClick”
function onNodeClick(nodeMouseEvent: NodeMouseEvent) {
const { node } = nodeMouseEvent;
console.log(node);
....
}
Sometimes console.log(node) is not executed. That is, onNodeClick() may not be called.
You say it is a procedure, but then how do I find the procedure in this situation?
I am trying to call the handler with @node-click="onNodeClick" this. That is all I am doing. And yet the problem occurs.
I am not doing any special implementation.
I can only assume that vue-flow itself is the cause. That's why I'm posting the issue.
There is no way to give an exact procedure or an exact description, since it is a random reproduction.
Since it is random, we don't know the exact procedure. That is why we have both the code and the video.
First of all, have you seen the video, and aside from the cause, do you understand what the problem is?
Maybe my English is messed up and it's coming across as misunderstood. Or maybe it is coming across as cocky and nuanced. Maybe that is why you are frustrated.
If so, I apologize.
I am using Google Translate and DeepL to translate the text many times before I post it. So if this English is not good, it is not possible for me to improve it any further now. My apologies.
So in my videos I always move the mouse.
Is it possible you simply cause a node drag because you move your mouse and therefore cancel the click?
Whenever you move the node a tiny bit, it's registered as a drag, although VueFlow has a nodeDragThreshold of 1 by default, meaning any movement that does not at least shift by 1 pixel will be ignored.
Sometimes a problem occurs, but if I click again without moving the mouse coordinates, the nodeClick is emitted with no problem.
That sounds a lot like you are accidentally triggering a drag instead of a click.
Although if the movement is ignored, the click event should still be emitted, that might be a bug actually - let me investigate this 😄.
First of all, have you seen the video, and aside from the cause, do you understand what the problem is?
Yes, I have seen all your videos and also checked your sandbox thoroughly and, in my own tests, also moved the mouse but since I am aware of the fact that node-drags can cancel a click, I kept my pointer steady during clicks as to not cause a drag (see my message above regarding the whole threshold thing).
If so, I apologize.
Alright, it came off as very unfriendly and I am not doing this to be disrespected by people I don't know. I am very happy to help and resolve issues but I also expect people to be nice to me during that.
But I should've noticed that a language barrier might be the cause of that tone and not actually the intent to insult, so that is my bad as well of course.
Anyway, I will re-open this issue since I think the node drag does interfere here when it shouldn't and that's what causes the supposed "random" interruption in the click event, at least that's my best guess.
Have I said words to you that could be perceived as disrespectful! I am truly sorry about that.
I am Japanese and do not understand complex English at all.
I was using both Google Translate and DeepL to translate Japanese and English to each other to check what I was saying.
I had communicated with English speakers in the same way before, so I did not think it was a problem, but perhaps there were times when I was rude...
I am very sorry to have offended you.
I rather thought I was speaking respectfully to you.
Thank you for providing a useful library.
let me investigate this
Yes. Thank you!
I will proceed with other work for a while 👨🏻💻.
From what I can tell the problem is pretty much what I described: The mouse movement you do triggers an unwanted onNodeDrag event which cancels out onNodeClick (this is intentional and not a bug) but when the node is not moved enough to actually move the node visibly, meaning that the distance the node was dragged is smaller than the nodeDragThreshold property (by default 1) the onNodeClick event is still cancelled, which makes it appear like the node click is just not registered.
This will be fixed in the next patch version.
Thank you for reporting this issue and your patience :)
Fixed with 1.38.3
Thanks for your prompt response.
However, I am experiencing some unexpected behavior.
I updated to v1.38.3.
Then it seemed that nodeClick was being emit twice for each click.
The click handler is being called twice each.
v1.38.3.mp4
I updated the reproduction code.
I also made it listen for nodeDrag since it seems to have something to do with drag.
https://stackblitz.com/edit/vitejs-vite-cvi8p2?file=package.json,src%2FApp.vue&terminal=dev
The border style is switched by a toggle action, so it is not changed as a result of being called twice.
However, in very rare cases, it seems to be called only once. At that time it is toggled and the appearance changes.
As for the original issue of "rarely nodeClick is not emit",
It seems to have stopped reproducing. Thank you.
Please point out if I have misunderstood.
Sorry for making so many posts.
Mh... I'll check it out 🤔
Should be fixed with 1.38.4
Thanks for checking.
In v1.38.3, the handler was always called twice.
In v1.38.4, the handler is rarely called twice. It happens rarely.
The recall ratio seems to be about the same as the first problem.
I made the video again.
nodeClick.mp4
At first, I thought the handler wasn't being called because the border style was not applied occasionally when I clicked, but I was wrong.
It was being called twice, so the toggle action was restoring the style.
If you look at the Developer Tools, you can see that it is rarely displayed 2 lines.
I also adjusted the sample code.
It outputs both @node-drag-start and @node-drag so you can check if dragging is occurring.
https://stackblitz.com/edit/vitejs-vite-gwpfyy?file=package.json,src%2FApp.vue&terminal=dev
Are you sure you're on 1.38.4?
I can't reproduce this
Weird, it only seems to happen when you press onto the label of a node or rather the content area, as long as it's outside of that it seems fine 😩
Let me fix this one more time 😂
Thank you for putting up with me so many times!
I'll answer your question anyway..
I'm specifying 1.38.4.
I also tried it in Firefox, same result.
v1.38.4.mp4
I'll release a patch tomorrow, this time around I wanna test this a bit more thoroughly before release 😅
Thank you for hanging out with me so many times!
I really appreciate it.
Make your breaks a priority!
Try 1.38.5 please :)
I updated to v1.38.5 and checked.
https://stackblitz.com/edit/vitejs-vite-gwpfyy?file=package.json,src%2FApp.vue&terminal=dev
I clicked 60 times.
It reproduced 11 times.
1st
10th
24th
35th
37th
40th
47th
50th
58th
59th
60th
v1.38.5.mp4
The following is my conjecture.
The reproduction rate is higher in the latter half. My mouse operation is a little faster in the latter half. Therefore, I think there is a higher possibility that I tried to perform a drag operation against my intention. In other words, I think that the latter half is more likely to be a case of interference between click and drag.
The problem does not reproduce if I continue to click without moving the mouse at all, so as you say, it seems likely that drag events are related.
However, I myself have no intention of dragging. I operate it carefully so that it does not become a drag. In fact, nodeDragStart nodeDrag has never been output.
The modifications you're currently making are probably suppressing "small movements" that aren't recognized as dragging.
If that's the case, if the above assumption is correct, it seems to me that the threshold for "small" may be too low.
In realistic use cases, users can be a little rough with their mouse operations.
A click might move a node 1px.
But in reality, I think it's rare for a 1px movement to indicate an intended drag.
Rather than judging whether there was any numerical movement, I thought it would be more realistic to assume that movement can occur and ask, "how many pixels of movement is enough to start considering this as an intentional drag?"
I'm sorry if I'm off the mark.
I feel like I'm currently seeing the best results so far, so I'll be updating my application to v1.38.5!
how many pixels of movement is enough to start considering this as an intentional drag?
That is what nodeDragThreshold is for.
In fact, nodeDragStart nodeDrag has never been output.
Doesn't matter, if you didn't exceed the node drag threshold, no drag event will be emitted.
If this is still a problem for you because you move the mouse a lot while clicking, increase the node drag threshold.
This is the extent of a fix I can provide atm tbh, it works fine in test cases and in manual cases if you don't wildly drag while clicking (which is basically what's happening if I see the videos correctly), so this isn't necessarily an issue on the library side anymore imo ^^
In realistic use cases, users can be a little rough with their mouse operations.
A click might move a node 1px.
But in reality, I think it's rare for a 1px movement to indicate an intended drag.
All of this ignores the nodeDragThreshold prop which already exists and is exactly meant for that. Use it 😄
If you want the users to at least have to drag 2px for a node to move, then set it to 2.
By default it's 1 which is, imo, a sensible default.
Would you mind checking here and see if this works better for you? https://vue-flow-docs-git-fix-node-dr-f3c55d-burak-cakmakoglus-projects.vercel.app/
Very tricky to differentitate between a drag-click and a regular click tbh but this should be a good enough solution (I hope 😩)
Thank you.
The problem still occurs even if I increase nodeDragThreshold little by little, so I tried setting it to 1000, but the problem still occurs... 😳
Even if I'm really bad at using the mouse, I don't think it's possible for me to be off by 1000px when trying to click 🫠
<VueFlow
v-model="elements"
:node-drag-threshold="1000"
@node-click="onNodeClick"
@node-drag-start="onNodeDragStart"
@node-drag="onNodeDrag"
/>
<!-- Same result with :nodeDragThreshold="1000" -->I have certainly confirmed that if you set nodeDragThreshold, a drag event will not occur until it is exceeded.
I set it to 1000, so even if I deliberately move the mouse when clicking, and click as if I am dragging, a click event basically occurs as expected.
However, it seems that there are rare cases where no drag occurs, but no click occurs either.
I'm not aware of it, but I've considered the possibility that I'm really bad at using the mouse and can't click, or even that the mouse is broken. However, in the video, an animation appears every time I click, so I'm sure clicked.
If there is no possibility that this problem is unrelated to drag events, I don't think there is anything else you can check, so I will proceed by setting nodeDragThreshold to a larger value.
I feel that setting nodeDragThreshold may reduce the reproduction rate a little.
Thank you for adjusting it so many times!🙇🏻
I hope that the adjustments that have occurred as a result of my posts are not completely meaningless.
Have you tried the link I sent? https://vue-flow-docs-git-fix-node-dr-f3c55d-burak-cakmakoglus-projects.vercel.app/
Please try on here and report back ^^
It's the documentation site, right?
I checked the nodeDragThreshold page, etc.
When you say "try", do you mean something like a playground where I can try things out? Is there anything I can operation?
I'm sorry if I misunderstood your intention.
I meant that you just pick an example on the docs page and play around with it and see if the results seem different or not 😄
Apparently when I test it, I do it differently then you do
@sdr0x07b6 1.39.0 is out now which should address this issue more adequately.
Hello! I've been away from home for a while.
I've updated to v1.39.0.
It seems to have been improved so far.
I'll share the stackblitz, but you don't have to see it.
https://stackblitz.com/edit/vitejs-vite-gndqyh?file=package.json,src%2FApp.vue&terminal=dev
As for "try" the new documentation, I honestly didn't know what was expected.
I'll wait and see with v1.39.0. Thank you!