Blockly in react material ui Dialog

[Dumindu Gunawardana]

When render blockly in material ui Dialog input fields can not be edited. But it works perfectly without Dialog. We are using react material ui version 1.

[Andrew n marshall]

I'm not understanding what you mean by "dialog input fields".  Here is a list of the fields we support on our blocks. Which of those is causing the problem?

Also, can you provide a code sample and demo site so we can see what you mean? We do not have React set up at a demo so we have limited ability to help you without such a demonstration.

--
Andrew

On Mon, Jun 11, 2018 at 12:10 AM, Dumindu Gunawardana <dumindugu...@gmail.com> wrote:

When render blockly in material ui Dialog input fields can not be edited. But it works perfectly without Dialog. We are using react material ui version 1.

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Dumindu Gunawardana]

When render blockly worspace in material ui Dialog(popup window), blockly input fields can not be edited and it behave as disabled. But it works perfectly without Dialog. We are using react material ui version 1.You can find Material ui Dialog here(https://material-ui.com/demos/dialogs/). 

[Andrew n marshall]

So you are hosting Blockly in one of these popup dialogs?

A demo site would still be useful.  There might be a naming conflict in a CSS class, or something similar. I really can't say without something to investigate.

--
Andrew

[Belphegor]

Hi,

I ran into the same problem recently and I have created a CodeSandbox and a Stackoverflow issue.

Greetings

To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.

[Humberto Rodríguez Avila]

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 (e.g. logic_compare, math_arithmetic).

<Modal ... disableEnforceFocus >

...

 </Modal>

Op maandag 15 november 2021 om 09:14:28 UTC+1 schreef s158...@gmail.com:

[Humberto Rodríguez Avila]

Here you can see an example showing how the input blocks (e.g., text) work but not the ones based on a selection element (e.g.,  logic_compare)

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

Op zaterdag 4 december 2021 om 22:34:55 UTC+1 schreef Humberto Rodríguez Avila:

[Humberto Rodríguez Avila]

I posted a question in stackoverflow to see how to solve the problem

https://stackoverflow.com/questions/70229998/mui-dialog-does-not-allow-select-an-option-of-blockly-component-with-multiple-ch 

but so far no luck :(

Op zaterdag 4 december 2021 om 22:41:38 UTC+1 schreef Humberto Rodríguez Avila:

[Humberto Rodríguez Avila]

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;

    }

Op maandag 6 december 2021 om 11:06:20 UTC+1 schreef Humberto Rodríguez Avila: