toolbox showing expanded 1st category after any block is selected

114 views
Skip to first unread message

James Yang

unread,
Jul 13, 2021, 5:12:11 PM7/13/21
to Blockly
Hi, 

I have been trying to fix the bug of categories in toolbox -- the bug is demonstrated in the video attached. 

I have looked into "setSelectedItem()" in toolbox.js, "Blockly.hideChaff()" and getFlyout().hide() but still haven't found a way to fix this unexpected navigation between categories, as well as the way to make opened category open after a block inside is selected. 

Much appreciation if u guys' have some insight!

James 
Screen Recording 2021-07-13 at 4.05.31 PM.mov

Maribeth Bottorff

unread,
Jul 13, 2021, 6:23:32 PM7/13/21
to Blockly
Interesting, that's definitely a strange bug. Unfortunately, I can't tell what's going on just from your video, and I can't reproduce this with the basic category/test toolboxes we use for testing. 

Could you share your toolbox configuration, and if you have relevant custom toolbox code?

Thanks!

James Yang

unread,
Jul 13, 2021, 10:25:16 PM7/13/21
to Blockly
Of course! 

Please let me know if any other code is needed! I don't think we make any changes to toolbox.js. Thank you very much!

In the html file, we have: 

function start() {
var toolbox = getToolboxElement();
var toolboxNames = [
'toolbox-categories',
'toolbox-categories-typed-variables',
'toolbox-simple',
'toolbox-test-blocks'
];

toolbox: toolbox,
toolboxPosition: side == 'top' || side == 'start' ? 'start' : 'end',
}

function getToolboxElement() {
var match = location.search.match(/toolbox=([^&]+)/);
// Default to the basic toolbox with categories and untyped variables,
// but override that if the toolbox type is set in the URL.
var toolboxSuffix = (match ? match[1] : 'categories');
// The three possible values are: "simple", "categories",
// "categories-typed-variables".
return document.getElementById('toolbox-' + toolboxSuffix);
}

function injectToolbox(container) {
var headingTag = document.createElement('H1');
var text = document.createTextNode('Toolbox');
headingTag.appendChild(text);
container.appendChild(headingTag);

var navContainer = document.createElement('div');
navContainer.setAttribute('id', 'navBar');
container.appendChild(navContainer);
navContainer.appendChild(getNavList());
}

<xml id="toolbox-categories" style="display: none">
<category name="Lyrics" categorystyle="categories">
<block type="rhyme_humpty_dumpty_sat_on_a_wall"></block>
<block type="rhyme_humpty_dumpty_great_fall"></block>
<block type="rhyme_king_hourse_man"></block>
<block type="rhyme_could_not_put_together"></block>
</category>

<category name="Commands" categorystyle="categories">
<block type="rhyme_say"></block>
<block type="for_loop_increment_with_i"></block>
<block type="controls_if"></block>
<block type="logic_compare"></block>
<block type="repeat">
<value name = "number_iterations">
<shadow type = "math_number">
<field name = "NUM">1</field>
</shadow>
</value>
</block>
<block type="new_set_variable_test_1"></block>
</category>

<category name="Variables" categorystyle="categories">
<block type="jingle_variable"></block>
<block type="variable_i"></block>
<block type="math_number"></block>
</category>
</xml>

Abby Schmiedt

unread,
Jul 15, 2021, 8:05:12 PM7/15/21
to Blockly
Hello!

I think we are missing some chunks of code that would be necessary to debug more. Specifically, if you could include the places where you are calling injectToolbox as well as the toolbox or flyout file if you are modifying either of those.

Without those, here are some debugging steps we can try: 
1. Set a break point in setSelectedItem and see where this is getting called from when you click on a block in another category. 
2. This line should be what is setting the flyout to not be visible. If hiding the flyout is not working, check to see that the element being hidden is correct. Since you are not using the default flyout rendering this svgGroup_ might be incorrect.

Cheers,
Abby
Reply all
Reply to author
Forward
0 new messages