use onChange intead of employerOnchange

Author: youssef-910

src/Components/forms/inputs/EmployerDropDown.js

@@ -2,12 +2,18 @@ import React, { useState } from 'react'
 import { Label } from 'reactstrap'
 import Select from 'react-select'
 
-const EmployerDropDown = ({ employerOnChange, isEmpty, arrayList }) => {
+const EmployerDropDown = ({ onChange, isEmpty, arrayList, name }) => {
   const [value, setValue] = useState('')
   const employerSorter = (a, b) => {
     const aIndex = a.value.toLowerCase().indexOf(value.toLowerCase())
     const bIndex = b.value.toLowerCase().indexOf(value.toLowerCase())
-    return aIndex > bIndex ? 1 : aIndex < bIndex ? -1 : 0
+    return a.value === 'Other' || b.value === 'Other'
+      ? 1
+      : aIndex > bIndex
+      ? 1
+      : aIndex < bIndex
+      ? -1
+      : 0
   }
   const employersList = arrayList
     .map(item => ({
@@ -16,13 +22,19 @@ const EmployerDropDown = ({ employerOnChange, isEmpty, arrayList }) => {
     }))
     .sort(employerSorter)
   return (
-    <div className="form-group" data-testId="form-group">
-      <Label htmlFor="employer">Who is your employer?</Label>
+    <div className="form-group" data-testid="form-group">
+      <Label htmlFor="employer">"Who is your employer? *"</Label>
       <Select
+        className={`form-control ${isEmpty && 'is-empty'}`}
+        noOptionsMessage={() => 'Employer not found? Please select "Other".'}
         inputId="employer"
         onInputChange={inputVal => setValue(inputVal)}
         options={employersList}
-        onChange={e => employerOnChange(e.value)}
+        onChange={e =>
+          onChange({
+            target: { name: 'employer', type: 'text', value: e.value }
+          })
+        }
         placeholder="Type your employer name here"
       />
     </div>