[Breaking][Refactor] multi select selected option

docs/app/Demos/PowerSelectMultiple/CustomSelectedOption.js

@@ -9,22 +9,11 @@ const CustomOptionComponnet = ({ option }) => (
   </div>
 );
 
-const CustomSelectedOptionComponent = ({ option, optionLabelPath, onCloseClick, select }) => (
-  <li className="PowerSelectMultiple__SelectedOption">
-    <span className="PowerSelectMultiple__SelectedOption__Label">
-      <img className="flag" src={option.flag} />
-      {option[optionLabelPath]}
-    </span>
-    <span
-      className="PowerSelectMultiple__SelectedOption__Close"
-      onClick={event => {
-        event.stopPropagation();
-        onCloseClick({ option, select });
-      }}
-    >
-      ×
-    </span>
-  </li>
+const CustomSelectedOptionComponent = ({ option }) => (
+  <span>
+    <img className="flag" src={option.flag} />
+    {option.name}
+  </span>
 );
 
 export default class ArrayOfObjectsDemo extends Component {

src/PowerSelectMultiple/SelectedOption.js

@@ -1,4 +1,5 @@
 import React, { isValidElement, cloneElement } from 'react';
+import { renderComponent } from '../utils';
 
 export default function SelectedOption(props) {
   let {
@@ -10,13 +11,6 @@ export default function SelectedOption(props) {
     select,
   } = props;
   let value = null;
-  let SelectedOptionComponent = selectedOptionComponent;
-  if (isValidElement(SelectedOptionComponent)) {
-    return cloneElement(SelectedOptionComponent, props);
-  }
-  if (SelectedOptionComponent) {
-    return <SelectedOptionComponent {...props} />;
-  }
   if (typeof option === 'object') {
     if (optionLabelPath) {
       value = option[optionLabelPath];
@@ -27,7 +21,13 @@ export default function SelectedOption(props) {
   }
   return (
     <li className="PowerSelectMultiple__SelectedOption">
-      <span className="PowerSelectMultiple__SelectedOption__Label">{value}</span>
+      <span className="PowerSelectMultiple__SelectedOption__Label">
+        {selectedOptionComponent ? (
+          renderComponent(selectedOptionComponent, { option, select })
+        ) : (
+          value
+        )}
+      </span>
       {showOptionClose ? (
         <span
           className="PowerSelectMultiple__SelectedOption__Close"

src/PowerSelectMultiple/__tests__/PowerSelectMultiple-test.js

@@ -250,4 +250,23 @@ describe('<PowerSelectMultiple />', () => {
     expect(powerselect.renderedSelectedOptions.length).toBe(3);
     expect(powerselect.isOptionsPresentInDropdown()).toBeFalsy();
   });
+
+  it('should render custom selected option component when passed', () => {
+    let selectedOptions = countries.slice(0, 3);
+    const wrapper = powerselect.renderWithProps({
+      selected: selectedOptions,
+      selectedOptionComponent: ({ option }) => {
+        return <span className="customSelectedOption">{option.name}</span>;
+      },
+    });
+    expect(powerselect.renderedSelectedOptions.length).toBe(3);
+    expect(wrapper.find('span.customSelectedOption').length).toBe(3);
+    expect(
+      wrapper.containsAllMatchingElements([
+        <span className="customSelectedOption">{selectedOptions[0].name}</span>,
+        <span className="customSelectedOption">{selectedOptions[1].name}</span>,
+        <span className="customSelectedOption">{selectedOptions[2].name}</span>,
+      ])
+    ).toBeTruthy();
+  });
 });