Input fields and context menus may scroll workspace out of view #9246
Description
Check for duplicates
- I have searched for similar issues before opening a new one.
Description
We are using Blockly for multiple small inline exercises on a large page. When I click into an input field inside a block, my browser scrolls away, to the top or to the bottom of the page, depending on the exact setup. Something similar happens with the right-click context menu: The browser scrolls before the menu is even shown, causing it to appear in the wrong place.
Reproduction steps
Minimal example that shows the problem:
<!DOCTYPE html>
<title>Test</title>
<script src="https://unpkg.com/blockly@12.1.0/blockly_compressed.js"></script>
<script src="https://unpkg.com/blockly@12.1.0/blocks_compressed.js"></script>
<script src="https://unpkg.com/blockly@12.1.0/msg/en.js"></script>
<div id="blocklyDiv" style="width: 100%; height: 500px"></div>
<div style="height: 2000px"></div>
<script>
Blockly.inject('blocklyDiv', {
toolbox: {
contents: [
{
kind: 'block',
type: 'math_number'
}
]
}
});
</script>Click into the input field for the number block or right-click the block.
The bug seems to have appeared in 12.1.0; if I use 12.0.0, the problem is gone.
Stack trace
Screenshots
Screenshot after right click:
Browsers
Chrome desktop, Firefox desktop