diff --git a/src/forms/elements/FieldSelect.jsx b/src/forms/elements/FieldSelect.jsx index 94a5b97e..9658f0ff 100644 --- a/src/forms/elements/FieldSelect.jsx +++ b/src/forms/elements/FieldSelect.jsx @@ -32,7 +32,8 @@ const FieldSelect = ({ meta={{ error, touched }} input={{ id: name, - defaultValue: value, + value, + readOnly: true, ...rest, }} > @@ -41,17 +42,11 @@ const FieldSelect = ({ {emptyOption} )} - {options.map(({ label: optionLabel, value: optionValue }) => { - const additionalProps = {} - if (value === optionValue) { - additionalProps.selected = 'selected' - } - return ( - - ) - })} + {options.map(({ label: optionLabel, value: optionValue }) => ( + + ))} {options.find((o) => o.value === value)?.children} diff --git a/src/forms/elements/__stories__/FieldSelect.stories.jsx b/src/forms/elements/__stories__/FieldSelect.stories.jsx index 6f008f04..a36002ec 100644 --- a/src/forms/elements/__stories__/FieldSelect.stories.jsx +++ b/src/forms/elements/__stories__/FieldSelect.stories.jsx @@ -18,6 +18,7 @@ storiesOf('Forms', module).add('FieldSelect', () => ( name="testField" label="Test select" hint="Some hint" + initialValue={text('Initial value', 'testOptionValue2')} emptyOption={text('emptyOption', 'Please select')} options={object('options', [ { label: 'testOptionLabel1', value: 'testOptionValue1' }, @@ -32,7 +33,7 @@ storiesOf('Forms', module).add('FieldSelect', () => ( /> { }) }) - describe('when the field specifies a preselected option', () => { - let options - - beforeAll(() => { - wrapper = mount( - - - - ) - options = wrapper.find('option') - }) - - test('should preselect the second option', () => { - expect(options.at(2).prop('selected')).toEqual('selected') - }) - }) - describe('when the field validation fails', () => { beforeAll(() => { wrapper = mount( @@ -200,10 +175,12 @@ describe('FieldSelect', () => { .simulate('change', { target: { value: 'testOptionValue2' } }) }) - test('should update field value', () => { - expect(wrapper.find('select').prop('defaultValue')).toEqual( - 'testOptionValue2' - ) + test('should update the field value', () => { + expect(wrapper.find('select').prop('value')).toEqual('testOptionValue2') + }) + + test('should set the readonly flag', () => { + expect(wrapper.find('select').prop('readOnly')).toEqual(true) }) test('should update value in form state', () => {