1

I'm using a dialog to display a blocky based workspace, but I found that input blocks were not editable. For example, I was not able to type something in a text block neither select an option of component with multiple choices (e.g., logic_compare, math_arithmetic).

enter image description here

I was able to fix the issue with text input components by setting the property disableEnforceFocus of the Dialog to true, but the problem persists for the input blocks with multiple choices.

<Dialog
   ...
   disableEnforceFocus
>
...
</Dialog>

I tried every other property Modal property without success to solve the second problem :(

Here you can find an example that reproduce the described problem

enter image description here

https://codesandbox.io/s/lucid-booth-w18h4

Any suggestion how to solve it?

Humberto
  • 328
  • 3
  • 12
  • Code should be in the question itself as a [mcve], not a sandbox link, which can disappear over time rendering the question useless to future visitors. Thanks. – ggorlen Jan 13 '22 at 18:07

1 Answers1

1

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

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

Add the following CSS and that's it 

.blocklyDropDownDiv {
    z-index: 5000;
}
Humberto
  • 328
  • 3
  • 12