combobox choiceValue and label

[MathieuPuech]

I searched in the documentation about it but didn't find any way to have it. I want to have an object choiceValue for a combobox but display when selected the label of the option instead of the choiceValue.

HTML code could be like that:

<lion-combobox name="my-combobox" label="My Combobox">
  <lion-option .choiceValue="${user}" label="${user.name}">${user.name}</lion-option>
</lion-combobox>

And when an option is selected, it fill the input with the label instead of the choiceValue

[tlouisse]

Maybe it would be possible to write a method:

/**
 * @overridable
 * @param {LionOption} option
 * @returns {string}
 */
_getTextboxValueFromOption(option) {
  return option.choiceValue;
}

And in your extension you would override it and return option.label || option.innerText.

And wrap all of this code:

• https://github.com/ing-bank/lion/blob/master/packages/combobox/src/LionCombobox.js#L440
• https://github.com/ing-bank/lion/blob/master/packages/combobox/src/LionCombobox.js#L433
• https://github.com/ing-bank/lion/blob/master/packages/combobox/src/LionCombobox.js#L653

Hopefully it's as easy as this. But no guarantees it will come without 'surprises' 🙂

[MathieuPuech]

I suppose it could be good like that. I will make a PR for that

[MathieuPuech]

for the _setTextboxValue, it's the value we set directly in the input node, we don't use the option, it's maybe more complex than just that.

I could add the option with the value to _setTextboxValue maybe?

[tlouisse]

Ah, good point :)
Maybe we can keep that method as is, avoiding a small breaking change for Subclassers eventually using this. Also, when it needs to be set to empty string the option would not work (could accept more params, though)

Maybe we can rewrite those:

• https://github.com/ing-bank/lion/blob/master/packages/combobox/src/LionCombobox.js#L754
  Instead of diffing current and pref modelValues (which are basically the choiceValues), we should diff the viewValues
  This could become

const newValue = this.formElements.filter(option => diff.includes(option.choiceValue)).map(option => this._getTextboxValueFromOption(option)).join(' ');
this._setTextboxValue(newValue);

• https://github.com/ing-bank/lion/blob/master/packages/combobox/src/LionCombobox.js#L294
  This could become this._setTextboxValue(this._getTextboxValueFromOption(this.formElements[this.checkedIndex]));

[MatthieuLebigre]

I've opened a PR to answer this discussion: #1377

[tlouisse]

It has been solved here: #1377

I will now shamelessly mark this as the right answer, but let me know when not all has been addressed :)