Right-click menu is broken when the page has been scrolled

[rachel-fenichel]

Problem statement

• Bug report
• Feature request

Right-clicking on Blockly when it's inside a page that has been scrolled should not be a problem.

Expected Behavior

Right-clicking when the page has been scrolled should leave the page scroll as-is and show the Blockly context menu where the mouse is.

Actual Behavior

Right-clicking scrolls the page back to the start and shows the context menu in the wrong location.

The gif below starts when only the number block is visible.
The page has been scrolled to the right but not down. I right-clicked above the number block (which is only there to provide a position reference).
The page jumped to the left, and the context menu showed up in the wrong place.

Steps to Reproduce

• Open fixed blockly: https://blockly-demo.appspot.com/static/demos/fixed/index.html
• Resize your browser window to be narrower than Blockly
• Scroll to the right
• Right-click

Stack Traces

N/A

Operating System and Browser

Tested on:

• Desktop:

  • Chrome
  • Firefox
  • Safari
  • Opera
  • IE 10+
  • IE 11
  • EDGE

• Smartphone/Tablet/Chromebook (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional Information

N/A

[rachel-fenichel]

The problem is that the context menu calls menu.setAllowAutoFocus(true) when the menu is created, before it has been shown on the screen. When it is shown it is placed at the top of the screen before being moved to the correct location. The focus goes with it, changing the window scroll.

FieldDropdown uses the same menu object (goog.ui.menu) but waits to call menu.setAutoFocus(true) until after the menu has been shown. Since the focus has not been automatically sent, it then calls menuDom.focus(). ContextMenu needs similar code.

[rachel-fenichel]

Fixed by #1332