ComboBox

ComboBox opens a focus-managed dropdown above or below its button.

ComboBoxRig

Source: hosanna-ui-samples-public/src/hosanna-ui-examples/controls/ComboBoxRig.ts

@view('ComboBoxRig')
export class ComboBoxRigView extends BaseExampleScreenView<ComboBoxRigState> {
  @state private selectedValue = 'foo';
  @state private selectedIndex = 0;

  protected override getViews(): ViewStruct<ViewState>[] {
    return [
      VGroup([
        HGroup([
          ComboBox({
            id: 'comboBox1',
            selectedIndex: this.selectedIndex,
            width: 261,
          height: 63,
          placeholder: 'foo',
          items: PRIMARY_COMBO_ITEMS,
          styleKey: 'controls.ComboBox.default',
          isDropdownOpen: false
        }).isInitialFocus()
          .onSelectionChange((event) => {
            this.selectedIndex = event.index;
            this.selectedValue = PRIMARY_COMBO_ITEMS[event.index]?.value ?? '';
          }),
        ComboBox({
          id: 'comboBox2',
          selectedIndex: 1,
          width: 261,
          height: 63,
          translation: [0, 100],
          placeholder: 'language',
          items: [
            {
              label: 'english',
              value: 'en'
            },
            {
              label: 'french',
              value: 'fr'
            },
            {
              label: 'german',
              value: 'de'
            }

          ],
          styleKey: 'controls.ComboBox.default',
          isDropdownOpen: false
        }),
          HGroup([
            Button({
              text: 'another button'
          })
        ])
        ]).itemSpacing(50),
        Button({
          id: 'comboTrailingButton',
          text: 'another button'
        }),
        Label({ id: 'comboSelectionStatus', text: `Selected: ${this.selectedValue}` })
      ])
      // .isInitialFocus()
      // .isInitialFocus()
    ];
  }

}

Items use { label: string; value: unknown }:

ComboBox({
  items: [
    { label: 'English', value: 'en' },
    { label: 'Español', value: 'es' },
  ],
  placeholder: 'Choose a language',
  selectedIndex: this.languageIndex,
  maxVisibleItems: 5,
})
  .onSelectionChange((event) => {
    this.languageIndex = event.index;
    const language = this.languages[event.index];
    this.selectLanguage(language.value);
  });

The selection event contains index; it does not contain item. Read the selected item from the same array.

Important fields include items, selectedIndex, isDropdownOpen, placeholder, dropdownPosition, maxVisibleItems, and onSelectionChange, plus the button/list style fields. When maxVisibleItems > 0 and the item count exceeds it, the dropdown wraps its cards in a ScrollView.

OK opens the button or selects the focused card. Back closes an open dropdown; the current implementation also closes it on Left, Right, or Up before those keys continue through normal navigation.