Help with ComboBox

[veillette]

I'm developing a simulation that demonstrates the Doppler effect. I've implemented a combo box to allow users to select different scenarios, but I'm experiencing an issue with it. While the combo box opens properly, one cannot select any of the items from the dropdown list (you can try at https://veillette.github.io/dopplerEffectPhET/). My simulation is hosted on GitHub: https://github.com/veillette/dopplerEffectPhET , but here's the relevant code section that handles the combo box functionality: In SimScreenView.ts, I have

    // Create scenario combo box
    const scenarioItems = [
      SCENARIO_OPTIONS.FREE_PLAY,
      SCENARIO_OPTIONS.SCENARIO_1,
      SCENARIO_OPTIONS.SCENARIO_2,
      SCENARIO_OPTIONS.SCENARIO_3,
      SCENARIO_OPTIONS.SCENARIO_4,
    ].map((text) => ({
      value: text,
      createNode: () =>
        new Text(text, { font: new PhetFont(14), fill: this.UI.TEXT_COLOR }),
    }));

    const listParent = new Node();

    // Create combo box using SceneryStack API
    const scenarioComboBox = new ComboBox(
      model.scenarioProperty,
      scenarioItems,
      listParent,
    );

    // Position the combo box
    scenarioComboBox.left = 10;
    scenarioComboBox.top = 10;

    // Add to control layer
    this.controlLayer.addChild(scenarioComboBox);
    this.controlLayer.addChild(listParent);

whereas

in simModel.ts, I have

// Define available scenarios
export const SCENARIO_OPTIONS = {
  FREE_PLAY: "Free Play",
  SCENARIO_1: "Scenario 1: Source Approaching",
  SCENARIO_2: "Scenario 2: Source Receding",
  SCENARIO_3: "Scenario 3: Observer Approaching",
  SCENARIO_4: "Scenario 4: Observer Receding",
};
 this.scenarioProperty = new StringProperty(SCENARIO_OPTIONS.FREE_PLAY);

Could you help identify what's wrong with my implementation and suggest how to fix it?

[samreid]

Great looking simulation, @veillette, nice work. I suspect the problem is related to the listParent, which is documented like so: https://github.com/phetsims/sun/blob/59c4ae23dca83d9abd37784e52b8ff0c92922feb/js/ComboBox.ts#L196-L202

For example, here is an example of passing the ScreenView as the listParent: https://github.com/phetsims/tappi/blob/717c87f4d3cfce198a8e8af797e271a2228b4323/js/demo/patterns/view/PatternsScreenView.js#L50-L54

We have thoughts about how to improve this interface (automate the listParent part) in phetsims/joist#1004 but nothing schedule to improve it in the near future. Let us know if that fixes it.

[veillette]

Thanks @samreid , I'll try your suggestion.

[veillette]

Thanks for the prompt reply. As an update, in the end, the problem wasn't with the comboBox, but rather with some faulty logic in applying the scenario. I wanted to reset the simulation before applying the scenario, but this had the unfortunate side effect of resetting the scenario property itself. So I had to resolve this circular logic.