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', () => {