label/data mechanism in "OO.ui.ComboBoxInputWidget"

Question

OOUI's OO.ui.ComboBoxInputWidget allows to set an array of OO.ui.MenuOptionWidget objects in its menu.items config field. Such an item can have a label and a data field. The data field can be of type object 1.

Now, if I use a data field of typeobject the value of the OO.ui.ComboBoxInputWidget will be "[Object object]", as it tries to cast the data value to a string when a user selects an option item. So it looks like OO.ui.ComboBoxInputWidget allows only data of type string in its options. Is that correct?

That would also mean that there is no "label/data" mechanism of the input field itself. If I've got the following options

[
  { label: "Rot", data: "red" },
  { label: "Gelb", data: "yellow" },
  { label: "Grün", data: "green" }
]

and the user selects the option with label "Gelb" the input field shows "yellow", not "Gelb". The code example in the official documentation shows this behavior [2]. Did I miss something? Is it possible to show a label to the user but retrieve the data (object) when calling getValue on such a field?

1 https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.MenuOptionWidget-cfg-data

[2] https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ComboBoxInputWidget

This question was originally posted on the wikitech-l mailing list. You can find the thread here: http://markmail.org/message/fesegc3yljqcytzt

score 3 · Answer 1 · edited Jun 18 '19 at 22:59

In general, the 'data' property for items inside the GroupElement can be strings or objects, as they represent some state of your item. In OO.ui.mixin.GroupElement, the method getItemFromData can then return a specific item based on its data property. If you use an Object for the data, OOUI will use its OO.getHash() to basically stringify your object, so it can make sure it retrieves the right one.

The property 'data' actually comes all the way up the hierarchy chain from OO.ui.Element (if you look at that method, the description of that parameter is the same) -- and at that level, it definitely allows for any sort of data, be it a string or an object.

However, when dealing with specific cases, like that of the ComboBoxInputWidget (the terminology of "input widget" usually suggests something inside a form in OOjs-UI) means that putting the data as an object doesn't make sense usually. Unless your use case requires something very different, we usually want ComboBoxInputWidget to have the 'value' => 'label' pair, so it uses its 'data' property as the 'value' and expects a string.

As for the second part of your question, I am not 100% sure I understood it (please correct me if so) but from what I understand, if you set your OO.ui.MenuOptionWidget items with their data as the value ('red' / 'yellow' / 'green' etc) and the label as the mw.msg that the user sees, then it should work out of the box.

So if you look at the example given in the docs for ComboBoxInputWidget you can set your item's data to the color (value) and the label to the word you want to display, and when the user picks an option, the label needs to show in the ComboBoxInputWidget.

Be aware, though, that if you listen to 'choose' or 'select' event from this input widget, you get the selected item, so if you're projecting that choice into some other input, you should ask for the label (item.getLabel()) and not the data.

score 1 · Answer 2 · edited Nov 09 '17 at 05:09

Thanks for your explanations.

It looks like OOUI does not support something like that (yet).

An example: You've got a option value "Q7186" and a label value "Marie Curie". When the user selects "Marie Curie" the user interface will say: "Q7186". A user might be confused.

I know that some UI frameworks handle this by showing the label of the selected item to the user in a DIV element or something else and storing the actual value in an internal variable. When it comes to form submission and the need to provide an actual "value string" they use a hidden field and maybe a valueField config option in case the "value" is not a string but an object (thus allowing to set the string value of the hidden field from a field within the value object).

Maybe that's something for future development.

label/data mechanism in "OO.ui.ComboBoxInputWidget"

2 Answers2