Moving a mutated block throws errors

[aabounegm]

Describe the bug

I have a simple block with a checkbox field, and a mutator to add a value input if the checkbox is checked (and remove it when unchecked). When I add the block to the workspace and check the box, it adds the input successfully, but upon dragging that block to move it everything breaks and the workspace just keeps throwing errors.

To Reproduce

I created a JSFiddle with minimum code to reproduce the bug: https://jsfiddle.net/dzs18j6e/

Expected behavior

The block should be moved without causing errors

Screenshots

Desktop (please complete the following information):

• OS: Windows 10 (2004 update)
• Browser: Chrome
• Version: 83.0.4103.116

Stack Traces

Logs from the screenshot above, exported from Chrome's console (using "Save as..." from context menu)

blockly_compressed.js?e98f:304 Uncaught TypeError: Cannot read property 'fieldRow' of undefined
    at Blockly.InsertionMarkerManager.createMarkerBlock_ (blockly_compressed.js?e98f:304)
    at new Blockly.InsertionMarkerManager (blockly_compressed.js?e98f:299)
    at new Blockly.BlockDragger (blockly_compressed.js?e98f:318)
    at Blockly.TouchGesture.Blockly.Gesture.startDraggingBlock_ (blockly_compressed.js?e98f:443)
    at Blockly.TouchGesture.Blockly.Gesture.updateIsDraggingBlock_ (blockly_compressed.js?e98f:440)
    at Blockly.TouchGesture.Blockly.Gesture.updateIsDragging_ (blockly_compressed.js?e98f:442)
    at Blockly.TouchGesture.Blockly.Gesture.updateFromEvent_ (blockly_compressed.js?e98f:437)
    at Blockly.TouchGesture.Blockly.Gesture.handleMove (blockly_compressed.js?e98f:448)
    at Blockly.TouchGesture.handleMove (blockly_compressed.js?e98f:658)
    at HTMLDocument.h (blockly_compressed.js?e98f:795)
Blockly.InsertionMarkerManager.createMarkerBlock_ @ blockly_compressed.js?e98f:304
Blockly.InsertionMarkerManager @ blockly_compressed.js?e98f:299
Blockly.BlockDragger @ blockly_compressed.js?e98f:318
Blockly.Gesture.startDraggingBlock_ @ blockly_compressed.js?e98f:443
Blockly.Gesture.updateIsDraggingBlock_ @ blockly_compressed.js?e98f:440
Blockly.Gesture.updateIsDragging_ @ blockly_compressed.js?e98f:442
Blockly.Gesture.updateFromEvent_ @ blockly_compressed.js?e98f:437
Blockly.Gesture.handleMove @ blockly_compressed.js?e98f:448
Blockly.TouchGesture.handleMove @ blockly_compressed.js?e98f:658
h @ blockly_compressed.js?e98f:795
blockly_compressed.js?e98f:448 Uncaught TypeError: Cannot read property 'dragBlock' of null
    at Blockly.TouchGesture.Blockly.Gesture.handleMove (blockly_compressed.js?e98f:448)
    at Blockly.TouchGesture.handleMove (blockly_compressed.js?e98f:658)
    at HTMLDocument.h (blockly_compressed.js?e98f:795)
Blockly.Gesture.handleMove @ blockly_compressed.js?e98f:448
Blockly.TouchGesture.handleMove @ blockly_compressed.js?e98f:658
h @ blockly_compressed.js?e98f:795
blockly_compressed.js?e98f:448 Uncaught TypeError: Cannot read property 'dragBlock' of null
    at Blockly.TouchGesture.Blockly.Gesture.handleMove (blockly_compressed.js?e98f:448)
    at Blockly.TouchGesture.handleMove (blockly_compressed.js?e98f:658)
    at HTMLDocument.h (blockly_compressed.js?e98f:795)
Blockly.Gesture.handleMove @ blockly_compressed.js?e98f:448
Blockly.TouchGesture.handleMove @ blockly_compressed.js?e98f:658
h @ blockly_compressed.js?e98f:795
blockly_compressed.js?e98f:448 Uncaught TypeError: Cannot read property 'dragBlock' of null
    at Blockly.TouchGesture.Blockly.Gesture.handleMove (blockly_compressed.js?e98f:448)
    at Blockly.TouchGesture.handleMove (blockly_compressed.js?e98f:658)
    at HTMLDocument.h (blockly_compressed.js?e98f:795)
Blockly.Gesture.handleMove @ blockly_compressed.js?e98f:448
Blockly.TouchGesture.handleMove @ blockly_compressed.js?e98f:658
h @ blockly_compressed.js?e98f:795
blockly_compressed.js?e98f:448 Uncaught TypeError: Cannot read property 'dragBlock' of null
    at Blockly.TouchGesture.Blockly.Gesture.handleMove (blockly_compressed.js?e98f:448)
    at Blockly.TouchGesture.handleMove (blockly_compressed.js?e98f:658)
    at HTMLDocument.h (blockly_compressed.js?e98f:795)
Blockly.Gesture.handleMove @ blockly_compressed.js?e98f:448
Blockly.TouchGesture.handleMove @ blockly_compressed.js?e98f:658
h @ blockly_compressed.js?e98f:795
blockly_compressed.js?e98f:448 Uncaught TypeError: Cannot read property 'dragBlock' of null
    at Blockly.TouchGesture.Blockly.Gesture.handleMove (blockly_compressed.js?e98f:448)
    at Blockly.TouchGesture.handleMove (blockly_compressed.js?e98f:658)
    at HTMLDocument.h (blockly_compressed.js?e98f:795)
Blockly.Gesture.handleMove @ blockly_compressed.js?e98f:448
Blockly.TouchGesture.handleMove @ blockly_compressed.js?e98f:658
h @ blockly_compressed.js?e98f:795
blockly_compressed.js?e98f:448 Uncaught TypeError: Cannot read property 'dragBlock' of null
    at Blockly.TouchGesture.Blockly.Gesture.handleMove (blockly_compressed.js?e98f:448)
    at Blockly.TouchGesture.handleMove (blockly_compressed.js?e98f:658)
    at HTMLDocument.h (blockly_compressed.js?e98f:795)
Blockly.Gesture.handleMove @ blockly_compressed.js?e98f:448
Blockly.TouchGesture.handleMove @ blockly_compressed.js?e98f:658
h @ blockly_compressed.js?e98f:795
blockly_compressed.js?e98f:449 Uncaught TypeError: Cannot read property 'endBlockDrag' of null
    at Blockly.TouchGesture.Blockly.Gesture.handleUp (blockly_compressed.js?e98f:449)
    at Blockly.TouchGesture.handleUp (blockly_compressed.js?e98f:659)
    at HTMLDocument.h (blockly_compressed.js?e98f:795)
Blockly.Gesture.handleUp @ blockly_compressed.js?e98f:449
Blockly.TouchGesture.handleUp @ blockly_compressed.js?e98f:659
h @ blockly_compressed.js?e98f:795
blockly_compressed.js?e98f:448 Uncaught TypeError: Cannot read property 'dragBlock' of null
    at Blockly.TouchGesture.Blockly.Gesture.handleMove (blockly_compressed.js?e98f:448)
    at Blockly.TouchGesture.handleMove (blockly_compressed.js?e98f:658)
    at HTMLDocument.h (blockly_compressed.js?e98f:795)
Blockly.Gesture.handleMove @ blockly_compressed.js?e98f:448
Blockly.TouchGesture.handleMove @ blockly_compressed.js?e98f:658
h @ blockly_compressed.js?e98f:795
blockly_compressed.js?e98f:448 Uncaught TypeError: Cannot read property 'dragBlock' of null
    at Blockly.TouchGesture.Blockly.Gesture.handleMove (blockly_compressed.js?e98f:448)
    at Blockly.TouchGesture.handleMove (blockly_compressed.js?e98f:658)
    at HTMLDocument.h (blockly_compressed.js?e98f:795)
Blockly.Gesture.handleMove @ blockly_compressed.js?e98f:448
Blockly.TouchGesture.handleMove @ blockly_compressed.js?e98f:658
h @ blockly_compressed.js?e98f:795
blockly_compressed.js?e98f:448 Uncaught TypeError: Cannot read property 'dragBlock' of null
    at Blockly.TouchGesture.Blockly.Gesture.handleMove (blockly_compressed.js?e98f:448)
    at Blockly.TouchGesture.handleMove (blockly_compressed.js?e98f:658)
    at HTMLDocument.h (blockly_compressed.js?e98f:795)
Blockly.Gesture.handleMove @ blockly_compressed.js?e98f:448
Blockly.TouchGesture.handleMove @ blockly_compressed.js?e98f:658
h @ blockly_compressed.js?e98f:795

Additional context

I noticed that if the block in question was connected to another block, and that parent block gets dragged, the operation goes smoothly without any errors. It also works fine if the checkbox gets unchecked before attempting to move the block.

[BeksOmega]

Have you checked the XML output of your block? It looks like isIcon.toString() probably returns "true" not "TRUE" like you want it to. You could either change it to isIcon.toString().toUppercase(). Or you could change your check to getAttribute('icon') == "true".

But that may not be the issue, I haven't tested hehe.

I hope that helps!
--Beka

P.S. I wonder if there's any way this could have a more descriptive error message?

[aabounegm]

It looks like isIcon.toString() probably returns "true" not "TRUE"

That is a nice catch! I was probably affected by how Blockly saves boolean values in the XML. However, I have not yet reached the stage of saving the XML and loading it in my application, so sadly this is not the problem. Now that I took another look, I think I don't even need to save the "is icon" state on the mutation element since I am using the value in the field that is on the block anyways and will be exported/loaded automatically.

Anyways, you can check the attached JSFiddle and reproduce the problem without saving or exporting anything, just add the block, check the box, and try to move it.

I hope the attached error messages would be enough for the devs, since there is really nothing else in the console. I should probably add that by putting a console.log(this.inputList); in the beginning of my updateShape_, I observed that the LABEL input appears in the list when the box is checked and the change event is fired for any reason (like attaching another block to this one), but disappears from it when the event is fired for moving the block.
I have other blocks with similar mutations (a derivation of the provided list_create_with), and I do not experience the same problem

[BeksOmega]

Anyways, you can check the attached JSFiddle and reproduce the problem without saving or exporting anything, just add the block, check the box, and try to move it.

Ah sorry I forgot to clarify! When the insertion marker creates the grey version of a block (which is actually a Blockly.Block!) it serializes and deserializes the original. Then it goes through all of the fields and makes sure the field values on the grey version match the original version.

So currently when the grey version gets deserialized/created it's missing the input and fields that are created by your mutator. Then when the manager goes to copy over the field values it throws the error.

So if you fix the mutator problem it should fix the insertion marker error.

since I am using the value in the field that is on the block anyways and will be exported/loaded automatically.

This should usually work yes. The reason that the docs recommend creating a mutator anyway is that mutations are always deserialized first, while fields are serialized & deserialized in the order they appear on the block. So if you have a mutator triggered by a field which adds a field /before/ the field triggering the mutation, you will run into issues.

That shouldn't be a problem in your case though =)

[aabounegm]

So if you fix the mutator problem it should fix the insertion marker error.

If you are referring to the problem of using TRUE instead of true, I don't think that's the only problem. I removed the mutator and created a simpler example that doesn't have this variable and reads directly from the field and defined the function directly on the block: https://jsfiddle.net/xj9fbc5L/
I don't think I understood the last paragraph very well, but I don't think it really applies to my case. I would be grateful if you can check this Fiddle and tell me if I am doing something wrong 😅.

[BeksOmega]

Ok that one has a slightly different but related issue hehe. The problem there is that (I believe) insertion markers disable events, so your onChange listener for the grey block isn't getting called. If you use a field-level validator instead of a block-level change listener it works :D Here's a remixed fiddle: https://jsfiddle.net/ys7f2wga/ (hopefully I shared that correctly).

I don't think I understood the last paragraph very well, but I don't think it really applies to my case.

Haha yeah it's a pretty specific case! I probably should have included a picture. I don't think you'll run into issues with it, but you might want to consider serializing the data to a mutation anyway, just in case.

[aabounegm]

Thanks a lot for the working example! It helped.
I just went through your previous comments again and understood now the problem. I wasn't changing the isIcon variable on the mutation object itself, which caused an outdated value to be serialized and the rest is as you explained in your 2nd comment (the true vs TRUE issue would have been the next problem :D). I think I still need to play around with mutators more to get the hang of it.
I will decide which solution to use (mutator or directly on the block) depending on whether I will have other similar blocks.

Since this is not actually a bug, I'll close the issue. Sorry for wasting your time, and thanks for the help