在 Material-UI 模式中無法編輯 Blocklys Textblock 輸入字段

Question

我只找到https://groups.google.com/g/blockly/c/SDUosMpAFAk來解決我的問題，但它沒有可以幫助我的答案，所以我創建了一個 Codesandbox 來重現該行為。

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

沙盒中的按鈕將打開一個帶有 Blockly Canvas 的模式。 嘗試在“文本”或“math_number”塊中寫一些東西是行不通的，當你關閉模態時，用外部點擊，一些工件會留下來。

如果有人能幫我解決這個問題，我會很高興。

Answer 1

您可以將屬性disableEnforceFocus設置為true ，這將解決輸入文本/數字塊的問題。 然而，對於使用選擇元素（例如logic_compare 、 math_arithmetic ）的塊，問題仍然存在。

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

在這里您可以看到一個顯示上述行為的示例

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

Answer 2

我找到了多項選擇輸入塊的問題根源：z-index。

在我更改了blocklyDropDownDiv的 z-index 后，問題就消失了。

添加以下 CSS 類就可以了 😀

.blocklyDropDownDiv {
    z-index: 5000;
}