Search code examples
javascriptbootstrap-4blockly

Cannot type in Blockly workspace in Bootstrap modal

I'm having a problem with a Blockly workspace inside a Bootstrap modal.

Everything seems to work fine, but I cannot type in the inputs that I drag into the workspace.

Here's what the dialog looks like:

enter image description here

I cannot type in the highlighted block, to the right of the equal sign.

I had a problem previously where the workspace would not show if rendered inside a collapsed div. I fixed this by adding an event which fires when Step Formulas is clicked and execute the following code:

window.dispatchEvent(new Event('resize'));

I validated that if I place the div in which the workspace is injected into the main layout's HTML, it works fine. I can type.

Any ideas?

Solution

  • Had to manipulate the DOM and restructure it.

    Those two divs are generated in the root of the DOM (body level). Moving them as child of the modal solved the focus issue.

    $('.blocklyWidgetDiv').prependTo('.modal');
$('.blocklyTooltipDiv').prependTo('.modal');