How to get data from OO.ui.DropdownWidget?

Question

Given a ui with drowpdown menus built with OO.ui allowing to select human languages associated with their Wikidata value :

  languagesA = new OO.ui.DropdownWidget({
    id: 'lqg-languagesA',
        label: 'Source language',
        menu: { items: [
      new OO.ui.MenuOptionWidget({ data: 'Q113', label: 'cmn - Mandarin Chinese' }),
      new OO.ui.MenuOptionWidget({ data: 'Q34',  label: 'mar - Marathi' }),
      new OO.ui.MenuOptionWidget({ data: 'Q209',  label: 'bre - Breton' })
    ]
 },
})

languagesA.getData() returns undefined.

languagesA.getValue() breaks.

Q: Once a possibility is selected by the user, how to get the data value ?

Prototype:

https://jsfiddle.net/cqpr0zd3/1/ - contains A) DropdownInputWidget (fails to get value), B) DropdownInputWidget (works) and C) ComboBoxInputWidget (works).

Official documentations :

DropdownWidget : https://doc.wikimedia.org/mediawiki-core/master/js/#!/api/OO.ui.DropdownWidget
DropdownInputWidget :https://doc.wikimedia.org/mediawiki-core/master/js/#!/api/OO.ui.DropdownInputWidget
ComboBoxInputWidget :https://doc.wikimedia.org/mediawiki-core/master/js/#!/api/OO.ui.ComboBoxInputWidget

Hugolpz · Answer 1 · 2021-12-15T14:12:28.047

DropdownWidget is a broader shell for menus, which can contains various types of content and is therefor not gathering data, and has no .getValue() method. You have to dive in to reach the selected option using

languagesA.getMenu().items.filter(item=> item.selected==true )[0].data)

Alternative: I eventually adopted the ComboBoxInput() with a better configured filtering.

var baseLanguages = [
  { data: 'Q113', label: 'cmn - Mandarin Chinese' },
  { data: 'Q34',  label: 'mar - Marathi' },
  { data: 'Q209',  label: 'bre - Breton' }
];
var dropdown = new OO.ui.ComboBoxInputWidget({ // ComboBox
  id: 'lqg-languagesC',
  placeholder : 'Source language',
  options: baseLanguages,
  menu: {   filterFromInput: true, filterMode : 'substring' }
  // value: 'Q34',
});

Which add elegant features and has built-in .getValue().

How to get data from OO.ui.DropdownWidget?

1 Answers1