Blockly in react material ui Dialog

108 views
Skip to first unread message

Dumindu Gunawardana

unread,
Jun 11, 2018, 3:10:52 AM6/11/18
to Blockly
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

unread,
Jun 11, 2018, 7:57:25 PM6/11/18
to blo...@googlegroups.com
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.
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

unread,
Jun 12, 2018, 12:34:07 AM6/12/18
to Blockly
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

unread,
Jun 12, 2018, 2:34:07 PM6/12/18
to blo...@googlegroups.com
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.

Belphegor

unread,
Nov 15, 2021, 3:14:28 AM11/15/21
to Blockly
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

unread,
Dec 4, 2021, 4:34:55 PM12/4/21
to Blockly

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_comparemath_arithmetic).

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

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

Humberto Rodríguez Avila

unread,
Dec 4, 2021, 4:41:38 PM12/4/21
to Blockly

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

unread,
Dec 6, 2021, 5:06:20 AM12/6/21
to Blockly
I posted a question in stackoverflow to see how to solve the problem


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

unread,
Dec 6, 2021, 5:52:17 AM12/6/21
to Blockly
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:
Reply all
Reply to author
Forward
0 new messages