Issues with right-click on block

[pikurasa]

Right now, on https://musicblocks.sugarlabs.org/, if you right-click on a block you get two menus. You should only get one.

[walterbender]

I briefly see the larger menu but it goes away when the smaller menu appears. What browser are you using?

[apsinghdev]

Probably, The reason for this problem is conflicting event listeners. I guess there is a code that checks whether the right-click event triggered on block area or non-block area and that check is failing in this case.

[pikurasa]

I briefly see the larger menu but it goes away when the smaller menu appears. What browser are you using?

Version 120.0.6099.224 (Official Build) built on Debian 11.8, running on Debian 11.7 (64-bit)

[akshayw1]

@pikurasa , Is it resolved, Should I take to this work on?

[haroon10725]

@akshayw1 Yes I am working on it.

[apsinghdev]

@pikurasa , Is it resolved, Should I take to this work on?

You don't need to ask for permission. If the issue is not resolved you can raise a PR.

[haroon10725]

@apsinghdev I am working on it.

[apsinghdev]

@apsinghdev I am working on it.

Great, it's good to hear that you are working on it. I am just letting him know the flow we use.

[nilaygit-10721]

anyone working on this?

[pikurasa]

anyone working on this?

Please test it first. IRRC it may have been fixed...

[MostlyKIGuess]

I briefly see the larger menu but it goes away when the smaller menu appears. What browser are you using?

haha this doesn't happeen locally for me actually, I am trying to fix this by adding a separate case of just not rendering the bigger menu, feel like that would be better.

Edit 1 : I have added some code, if someone is able to reproduce the issue, would they like to check the code and see if it works or not?

[suryaanshah]

Hello, I have been trying to reproduce this and confirm its presence. However not as the main issue but rather for me as mentioned by @/walterbender the larger menu is disappearing after a while.

I also confirms that it "appears" like this issue isn't present running the local index.html file. But I suspect it may be because the website is taking some time to load the menus whereas the local file is doing that quickly hence missing the common human eye. I can be wrong here though.

For this, I may try to also test it on a local server and see if it makes any difference there.

sugarlabs-musicblocks-double-menu3905.mp4

NOTE: I also tried to test in the video if this issue is only with the blocks and not with other "clickable" objects. like the turtle or other menus and components etc but found that it is only present while right clicking the blocks

NOTE 2: I observed that unlike the screenshot, for me both the menus are concentric circles and not overlapping as shown.

Probably, The reason for this problem is conflicting event listeners. I guess there is a code that checks whether the right-click event triggered on block area or non-block area and that check is failing in this case.

I will now check using the debugger about what lines of code are responsible. It is helpful to know from the maintainers about the context as @/apsinghdev has mentioned.

[suryaanshah]

Edit: This isn't the root cause, I later corrected this and found the key piece of code responsible for this bug.

An update:

Root Cause: checking nativeButton == 2 for rightClick event is conflicting with the normal left click.
The code-segment I am referring to is in block.js:

// We might be able to check which button was clicked.
            if ("nativeEvent" in event) {
                if ("button" in event.nativeEvent && event.nativeEvent.button == 2) {
                    that.blocks.stageClick = true;
                    docById("wheelDiv").style.display = "none";
                    that.blocks.activeBlock = thisBlock;
                    piemenuBlockContext(that);
                    return;

Potential Solutions:

• We could change it to a separate eventHandler for RightClick in the same Class (this)
• We could also just add event.preventDefault(); // Prevent the default context menu from showing

@apsinghdev
Could you please give me some insights and help in fixing this since I am a little new to this code-base and may need a bit of time understanding what each function does.
Particularly, which part differentiates (in this file or other) between a block-click vs a non-block-click.

Any help is appreciated here. Thanks!

[walterbender]

You can either right click on a block or on the canvas. There are two different menus. But both menus appear when you right click on the canvas.

[Shyam-Raghuwanshi]

hi @walterbender @pikurasa I tryed in Edge and Brave but not able to produce the issue

[walterbender]

On FF on Fedora when you right click on a block, the canvas menu appears, then the block menu, then the canvas menu disappears.

[suryaanshah]

Important Update

I was wrong in my last comment. I believe the main problem happens somewhere here.
block.js:

       /**
         * Handles the right-click (contextmenu) event on the block container.
         * @param {Event} event - The contextmenu event.
         */
        this.container.on("contextmenu", (event) => {
            event.preventDefault(); // Prevent the default browser context menu
            event.stopPropagation(); // Stop the event from bubbling up

            // Hide any existing custom context menus
            const helpfulWheel = docById("helpfulWheelDiv");
            if (helpfulWheel && helpfulWheel.style.display !== "none") {
                helpfulWheel.style.display = "none";
            }

            const wheelDiv = docById("wheelDiv");
            if (wheelDiv) {
                wheelDiv.style.display = "none";
            }

[Shyam-Raghuwanshi]

hi @suryaanshah what should the expected behaviour?

[suryaanshah]

Another issue that I noticed right now is the WheelDivptm appearing once you remove the rightClick from the block

To be clear, here are the issues that need to be fixed:

• Only contextWheelDiv should be visible when rightClick is done on block and the helpfulWheelDiv should disappear if it was visilbe
• The WheelDivptm should not appear once we remove the right-click.

[haroon10725]

I think before we do any changes, it's important to know what types of clicks a user can do and where are they in the code. It will help us to create a plan from where we can move forward.

[suryaanshah]

@walterbender could it perhaps just be an issue of the code in master not being yet deployed? As @MostlyKIGuess said:

this doesn't happeen locally for me actually,

It doesn't happen locally with me either - just on the website (https://musicblocks.sugarlabs.org/). However, I can't get the helpfulWheelDiv to open when clicking anywhere on the white canvas either on index.html.

What is the deployment frequency?

[MostlyKIGuess]

@walterbender could it perhaps just be an issue of the code in master not being yet deployed? As @MostlyKIGuess said:

this doesn't happeen locally for me actually,

It doesn't happen locally with me either - just on the website (https://musicblocks.sugarlabs.org/). However, I can't get the helpfulWheelDiv to open when clicking anywhere on the white canvas either on index.html.

What is the deployment frequency?

It does happen locally as well, I just didn't turn on advanced mode.

[MostlyKIGuess]

@walterbender could it perhaps just be an issue of the code in master not being yet deployed? As @MostlyKIGuess said:

this doesn't happeen locally for me actually,

It doesn't happen locally with me either - just on the website (https://musicblocks.sugarlabs.org/). However, I can't get the helpfulWheelDiv to open when clicking anywhere on the white canvas either on index.html.

What is the deployment frequency?

The code you reported is indeed where the issue is happening, but it's not as simple, I think it is just taking that much amount for the context window to understand that it's not there. The split second difference will always be there until we switch on to some advance method of recognizing as there are many functions we are calling during a click. It's just not a bug at that point, point being it's not something you solve by changing the code of where it's happening rather than everything that happens before it if that makes sense.