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.