#1230 for MultiSelect

primefaces · Mar 6, 2020 · 2414ca6 · 2414ca6
1 parent dcc10b7
commit 2414ca6
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 11 deletions.
diff --git a/src/components/multiselect/MultiSelect.d.ts b/src/components/multiselect/MultiSelect.d.ts
@@ -6,6 +6,7 @@ interface MultiSelectProps {
     value?: any;
     options?: any[];
     optionLabel?: string;
+    optionValue?: string;
     style?: object;
     className?: string;
     scrollHeight?: string;

diff --git a/src/components/multiselect/MultiSelect.js b/src/components/multiselect/MultiSelect.js
@@ -15,6 +15,7 @@ export class MultiSelect extends Component {
         value: null,
         options: null,
         optionLabel: null,
+        optionValue: null,
         style: null,
         className: null,
         scrollHeight: '200px',
@@ -42,6 +43,7 @@ export class MultiSelect extends Component {
         value: PropTypes.any,
         options: PropTypes.array,
         optionLabel: PropTypes.string,
+        optionValue: PropTypes.string,
         style: PropTypes.object,
         className: PropTypes.string,
         scrollHeight: PropTypes.string,
@@ -256,9 +258,9 @@ export class MultiSelect extends Component {
     findSelectionIndex(value) {
         let index = -1;
 
-        if(this.props.value) {
-            for(let i = 0; i < this.props.value.length; i++) {
-                if(ObjectUtils.equals(this.props.value[i], value, this.props.dataKey)) {
+        if (this.props.value) {
+            for (let i = 0; i < this.props.value.length; i++) {
+                if (ObjectUtils.equals(this.props.value[i], value, this.props.dataKey)) {
                     index = i;
                     break;
                 }
@@ -275,11 +277,11 @@ export class MultiSelect extends Component {
     findLabelByValue(val) {
         let label = null;
 
-        for(let i = 0; i < this.props.options.length; i++) {
+        for (let i = 0; i < this.props.options.length; i++) {
             let option = this.props.options[i];
             let optionValue = this.getOptionValue(option);
 
-            if(ObjectUtils.equals(optionValue, val)) {
+            if (ObjectUtils.equals(optionValue, val)) {
                 label = this.getOptionLabel(option);
                 break;
             }
@@ -379,12 +381,12 @@ export class MultiSelect extends Component {
         });
     }
 
-    getOptionValue(option) {
-        return this.props.optionLabel ? option : option.value;
+    getOptionLabel(option) {
+        return this.props.optionLabel ? ObjectUtils.resolveFieldData(option, this.props.optionLabel) :  option.label || option;
     }
 
-    getOptionLabel(option) {
-        return this.props.optionLabel ? ObjectUtils.resolveFieldData(option, this.props.optionLabel) : option.label;
+    getOptionValue(option) {
+        return this.props.optionValue ? ObjectUtils.resolveFieldData(option, this.props.optionValue) : option.value || option;
     }
 
     isEmpty() {

diff --git a/src/showcase/dropdown/DropdownDemo.js b/src/showcase/dropdown/DropdownDemo.js
@@ -126,7 +126,7 @@ import {Dropdown} from 'primereact/dropdown';
                         <h3>Getting Started</h3>
                         <p>Dropdown is used as a controlled component with <i>value</i> and <i>onChange</i> properties along with the options collection. There are two alternatives
                         of how to define the options property; One way is providing a collection of <i>SelectItem</i> instances having label-value pairs
-                        whereas other way is providing an array of arbitrary objects along with the <i>optionLabel</i> and <i>optionValue</i> properties to specify the field name of the option. SelectItem API is designed to have more
+                        whereas other way is providing an array of arbitrary objects along with the <i>optionLabel</i> and <i>optionValue</i> properties to specify the label/value field pair. SelectItem API is designed to have more
                         control on how the options are displayed such as grouping and disabling however in most cases an arbitrary object collection will suffice.</p>
 
                         <p><b>Options as SelectItems</b></p>

diff --git a/src/showcase/multiselect/MultiSelectDemo.js b/src/showcase/multiselect/MultiSelectDemo.js
@@ -108,7 +108,7 @@ import {MultiSelect} from 'primereact/multiselect';
             <h3>Getting Started</h3>
             <p>MultiSelect is used as a controlled component with <i>value</i> and <i>onChange</i> properties along with the options collection. There are two alternatives
             of how to define the options property; One way is providing a collection of <i>SelectItem</i> instances having label-value pairs
-            whereas other way is providing an array of arbitrary objects along with the <i>optionLabel</i> property to specify the field name of the option. SelectItem API is designed to have more
+            whereas other way is providing an array of arbitrary objects along with the <i>optionLabel</i> and <i>optionValue</i> properties to specify the label/value field pair. SelectItem API is designed to have more
             control on how the options are displayed such as grouping and disabling however in most cases an arbitrary object collection will suffice.</p>
 
             <p><b>Options as SelectItems</b></p>
@@ -149,9 +149,11 @@ const cities = [
 <CodeHighlight className="language-jsx">
 {`
 <MultiSelect optionLabel="name" value={this.state.cities} options={cities} onChange={(e) => this.setState({cities: e.value})} />
+<MultiSelect optionLabel="name" optionValue="code" value={this.state.cities} options={cities} onChange={(e) => this.setState({cities: e.value})} />
 
 `}
 </CodeHighlight>
+            <p>When <i>optionValue</i> is not defined, value of an option refers to the option object itself.</p>
 
             <h3>Custom Content</h3>
             <p>Label of an option is used as the display text of an item by default, for custom content support define an itemTemplate function that gets the option as a parameter and returns the content.</p>