Merge pull request #305 from uktrade/fix/select-option

fix: correctly select a <select> option
uktrade · Jun 19, 2020 · 793fc9e · 793fc9e
2 parents 922838b + d98b191
commit 793fc9e
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 42 deletions.
diff --git 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
@@ -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
@@ -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', () => {