Allow user to clear employer input

Author: textbook

src/Components/forms/inputs/EmployerDropDown.js

@@ -23,7 +23,11 @@ const EmployerDropDown = ({ arrayList, isEmpty, onChange, value }) => {
 
   const handleChange = e =>
     onChange({
-      target: { name: 'employer', type: 'text', value: e.value }
+      target: {
+        name: 'employer',
+        type: 'text',
+        value: e === null ? '' : e.value
+      }
     })
 
   return (
@@ -33,6 +37,7 @@ const EmployerDropDown = ({ arrayList, isEmpty, onChange, value }) => {
         className={isEmpty ? 'is-empty' : ''}
         inputId="employer"
         isSearchable
+        isClearable
         options={employersList}
         onChange={handleChange}
         onCreateOption={newEmployer => {

src/Components/forms/inputs/EmployerDropDown.test.js

@@ -165,6 +165,15 @@ describe('EmployerDropDown', () => {
     )
   })
 
+  it('can be cleared', async () => {
+    const onChange = jest.fn()
+    renderInForm({ employers: ['ABC', 'BBC', 'CBC'], onChange, value: 'BBC' })
+    await selectEvent.clearAll(screen.getByLabelText(/who is your employer/i))
+    expect(onChange).toHaveBeenCalledWith({
+      target: { name: 'employer', type: 'text', value: '' }
+    })
+  })
+
   /**
    * @param {HTMLElement} container
    */