Last post:
it would be nice if
1. we could choose which fields of an object would show in the dropdown, divided by either a self chosen delimiter or a default one. So something like this
Code: Select all
<MultiSelect optionLabels="code,description" />
// => Code: description
<MultiSelect optionLabels="code,description" delimiter=" - " />
// => Code - description
2. We could choose which field would be added to the label once selected
Code: Select all
<MultiSelect optionLabels="code,description" delimiter=" - " selectedOptionLabel="code" />
// => 1, 3
// => DROPDOWN
// => V | 1 - description
// => | 2 - description
// => V | 3 - description
I changed the code a little bit so I could achieve what I wanted:
Code: Select all
key: 'findLabelByValue',
value: function findLabelByValue(val) {
var label = null;
for (var i = 0; i < this.props.options.length; i++) {
var option = this.props.options[i];
var optionValue = this.getOptionValue(option);
if (_ObjectUtils2.default.equals(optionValue, val)) {
label = this.getOptionLabel(option, true);
break;
}
}
return label;
}
CHANGED THIS
if (_ObjectUtils2.default.equals(optionValue, val)) { // See above
label = this.getOptionLabel(option, true); // Altered function, see below
break;
}
Code: Select all
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 && useSelectedLabel) return _ObjectUtils2.default.resolveFieldData(option, this.props.selectedOptionLabel)
return this.props.optionLabel ? _ObjectUtils2.default.resolveFieldData(option, this.props.optionLabel) : option.label;
}
Code: Select all
interface MultiSelectProps {
....
optionLabel?: string;
selectedOptionLabel?: string;
....
}
You can use this code, but a solution would be nice
3. A filter/toggle button where we can specify to only show the selected items in the dropdown