Keep alphabetical order

Author: textbook

src/Components/forms/inputs/EmployerDropDown.js

@@ -26,13 +26,7 @@ const EmployerDropDown = ({ arrayList, isEmpty, onChange, value }) => {
         options={employersList}
         onChange={handleChange}
         onCreateOption={newEmployer => {
-          setEmployersList(oldList => [
-            ...oldList,
-            {
-              label: newEmployer,
-              value: newEmployer
-            }
-          ])
+          setEmployersList(oldList => insertedInto([...oldList], newEmployer))
           handleChange({ value: newEmployer })
         }}
         name="employer"
@@ -43,4 +37,17 @@ const EmployerDropDown = ({ arrayList, isEmpty, onChange, value }) => {
   )
 }
 
+const insertedInto = (employers, employer) => {
+  const canonical = employer.toLowerCase()
+  const entry = { label: employer, value: employer }
+  for (let index = 0; index < employers.length; index++) {
+    if (canonical < employers[index].value.toLowerCase()) {
+      employers.splice(index, 0, entry)
+      return employers
+    }
+  }
+  employers.push(entry)
+  return employers
+}
+
 export default EmployerDropDown

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

@@ -79,6 +79,30 @@ describe('EmployerDropDown', () => {
     )
   })
 
+  it('keeps the list in alphabetical order', async () => {
+    const { container, user } = renderInForm({
+      employers: ['ABC', 'BBC', 'CBC']
+    })
+    for (const employer of ['Boggle', 'Google', 'Aardvark']) {
+      await user.type(
+        screen.getByRole('combobox', { name: /employer/i }),
+        `${employer}{enter}`
+      )
+    }
+    await user.type(
+      screen.getByRole('combobox', { name: /employer/i }),
+      '{delete}'
+    )
+    expect(renderedItems(container)).toEqual([
+      'Aardvark',
+      'ABC',
+      'BBC',
+      'Boggle',
+      'CBC',
+      'Google'
+    ])
+  })
+
   it('shows the expected values in AC', async () => {
     const { user } = renderInForm({
       employers: [
@@ -120,6 +144,16 @@ describe('EmployerDropDown', () => {
       expect(screen.getByText(employer)).toBeInTheDocument()
     )
   })
+
+  /**
+   * @param {HTMLElement} container
+   */
+  const renderedItems = container => {
+    const divs = Array.from(container.getElementsByTagName('div'))
+    return divs
+      .filter(el => el.getAttribute('aria-disabled') === 'false')
+      .map(el => el.textContent)
+  }
 })
 const renderInForm = ({
   employers = [],