无法在 Bootstrap 模态中输入 Blockly 工作区

Question

Bootstrap 模态中的 Blockly 工作区出现问题。

似乎一切正常，但我无法输入拖入工作区的输入内容。

对话框如下所示：

我无法在等号右侧突出显示的块中键入内容。

我之前遇到过一个问题，如果在折叠的 div 中渲染，工作区将不会显示。我通过添加一个事件来解决这个问题，该事件在单击 Step Formulas 并执行以下代码时触发：

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

我验证了如果我将工作区注入的 div 放置到主布局的 HTML 中，它工作正常。我会打字

有什么想法吗？

Answer 1

前段时间我也偶然发现了这个问题，经过大量搜索找到了解决该问题的原因和解决方法。

出现此问题的原因是，如果将焦点提供给不在其中的元素，则 bootstrap 设置的事件侦听器之一会立即将焦点设置到 bootstrap 模态。不幸的是，blockly 不会在父模态 div 中创建该输入字段（尝试在浏览器中检查白色文本字段，您会看到它）。

对此有多种解决方法，但 IMO 最简单且对我来说效果很好的一种方法是在 HTML.

中使用 tabindex 属性

只需将 tabindex="-1" 添加到具有 bootstrap 的 modal class 的 html 元素。给 tabindex 一个负值会从 Tab 键顺序中删除该元素，这间接解决了我们的问题。

<div class="modal" tabindex="-1">
    <--other stuff + blockly here-->
</div>

可以在这些链接上找到其他解决方法：link1 & link2

Answer 2

不得不操纵 DOM 并重组它。

这两个 div 是在 DOM（正文级别）的根目录中生成的。将它们作为模态的子项移动解决了焦点问题。

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

Cannot type in Blockly workspace in Bootstrap modal