make list from text block throws uncaught Error

Problem statement

If you put a shadow block in the “make list from text” block and then select “text from list” in the dropdown, the following error occurs.

connection.js:328 Uncaught Error: Connection checks failed. Input "INPUT" connection on "lists_split" block (id="+{VZiOpQGp#Fx~1R:F#R") expected Array, found String

Expected Behavior

I would expect the shadow block to vanish when you switch to “text from list”, and then reappear when you switch back to “list from text”. There should also be no Uncaught Error

Actual Behavior

When you select “text from list” in the drop down, the shadow block disconnects and then you cannot interact with it. You also see both items in the drop down as checked.

Steps to Reproduce

You can use this xml in the blockly playground to reproduce.

<xml xmlns="http://www.w3.org/1999/xhtml">
  <block type="lists_split" id="+{VZiOpQGp#Fx~1R:F#R" x="88" y="38">
    <mutation mode="SPLIT"></mutation>
    <field name="MODE">SPLIT</field>
    <value name="INPUT">
      <shadow type="text" id="2=*3(pV]Wqhs)y%Kutr)">
        <field name="TEXT"></field>
      </shadow>
    </value>
    <value name="DELIM">
      <shadow type="text" id="w]%su!7F(Ep@r_`^3#19">
        <field name="TEXT">,</field>
      </shadow>
    </value>
  </block>
</xml>

Stack Traces

Uncaught Error: Connection checks failed. Input "INPUT" connection on "lists_split" block (id="+{VZiOpQGp#Fx~1R:F#R") expected Array, found String
    at Blockly.RenderedConnection.Blockly.Connection.checkConnection_ (connection.js:328)
    at Blockly.RenderedConnection.Blockly.Connection.connect (connection.js:396)
    at Blockly.RenderedConnection.Blockly.Connection.respawnShadow_ (connection.js:531)
    at Blockly.RenderedConnection.respawnShadow_ (rendered_connection.js:354)
    at Blockly.RenderedConnection.Blockly.Connection.disconnect (connection.js:495)
    at Blockly.BlockSvg.Blockly.Block.unplugFromRow_ (block.js:334)
    at Blockly.BlockSvg.Blockly.Block.unplug (block.js:316)
    at Blockly.RenderedConnection.onCheckChanged_ (rendered_connection.js:420)
    at Blockly.RenderedConnection.Blockly.Connection.setCheck (connection.js:599)
    at Blockly.Input.setCheck (input.js:209)

[BeksOmega]

Hi @cshung ,

I think you have the right idea about setting the shadow dom to null, but I think you might want to go a level deeper than the block. I believe the issue is that when you switch the “check” of a connection, you no longer want it to have a shadow, you want it to be empty. So I would start by looking at the setCheck function and try to add the functionality that if the new check is incompatible with the current shadow the shadowDom is set to null. Then work from there.

Other people may have different opinions though ¯\_(ツ)_/¯ Good work and good luck!

[cshung]

I am writing this to share some progress and ideally try to get some help/idea on how to move on.

As my debugging goes, it looks like the existence of the shadowDom on the connection object is going to trigger the respawnShadow_ function, leading to the error. Therefore, as an experiment, I attempted to implement the desired behavior by stashing the shadowDom to somewhere else and then put it back when we are done. The experiment isn’t so successful. It does remove the error, but the shadow block stays on the canvas, and setting the shadowDom back does not lead to the respawnShadow_ to get called again.

Here is a link to my fork and code changes attempting to repro and fix. It is not meant for PR (at least not yet), it is meant for sharing and discussion. For reason that I don’t understand, the dropdown (in the repro) seems to be broken in the develop branch, that could indicate another issue.

I have a feeling this is likely the way to go, except I think I need to actually eliminate the shadow, not the shadowDom. As a newcomer to the code base, this is challenging to me, any help would be great.

@rachel-fenichel