Can't open my challenge accordion box by clicking on the title with ?shuffleListeners

[zepumph]

I think this has to do with the refactor in 5d3cd2a for #286. I may have also run into the before, but I forget when or where.

[zepumph]

Ahh, I remember, this was an issue in #88.

[zepumph]

UPDATE: this only occurs when ?shuffleListeners is present.

[zepumph]

Ok, I cannot consistently get this to reproduce. I believe I have only been able to reproduce this with both ?shuffleListeners&log, but not every runtime.

http://localhost:8080/ratio-and-proportion/ratio-and-proportion_en.html?brand=phet&ea&shuffleListeners&log would do it about 40% of the time. Otherwise you could click the collapsed title bar just fine.

[zepumph]

Ok. I think I have cracked it. It only happens some times because it depends on the random listener order of the pickableProperty listeners. Since Node got updated to use TinyProperty, it was rewritten to add a prioritized listener first, before any others. If this get's jumbled, then I would expect for scene graph operations (like the hit test for the accordion box to) to be buggy. I'm going to create a new issue to handle this so that ?shuffleListeners is still valuable. to the project.

[zepumph]

Note that this patch also fixes the problem, though we don't want to go down this road:

Index: js/AccordionBox.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/js/AccordionBox.js b/js/AccordionBox.js
--- a/js/AccordionBox.js	(revision fe13dfe1ea3f3ae0721fa5ec1100cce08efa1464)
+++ b/js/AccordionBox.js	(date 1609284982743)
@@ -163,6 +163,7 @@
       this.titleNode = new Text( '', { tandem: options.tandem.createTandem( 'titleNode' ) } );
       this.disposeEmitterAccordionBox.addListener( () => this.titleNode.dispose() );
     }
+    this.titleNode.pickable = false; // we want the pointer event to go to the Title bars, which have listeners
 
     // @public {Property.<boolean>}
     this.expandedProperty = options.expandedProperty;
@@ -270,7 +271,8 @@
       const outlineOptions = {
         stroke: options.stroke,
         lineWidth: options.lineWidth,
-        cornerRadius: options.cornerRadius
+        cornerRadius: options.cornerRadius,
+        pickable: false
       };
 
       // @private