Fixed select title for simple value variant.

Author: Hyperkid123

packages/common/package.json

@@ -48,6 +48,7 @@
   "dependencies": {
     "@babel/plugin-proposal-class-properties": "^7.1.0",
     "clsx": "^1.0.4",
+    "lodash": "^4.17.15",
     "react-select": "^3.0.8"
   },
   "peerDependencies": {

packages/common/src/select/index.js

@@ -2,11 +2,12 @@ import React, { Component } from 'react';
 import ReactSelect from 'react-select';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
+import isEqual from 'lodash/isEqual';
 
 const getSelectValue = (stateValue, simpleValue, isMulti, allOptions) => simpleValue
   ? allOptions.filter(({ value }) => isMulti
     ? stateValue.includes(value)
-    : value === stateValue)
+    : isEqual(value, stateValue))
   : stateValue;
 
 const handleSelectChange = (option, simpleValue, isMulti, onChange) => {
@@ -20,9 +21,11 @@ const handleSelectChange = (option, simpleValue, isMulti, onChange) => {
 
 class Select extends Component {
   render() {
-    const { input, invalid, classNamePrefix, options, simpleValue, isMulti, ...props } = this.props;
+    const { input, invalid, classNamePrefix, options, simpleValue, isMulti, pluckSingleValue, ...props } = this.props;
     const { value, onChange, ...inputProps } = input;
 
+    const selectValue = pluckSingleValue ? isMulti ? value : Array.isArray(value) && value[0] ? value[0] : value : value;
+
     return (
       <ReactSelect
         className={ clsx(classNamePrefix, {
@@ -33,7 +36,7 @@ class Select extends Component {
         classNamePrefix={ classNamePrefix }
         options={ options }
         isMulti={ isMulti }
-        value={ getSelectValue(value, simpleValue, isMulti, options) }
+        value={ getSelectValue(selectValue, simpleValue, isMulti, options) }
         onChange={ option => handleSelectChange(option, simpleValue, isMulti, onChange) }
       />
     );
@@ -47,12 +50,14 @@ Select.propTypes = {
   invalid: PropTypes.bool,
   simpleValue: PropTypes.bool,
   isMulti: PropTypes.bool,
+  pluckSingleValue: PropTypes.bool
 };
 
 Select.defaultProps = {
   options: [],
   invalid: false,
   simpleValue: true,
+  pluckSingleValue: true,
 };
 
 const DataDrivenSelect = ({ multi, ...props }) => {

packages/pf3-component-mapper/src/form-fields/select/index.js

@@ -187,7 +187,7 @@ Select.defaultProps = {
 
 export default Select;
 
-const getDropdownText = (value, placeholder) => {
+const getDropdownText = (value, placeholder, options) => {
   if (Array.isArray(value)) {
     if (value.length === 0) {
       return [ placeholder, true ];
@@ -197,7 +197,7 @@ const getDropdownText = (value, placeholder) => {
       return [ value.map(({ label }) => label).join(', '), false ];
     }
 
-    return [ value.join(', '), false ];
+    return [ value.map(item => options.find(({ value }) => value === item).label).join(', '), false ];
   }
 
   if (typeof value === 'object') {
@@ -208,7 +208,7 @@ const getDropdownText = (value, placeholder) => {
     return [ placeholder, true ];
   }
 
-  return [ value, false ];
+  return [ options.find(option => option.value === value).label, false ];
 };
 
 class SearchInput extends Component {
@@ -217,12 +217,7 @@ class SearchInput extends Component {
     this.inputRef.current.focus();
   }
 
-  componentDidUpdate(prevProps, prevState) {
-    console.log(prevProps, this.props);
-  }
-
   shouldComponentUpdate(nextProps) {
-
     return nextProps.value !== this.props.value;
   }
 
@@ -277,7 +272,7 @@ export class P3Select extends Component {
   render () {
     const { input, ...props } = this.props;
     const { isOpen } = this.state;
-    const [ title, isPlaceholder ] = getDropdownText(input.value, props.placeholder);
+    const [ title, isPlaceholder ] = getDropdownText(input.value, props.placeholder, props.options);
     if (props.isSearchable) {
       const searchableInput = {
         ...input,