在 Material-UI 模式中无法编辑 Blocklys Textblock 输入字段

Question

I only found https://groups.google.com/g/blockly/c/SDUosMpAFAk to my problem, but it has no answers that could help me, so I created a Codesandbox to reproduce the behavior.

https://codesandbox.io/s/gallant-galois-bqjjb

The button in the Sandbox will open a modal with a Blockly Canvas in it. Trying to write something in the "text"- or "math_number"-Block does not work, and when you close the modal, with an outside click, some artifacts are staying.

I would be glad if someone can help me out with this.

Answer 1

You can set the property disableEnforceFocus to true , and that will solve the problem for the input text/number blocks. However the problem persists for blocks using selection elements (eg logic_compare , math_arithmetic ).

<Modal
       ...
        disableEnforceFocus
>
....
</Modal>

Here you can see an example showing the above behaviour

https://codesandbox.io/s/lucid-booth-w18h4?file=/src/App.js

Answer 2

I found the source of the issue with multiple choice input blocks: z-index.

After I changed the z-index for the blocklyDropDownDiv the problem was gone.

Add the following CSS class and that's it 😀

.blocklyDropDownDiv {
    z-index: 5000;
}