diff --git a/docs/app/Demos/PowerSelectMultiple/CustomSelectedOption.js b/docs/app/Demos/PowerSelectMultiple/CustomSelectedOption.js
index cb4073b..f3b3b16 100644
--- a/docs/app/Demos/PowerSelectMultiple/CustomSelectedOption.js
+++ b/docs/app/Demos/PowerSelectMultiple/CustomSelectedOption.js
@@ -9,22 +9,11 @@ const CustomOptionComponnet = ({ option }) => (
);
-const CustomSelectedOptionComponent = ({ option, optionLabelPath, onCloseClick, select }) => (
-
-
- 
- {option[optionLabelPath]}
-
- {
- event.stopPropagation();
- onCloseClick({ option, select });
- }}
- >
- ×
-
-
+const CustomSelectedOptionComponent = ({ option }) => (
+
+
+ {option.name}
+
);
export default class ArrayOfObjectsDemo extends Component {
diff --git a/src/PowerSelectMultiple/SelectedOption.js b/src/PowerSelectMultiple/SelectedOption.js
index b49e274..b301a4a 100644
--- a/src/PowerSelectMultiple/SelectedOption.js
+++ b/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 ;
- }
if (typeof option === 'object') {
if (optionLabelPath) {
value = option[optionLabelPath];
@@ -27,7 +21,13 @@ export default function SelectedOption(props) {
}
return (
- {value}
+
+ {selectedOptionComponent ? (
+ renderComponent(selectedOptionComponent, { option, select })
+ ) : (
+ value
+ )}
+
{showOptionClose ? (
', () => {
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 {option.name};
+ },
+ });
+ expect(powerselect.renderedSelectedOptions.length).toBe(3);
+ expect(wrapper.find('span.customSelectedOption').length).toBe(3);
+ expect(
+ wrapper.containsAllMatchingElements([
+ {selectedOptions[0].name},
+ {selectedOptions[1].name},
+ {selectedOptions[2].name},
+ ])
+ ).toBeTruthy();
+ });
});