Feature request: Allow us to choose a different optionLabel to display selected items in MultiSelect

[robbevwinckel]

I'm submitting a ...

[ ] bug report
[x] feature request
[ ] support request => Please do not submit support request here, instead see https://forum.primefaces.org/viewforum.php?f=57

Allow us to choose a different optionLabel to display selected items in MultiSelect (see picture)

I have an object:

{
  code: 1,
  description: description of code 1,
  optionLabel: $code - $description
}

I would like to show optionLabel in the dropdown, and code only in the selected items bar

Played around, and found an easy way to get what I want, feel free to copy code:

MultiSelect.d.ts

interface MultiSelectProps {
  ... // code omitted
  optionLabel?: string; // see PS*
  selectedOptionLabel?: string;
  ... // code omitted
}

MultiSelect.js

MultiSelect.defaultProps = {
    ... // code omitted
    selectedOptionLabel: null,
    ... // code omitted
};
MultiSelect.propTypes = {
  ... // code omitted
  selectedOptionLabel: _propTypes2.default.string,
  ... // code omitted
}

{
  key: 'getOptionLabel',
  value: function getOptionLabel(option, useSelectedOptionLabel = false) { // Added support for a selected option label
  // If a selectionOptionLabel is given to MultiSelect element, and we're attaching to the selected label, use selectedOptionLabel
  if (this.props.selectedOptionLabel && useSelectedOptionLabel) 
    return _ObjectUtils2.default.resolveFieldData(option, this.props.selectedOptionLabel)

  return this.props.optionLabel ? _ObjectUtils2.default.resolveFieldData(option, this.props.optionLabel) : option.label;
  }
}

{
  key: 'findLabelByValue',
  value: function findLabelByValue(val) {
    ... // code omitted
    
  if (_ObjectUtils2.default.equals(optionValue, val)) {
    label = this.getOptionLabel(option, true); // <=
    break;
  }
  return label;
};

In own code:

<MultiSelect optionLabel={'optionLabel'} selectedOptionLabel={'code'} />

PS: for this to work, optionLabel has to be added (see issue: https://github.com/primefaces/primereact/issues/450