ComboBoxDisplay

ComboBoxDisplay<T> (from scenerystack/scenery-phet) combines a ComboBox with a NumberDisplay per item: instead of choosing among static labels, the user chooses which of several dynamic numeric quantities to display, and the selected item's live value is what's shown in the closed combo box. It's the control to reach for when a sim lets the user pick, say, "voltage" vs. "current" vs. "resistance" to watch in one readout, rather than showing all three permanently.

Ordinary ComboBox items are built once with a createNode factory and don't grow or shrink afterward — ComboBoxDisplay adds the bookkeeping needed to keep each item's NumberDisplay from resizing as its underlying number changes, so the dropdown's layout doesn't jitter as values update in the background.

import { ComboBoxDisplay, type ComboBoxDisplayItem } from 'scenerystack/scenery-phet';
import { Property } from 'scenerystack/axon';
import { Node } from 'scenerystack/scenery';
import { Range } from 'scenerystack/dot';

A minimal example

type Quantity = 'voltage' | 'current';
const choiceProperty = new Property<Quantity>( 'voltage' );

const voltageProperty = new Property<number | null>( 9 );
const currentProperty = new Property<number | null>( 0.5 );

const listParent = new Node();

const items: ComboBoxDisplayItem<Quantity>[] = [
  { choice: 'voltage', numberProperty: voltageProperty, range: new Range( 0, 12 ), units: 'V' },
  { choice: 'current', numberProperty: currentProperty, range: new Range( 0, 2 ), units: 'A' }
];

const display = new ComboBoxDisplay( choiceProperty, items, listParent, {
  tandem: tandem.createTandem( 'quantityDisplay' )
} );

screenView.addChild( display );
screenView.addChild( listParent ); // must be an ancestor high enough not to be clipped

Constructor

new ComboBoxDisplay<T>(
  choiceProperty: Property<T>,
  items: ComboBoxDisplayItem<T>[],
  listParent: Node,
  providedOptions?: ComboBoxDisplayOptions
)

As with plain ComboBox, listParent needs to be added to the scene graph as an ancestor high enough that the popup list isn't clipped or drawn behind other content.