diff --git a/packages/pf3-component-mapper/demo/demo-schemas/sandbox.js b/packages/pf3-component-mapper/demo/demo-schemas/sandbox.js
index 994436ab4..774157bdf 100644
--- a/packages/pf3-component-mapper/demo/demo-schemas/sandbox.js
+++ b/packages/pf3-component-mapper/demo/demo-schemas/sandbox.js
@@ -261,6 +261,7 @@ const output = {
title: 'Dropdown',
dataType: 'string',
component: components.SELECT_COMPONENT,
+ initialValue: [ '1' ],
isSearchable: true,
options: [
{
diff --git a/packages/pf3-component-mapper/src/form-fields/select/index.js b/packages/pf3-component-mapper/src/form-fields/select/index.js
index 28ba4ab6f..379009d29 100644
--- a/packages/pf3-component-mapper/src/form-fields/select/index.js
+++ b/packages/pf3-component-mapper/src/form-fields/select/index.js
@@ -86,10 +86,12 @@ class Select extends Component {
loadingMessage,
simpleValue,
options: _options, // catch options from props, if they are undefined (bcs they would overwrite the state)
+ pluckSingleValue,
...rest
} = this.props;
const { options, isLoading } = this.state;
+ const { value, ...inputRest } = input;
if (isLoading) {
return ;
}
+ const selectValue = pluckSingleValue ? rest.multi ? value : Array.isArray(value) && value[0] ? value[0] : value : value;
+
return item.value)
: option ? option.value : undefined)
: input.onChange(option) }
- value={ simpleValue ? options.filter(({ value }) => rest.multi ? input.value.includes(value) : value === input.value) : input.value }
+ value={ simpleValue ? options.filter(({ value }) => rest.multi ? input.value.includes(value) : isEqual(value, selectValue)) : selectValue }
{ ...rest }
/>;
}
@@ -135,6 +139,7 @@ Select.propTypes = {
value: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
+ PropTypes.array,
]),
})),
invalid: PropTypes.oneOfType([
@@ -156,6 +161,7 @@ Select.propTypes = {
isDisabled: PropTypes.bool,
isReadOnly: PropTypes.bool,
loadingMessage: PropTypes.string,
+ pluckSingleValue: PropTypes.bool,
};
Select.defaultProps = {
@@ -164,6 +170,7 @@ Select.defaultProps = {
},
loadingMessage: 'Loading...',
simpleValue: true,
+ pluckSingleValue: true,
};
export default Select;
diff --git a/packages/pf3-component-mapper/src/tests/form-fields/__snapshots__/select.test.js.snap b/packages/pf3-component-mapper/src/tests/form-fields/__snapshots__/select.test.js.snap
index 89e4c8092..818060b89 100644
--- a/packages/pf3-component-mapper/src/tests/form-fields/__snapshots__/select.test.js.snap
+++ b/packages/pf3-component-mapper/src/tests/form-fields/__snapshots__/select.test.js.snap
@@ -114,6 +114,7 @@ exports[` should mount Async correctly 1`] = `
},
]
}
+ pluckSingleValue={true}
simpleValue={true}
>
', () => {
let initialProps;
@@ -179,5 +180,23 @@ describe('', () => {
});
});
});
+
+ it('should pick correct value for single select when passed array', () => {
+ const wrapper = mount();
+ expect(wrapper.find(ReactSelect).instance().state.value).toEqual([{ value: 2, label: 'option 2' }]);
+ });
+
+ it('should pick correct array value for single select when passed array', () => {
+ let wrapper = mount();
+ expect(wrapper.find(ReactSelect).instance().state.value).toEqual([]);
+
+ wrapper = mount();
+ expect(wrapper.find(ReactSelect).instance().state.value).toEqual([{ label: 'array options', value: [ 2 ]}]);
+ });
});
});
diff --git a/packages/react-renderer-demo/src/docs-components/pf3-select.md b/packages/react-renderer-demo/src/docs-components/pf3-select.md
index 9b3908644..61608a2ab 100644
--- a/packages/react-renderer-demo/src/docs-components/pf3-select.md
+++ b/packages/react-renderer-demo/src/docs-components/pf3-select.md
@@ -1,3 +1,11 @@
+### Select
+
+There are some additional props for PF3 variant to match PF3 requirements.
+
+|prop name|type|default value|description|
+|---------|----|-------------|-----------|
+|pluckSingleValue|`bool`|`true`|If a value is an array, component will pick its first item and set it as a new value. This will override the value in state from `[2, 4, 5]` to `2` for example.|
+
### Async Select
PF3 Select allows to load the options asynchronously.