From d98b1915af1fd4a76ec37ac379f45be2325b4af4 Mon Sep 17 00:00:00 2001
From: Paul Gain <paul@javexconsulting.com>
Date: Wed, 17 Jun 2020 05:52:11 +0100
Subject: [PATCH] fix: correctly select a <select> option

---
 src/forms/elements/FieldSelect.jsx            | 19 ++++------
 .../__stories__/FieldSelect.stories.jsx       |  3 +-
 .../elements/__tests__/FieldSelect.test.jsx   | 35 ++++---------------
 3 files changed, 15 insertions(+), 42 deletions(-)

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}
           </option>
         )}
-        {options.map(({ label: optionLabel, value: optionValue }) => {
-          const additionalProps = {}
-          if (value === optionValue) {
-            additionalProps.selected = 'selected'
-          }
-          return (
-            <option key={optionValue} value={optionValue} {...additionalProps}>
-              {optionLabel}
-            </option>
-          )
-        })}
+        {options.map(({ label: optionLabel, value: optionValue }) => (
+          <option key={optionValue} value={optionValue}>
+            {optionLabel}
+          </option>
+        ))}
       </Select>
       {options.find((o) => o.value === value)?.children}
     </FieldWrapper>
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', () => (
         />
 
         <FieldSelect
-          name="testField"
+          name="testField2"
           label="Test select with children"
           hint="Some hint"
           emptyOption={text('emptyOption', 'Please select')}
diff --git a/src/forms/elements/__tests__/FieldSelect.test.jsx b/src/forms/elements/__tests__/FieldSelect.test.jsx
index 04a3c202..43cc4aa5 100644
--- a/src/forms/elements/__tests__/FieldSelect.test.jsx
+++ b/src/forms/elements/__tests__/FieldSelect.test.jsx
@@ -113,31 +113,6 @@ describe('FieldSelect', () => {
     })
   })
 
-  describe('when the field specifies a preselected option', () => {
-    let options
-
-    beforeAll(() => {
-      wrapper = mount(
-        <FormStateful>
-          <FieldSelect
-            name="testField"
-            initialValue="testOptionValue2"
-            options={[
-              { label: 'testOptionLabel1', value: 'testOptionValue1' },
-              { label: 'testOptionLabel2', value: 'testOptionValue2' },
-              { label: 'testOptionLabel3', value: 'testOptionValue3' },
-            ]}
-          />
-        </FormStateful>
-      )
-      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', () => {