From 0528bb232e6cbcbbe976bb4ce675f90920b652b1 Mon Sep 17 00:00:00 2001
From: Alejandro Sanchez <emailforasr@gmail.com>
Date: Thu, 16 Nov 2023 12:43:10 -0800
Subject: [PATCH] Fix failing tests

---
 .../project/add/AddProjectForm.test.tsx       |  20 +-
 .../AddProjectContainer.test.tsx.snap         | 173 +++++---
 .../AddProjectForm.test.tsx.snap              | 406 ++++++++++++------
 3 files changed, 401 insertions(+), 198 deletions(-)

diff --git a/source/frontend/src/features/mapSideBar/project/add/AddProjectForm.test.tsx b/source/frontend/src/features/mapSideBar/project/add/AddProjectForm.test.tsx
index 72a9b733c9..308640fecf 100644
--- a/source/frontend/src/features/mapSideBar/project/add/AddProjectForm.test.tsx
+++ b/source/frontend/src/features/mapSideBar/project/add/AddProjectForm.test.tsx
@@ -88,11 +88,13 @@ describe('AddProjectForm component', () => {
       getProductCodeTextBox: (index: number) =>
         utils.container.querySelector(`input[name="products.${index}.code"]`) as HTMLInputElement,
       getCostTypeDropdown: () =>
-        utils.container.querySelector(`select[name="costTypeCode"]`) as HTMLSelectElement,
+        utils.container.querySelector(`[name="typeahead-select-costTypeCode"]`) as HTMLElement,
       getWorkActivityDropdown: () =>
-        utils.container.querySelector(`select[name="workActivityCode"]`) as HTMLSelectElement,
+        utils.container.querySelector(`[name="typeahead-select-workActivityCode"]`) as HTMLElement,
       getBusinessFunctionDropdown: () =>
-        utils.container.querySelector(`select[name="businessFunctionCode"]`) as HTMLSelectElement,
+        utils.container.querySelector(
+          `[name="typeahead-select-businessFunctionCode"]`,
+        ) as HTMLElement,
     };
   };
 
@@ -131,7 +133,7 @@ describe('AddProjectForm component', () => {
 
     const input = getNameTextbox();
     const number = getNumberTextbox();
-    const select = getRegionDropdown();
+    const region = getRegionDropdown();
     const status = getStatusDropdown();
     const summary = getSummaryTextbox();
     const costType = getCostTypeDropdown();
@@ -139,7 +141,7 @@ describe('AddProjectForm component', () => {
     const businessFunction = getBusinessFunctionDropdown();
 
     expect(input).toBeVisible();
-    expect(select).toBeVisible();
+    expect(region).toBeVisible();
     expect(number).toBeVisible();
     expect(status).toBeVisible();
     expect(summary).toBeVisible();
@@ -147,12 +149,12 @@ describe('AddProjectForm component', () => {
     expect(input.tagName).toBe('INPUT');
     expect(number.tagName).toBe('INPUT');
     expect(summary.tagName).toBe('TEXTAREA');
-    expect(select.tagName).toBe('SELECT');
+    expect(region.tagName).toBe('SELECT');
     expect(status.tagName).toBe('SELECT');
 
-    expect(costType.tagName).toBe('SELECT');
-    expect(workActivity.tagName).toBe('SELECT');
-    expect(businessFunction.tagName).toBe('SELECT');
+    expect(costType.tagName).toBe('INPUT');
+    expect(workActivity.tagName).toBe('INPUT');
+    expect(businessFunction.tagName).toBe('INPUT');
   });
 
   it('should validate character limits', async () => {
diff --git a/source/frontend/src/features/mapSideBar/project/add/__snapshots__/AddProjectContainer.test.tsx.snap b/source/frontend/src/features/mapSideBar/project/add/__snapshots__/AddProjectContainer.test.tsx.snap
index ef8a1f86b6..e9312ce892 100644
--- a/source/frontend/src/features/mapSideBar/project/add/__snapshots__/AddProjectContainer.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/project/add/__snapshots__/AddProjectContainer.test.tsx.snap
@@ -80,7 +80,7 @@ exports[`AddProjectContainer component renders as expected 1`] = `
       class="c2"
     />
   </div>
-  .c9.btn {
+  .c10.btn {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -110,49 +110,49 @@ exports[`AddProjectContainer component renders as expected 1`] = `
   cursor: pointer;
 }
 
-.c9.btn:hover {
+.c10.btn:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   opacity: 0.8;
 }
 
-.c9.btn:focus {
+.c10.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
   outline-offset: 1px;
   box-shadow: none;
 }
 
-.c9.btn.btn-primary {
+.c10.btn.btn-primary {
   border: none;
 }
 
-.c9.btn.btn-secondary {
+.c10.btn.btn-secondary {
   background: none;
 }
 
-.c9.btn.btn-info {
+.c10.btn.btn-info {
   border: none;
   background: none;
   padding-left: 0.6rem;
   padding-right: 0.6rem;
 }
 
-.c9.btn.btn-info:hover,
-.c9.btn.btn-info:active,
-.c9.btn.btn-info:focus {
+.c10.btn.btn-info:hover,
+.c10.btn.btn-info:active,
+.c10.btn.btn-info:focus {
   background: none;
 }
 
-.c9.btn.btn-light {
+.c10.btn.btn-light {
   border: none;
 }
 
-.c9.btn.btn-dark {
+.c10.btn.btn-dark {
   border: none;
 }
 
-.c9.btn.btn-link {
+.c10.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
   background: none;
@@ -173,9 +173,9 @@ exports[`AddProjectContainer component renders as expected 1`] = `
   padding: 0;
 }
 
-.c9.btn.btn-link:hover,
-.c9.btn.btn-link:active,
-.c9.btn.btn-link:focus {
+.c10.btn.btn-link:hover,
+.c10.btn.btn-link:active,
+.c10.btn.btn-link:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -184,14 +184,14 @@ exports[`AddProjectContainer component renders as expected 1`] = `
   outline: none;
 }
 
-.c9.btn.btn-link:disabled,
-.c9.btn.btn-link.disabled {
+.c10.btn.btn-link:disabled,
+.c10.btn.btn-link.disabled {
   background: none;
   pointer-events: none;
 }
 
-.c9.btn:disabled,
-.c9.btn:disabled:hover {
+.c10.btn:disabled,
+.c10.btn:disabled:hover {
   box-shadow: none;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -202,15 +202,15 @@ exports[`AddProjectContainer component renders as expected 1`] = `
   opacity: 0.65;
 }
 
-.c9.Button .Button__icon {
+.c10.Button .Button__icon {
   margin-right: 1.6rem;
 }
 
-.c9.Button--icon-only:focus {
+.c10.Button--icon-only:focus {
   outline: none;
 }
 
-.c9.Button--icon-only .Button__icon {
+.c10.Button--icon-only .Button__icon {
   margin-right: 0;
 }
 
@@ -228,6 +228,10 @@ exports[`AddProjectContainer component renders as expected 1`] = `
   width: 100%;
 }
 
+.c9 button.close {
+  font-size: 2.4rem;
+}
+
 .c4 {
   font-weight: bold;
   border-bottom: 0.2rem solid;
@@ -561,19 +565,40 @@ exports[`AddProjectContainer component renders as expected 1`] = `
                   class="c7 text-left col"
                 >
                   <div
-                    class="form-group"
+                    class="c9 form-group"
+                    data-testid="typeahead-select-costTypeCode"
                   >
-                    <select
-                      class="form-select form-control"
-                      id="input-costTypeCode"
-                      name="costTypeCode"
+                    <div
+                      class="rbt"
+                      style="outline: none; position: relative;"
+                      tabindex="-1"
                     >
-                      <option
-                        value=""
+                      <div
+                        style="display: flex; flex: 1; height: 100%; position: relative;"
                       >
-                        Select...
-                      </option>
-                    </select>
+                        <input
+                          aria-autocomplete="both"
+                          aria-expanded="false"
+                          aria-haspopup="listbox"
+                          autocomplete="off"
+                          class="rbt-input-main form-control rbt-input"
+                          id="typeahead-select-costTypeCode"
+                          name="typeahead-select-costTypeCode"
+                          placeholder="Type to search..."
+                          role="combobox"
+                          type="text"
+                          value=""
+                        />
+                        <input
+                          aria-hidden="true"
+                          class="rbt-input-hint"
+                          readonly=""
+                          style="background-color: transparent; border-color: transparent; box-shadow: none; color: rgba(0, 0, 0, 0.35); left: 0px; pointer-events: none; position: absolute; top: 0px; width: 100%; border-style: inset inset inset inset; border-width: 2px 2px 2px 2px; line-height: normal; padding: 1px 1px 1px 1px;"
+                          tabindex="-1"
+                          value=""
+                        />
+                      </div>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -593,19 +618,40 @@ exports[`AddProjectContainer component renders as expected 1`] = `
                   class="c7 text-left col"
                 >
                   <div
-                    class="form-group"
+                    class="c9 form-group"
+                    data-testid="typeahead-select-workActivityCode"
                   >
-                    <select
-                      class="form-select form-control"
-                      id="input-workActivityCode"
-                      name="workActivityCode"
+                    <div
+                      class="rbt"
+                      style="outline: none; position: relative;"
+                      tabindex="-1"
                     >
-                      <option
-                        value=""
+                      <div
+                        style="display: flex; flex: 1; height: 100%; position: relative;"
                       >
-                        Select...
-                      </option>
-                    </select>
+                        <input
+                          aria-autocomplete="both"
+                          aria-expanded="false"
+                          aria-haspopup="listbox"
+                          autocomplete="off"
+                          class="rbt-input-main form-control rbt-input"
+                          id="typeahead-select-workActivityCode"
+                          name="typeahead-select-workActivityCode"
+                          placeholder="Type to search..."
+                          role="combobox"
+                          type="text"
+                          value=""
+                        />
+                        <input
+                          aria-hidden="true"
+                          class="rbt-input-hint"
+                          readonly=""
+                          style="background-color: transparent; border-color: transparent; box-shadow: none; color: rgba(0, 0, 0, 0.35); left: 0px; pointer-events: none; position: absolute; top: 0px; width: 100%; border-style: inset inset inset inset; border-width: 2px 2px 2px 2px; line-height: normal; padding: 1px 1px 1px 1px;"
+                          tabindex="-1"
+                          value=""
+                        />
+                      </div>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -625,19 +671,40 @@ exports[`AddProjectContainer component renders as expected 1`] = `
                   class="c7 text-left col"
                 >
                   <div
-                    class="form-group"
+                    class="c9 form-group"
+                    data-testid="typeahead-select-businessFunctionCode"
                   >
-                    <select
-                      class="form-select form-control"
-                      id="input-businessFunctionCode"
-                      name="businessFunctionCode"
+                    <div
+                      class="rbt"
+                      style="outline: none; position: relative;"
+                      tabindex="-1"
                     >
-                      <option
-                        value=""
+                      <div
+                        style="display: flex; flex: 1; height: 100%; position: relative;"
                       >
-                        Select...
-                      </option>
-                    </select>
+                        <input
+                          aria-autocomplete="both"
+                          aria-expanded="false"
+                          aria-haspopup="listbox"
+                          autocomplete="off"
+                          class="rbt-input-main form-control rbt-input"
+                          id="typeahead-select-businessFunctionCode"
+                          name="typeahead-select-businessFunctionCode"
+                          placeholder="Type to search..."
+                          role="combobox"
+                          type="text"
+                          value=""
+                        />
+                        <input
+                          aria-hidden="true"
+                          class="rbt-input-hint"
+                          readonly=""
+                          style="background-color: transparent; border-color: transparent; box-shadow: none; color: rgba(0, 0, 0, 0.35); left: 0px; pointer-events: none; position: absolute; top: 0px; width: 100%; border-style: inset inset inset inset; border-width: 2px 2px 2px 2px; line-height: normal; padding: 1px 1px 1px 1px;"
+                          tabindex="-1"
+                          value=""
+                        />
+                      </div>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -663,7 +730,7 @@ exports[`AddProjectContainer component renders as expected 1`] = `
               class="collapse show"
             >
               <button
-                class="c9 Button btn btn-link"
+                class="c10 Button btn btn-link"
                 type="button"
               >
                 <div
diff --git a/source/frontend/src/features/mapSideBar/project/add/__snapshots__/AddProjectForm.test.tsx.snap b/source/frontend/src/features/mapSideBar/project/add/__snapshots__/AddProjectForm.test.tsx.snap
index 1bd3d9e8ab..6dd083938f 100644
--- a/source/frontend/src/features/mapSideBar/project/add/__snapshots__/AddProjectForm.test.tsx.snap
+++ b/source/frontend/src/features/mapSideBar/project/add/__snapshots__/AddProjectForm.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`AddProjectForm component renders as expected 1`] = `
     class="Toastify"
   />
   <div />
-  .c6.btn {
+  .c7.btn {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -36,49 +36,49 @@ exports[`AddProjectForm component renders as expected 1`] = `
   cursor: pointer;
 }
 
-.c6.btn:hover {
+.c7.btn:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   opacity: 0.8;
 }
 
-.c6.btn:focus {
+.c7.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
   outline-offset: 1px;
   box-shadow: none;
 }
 
-.c6.btn.btn-primary {
+.c7.btn.btn-primary {
   border: none;
 }
 
-.c6.btn.btn-secondary {
+.c7.btn.btn-secondary {
   background: none;
 }
 
-.c6.btn.btn-info {
+.c7.btn.btn-info {
   border: none;
   background: none;
   padding-left: 0.6rem;
   padding-right: 0.6rem;
 }
 
-.c6.btn.btn-info:hover,
-.c6.btn.btn-info:active,
-.c6.btn.btn-info:focus {
+.c7.btn.btn-info:hover,
+.c7.btn.btn-info:active,
+.c7.btn.btn-info:focus {
   background: none;
 }
 
-.c6.btn.btn-light {
+.c7.btn.btn-light {
   border: none;
 }
 
-.c6.btn.btn-dark {
+.c7.btn.btn-dark {
   border: none;
 }
 
-.c6.btn.btn-link {
+.c7.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
   background: none;
@@ -99,9 +99,9 @@ exports[`AddProjectForm component renders as expected 1`] = `
   padding: 0;
 }
 
-.c6.btn.btn-link:hover,
-.c6.btn.btn-link:active,
-.c6.btn.btn-link:focus {
+.c7.btn.btn-link:hover,
+.c7.btn.btn-link:active,
+.c7.btn.btn-link:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -110,14 +110,14 @@ exports[`AddProjectForm component renders as expected 1`] = `
   outline: none;
 }
 
-.c6.btn.btn-link:disabled,
-.c6.btn.btn-link.disabled {
+.c7.btn.btn-link:disabled,
+.c7.btn.btn-link.disabled {
   background: none;
   pointer-events: none;
 }
 
-.c6.btn:disabled,
-.c6.btn:disabled:hover {
+.c7.btn:disabled,
+.c7.btn:disabled:hover {
   box-shadow: none;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -128,18 +128,22 @@ exports[`AddProjectForm component renders as expected 1`] = `
   opacity: 0.65;
 }
 
-.c6.Button .Button__icon {
+.c7.Button .Button__icon {
   margin-right: 1.6rem;
 }
 
-.c6.Button--icon-only:focus {
+.c7.Button--icon-only:focus {
   outline: none;
 }
 
-.c6.Button--icon-only .Button__icon {
+.c7.Button--icon-only .Button__icon {
   margin-right: 0;
 }
 
+.c6 button.close {
+  font-size: 2.4rem;
+}
+
 .c2 {
   font-weight: bold;
   border-bottom: 0.2rem solid;
@@ -443,19 +447,40 @@ exports[`AddProjectForm component renders as expected 1`] = `
               class="c4 text-left col"
             >
               <div
-                class="form-group"
+                class="c6 form-group"
+                data-testid="typeahead-select-costTypeCode"
               >
-                <select
-                  class="form-select form-control"
-                  id="input-costTypeCode"
-                  name="costTypeCode"
+                <div
+                  class="rbt"
+                  style="outline: none; position: relative;"
+                  tabindex="-1"
                 >
-                  <option
-                    value=""
+                  <div
+                    style="display: flex; flex: 1; height: 100%; position: relative;"
                   >
-                    Select...
-                  </option>
-                </select>
+                    <input
+                      aria-autocomplete="both"
+                      aria-expanded="false"
+                      aria-haspopup="listbox"
+                      autocomplete="off"
+                      class="rbt-input-main form-control rbt-input"
+                      id="typeahead-select-costTypeCode"
+                      name="typeahead-select-costTypeCode"
+                      placeholder="Type to search..."
+                      role="combobox"
+                      type="text"
+                      value=""
+                    />
+                    <input
+                      aria-hidden="true"
+                      class="rbt-input-hint"
+                      readonly=""
+                      style="background-color: transparent; border-color: transparent; box-shadow: none; color: rgba(0, 0, 0, 0.35); left: 0px; pointer-events: none; position: absolute; top: 0px; width: 100%; border-style: inset inset inset inset; border-width: 2px 2px 2px 2px; line-height: normal; padding: 1px 1px 1px 1px;"
+                      tabindex="-1"
+                      value=""
+                    />
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -475,19 +500,40 @@ exports[`AddProjectForm component renders as expected 1`] = `
               class="c4 text-left col"
             >
               <div
-                class="form-group"
+                class="c6 form-group"
+                data-testid="typeahead-select-workActivityCode"
               >
-                <select
-                  class="form-select form-control"
-                  id="input-workActivityCode"
-                  name="workActivityCode"
+                <div
+                  class="rbt"
+                  style="outline: none; position: relative;"
+                  tabindex="-1"
                 >
-                  <option
-                    value=""
+                  <div
+                    style="display: flex; flex: 1; height: 100%; position: relative;"
                   >
-                    Select...
-                  </option>
-                </select>
+                    <input
+                      aria-autocomplete="both"
+                      aria-expanded="false"
+                      aria-haspopup="listbox"
+                      autocomplete="off"
+                      class="rbt-input-main form-control rbt-input"
+                      id="typeahead-select-workActivityCode"
+                      name="typeahead-select-workActivityCode"
+                      placeholder="Type to search..."
+                      role="combobox"
+                      type="text"
+                      value=""
+                    />
+                    <input
+                      aria-hidden="true"
+                      class="rbt-input-hint"
+                      readonly=""
+                      style="background-color: transparent; border-color: transparent; box-shadow: none; color: rgba(0, 0, 0, 0.35); left: 0px; pointer-events: none; position: absolute; top: 0px; width: 100%; border-style: inset inset inset inset; border-width: 2px 2px 2px 2px; line-height: normal; padding: 1px 1px 1px 1px;"
+                      tabindex="-1"
+                      value=""
+                    />
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -507,19 +553,40 @@ exports[`AddProjectForm component renders as expected 1`] = `
               class="c4 text-left col"
             >
               <div
-                class="form-group"
+                class="c6 form-group"
+                data-testid="typeahead-select-businessFunctionCode"
               >
-                <select
-                  class="form-select form-control"
-                  id="input-businessFunctionCode"
-                  name="businessFunctionCode"
+                <div
+                  class="rbt"
+                  style="outline: none; position: relative;"
+                  tabindex="-1"
                 >
-                  <option
-                    value=""
+                  <div
+                    style="display: flex; flex: 1; height: 100%; position: relative;"
                   >
-                    Select...
-                  </option>
-                </select>
+                    <input
+                      aria-autocomplete="both"
+                      aria-expanded="false"
+                      aria-haspopup="listbox"
+                      autocomplete="off"
+                      class="rbt-input-main form-control rbt-input"
+                      id="typeahead-select-businessFunctionCode"
+                      name="typeahead-select-businessFunctionCode"
+                      placeholder="Type to search..."
+                      role="combobox"
+                      type="text"
+                      value=""
+                    />
+                    <input
+                      aria-hidden="true"
+                      class="rbt-input-hint"
+                      readonly=""
+                      style="background-color: transparent; border-color: transparent; box-shadow: none; color: rgba(0, 0, 0, 0.35); left: 0px; pointer-events: none; position: absolute; top: 0px; width: 100%; border-style: inset inset inset inset; border-width: 2px 2px 2px 2px; line-height: normal; padding: 1px 1px 1px 1px;"
+                      tabindex="-1"
+                      value=""
+                    />
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -545,7 +612,7 @@ exports[`AddProjectForm component renders as expected 1`] = `
           class="collapse show"
         >
           <button
-            class="c6 Button btn btn-link"
+            class="c7 Button btn btn-link"
             type="button"
           >
             <div
@@ -569,7 +636,7 @@ exports[`AddProjectForm component renders as expected with existing data 1`] = `
     class="Toastify"
   />
   <div />
-  .c6.btn {
+  .c7.btn {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -599,49 +666,49 @@ exports[`AddProjectForm component renders as expected with existing data 1`] = `
   cursor: pointer;
 }
 
-.c6.btn:hover {
+.c7.btn:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   opacity: 0.8;
 }
 
-.c6.btn:focus {
+.c7.btn:focus {
   outline-width: 0.4rem;
   outline-style: solid;
   outline-offset: 1px;
   box-shadow: none;
 }
 
-.c6.btn.btn-primary {
+.c7.btn.btn-primary {
   border: none;
 }
 
-.c6.btn.btn-secondary {
+.c7.btn.btn-secondary {
   background: none;
 }
 
-.c6.btn.btn-info {
+.c7.btn.btn-info {
   border: none;
   background: none;
   padding-left: 0.6rem;
   padding-right: 0.6rem;
 }
 
-.c6.btn.btn-info:hover,
-.c6.btn.btn-info:active,
-.c6.btn.btn-info:focus {
+.c7.btn.btn-info:hover,
+.c7.btn.btn-info:active,
+.c7.btn.btn-info:focus {
   background: none;
 }
 
-.c6.btn.btn-light {
+.c7.btn.btn-light {
   border: none;
 }
 
-.c6.btn.btn-dark {
+.c7.btn.btn-dark {
   border: none;
 }
 
-.c6.btn.btn-link {
+.c7.btn.btn-link {
   font-size: 1.6rem;
   font-weight: 400;
   background: none;
@@ -662,9 +729,9 @@ exports[`AddProjectForm component renders as expected with existing data 1`] = `
   padding: 0;
 }
 
-.c6.btn.btn-link:hover,
-.c6.btn.btn-link:active,
-.c6.btn.btn-link:focus {
+.c7.btn.btn-link:hover,
+.c7.btn.btn-link:active,
+.c7.btn.btn-link:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   border: none;
@@ -673,14 +740,14 @@ exports[`AddProjectForm component renders as expected with existing data 1`] = `
   outline: none;
 }
 
-.c6.btn.btn-link:disabled,
-.c6.btn.btn-link.disabled {
+.c7.btn.btn-link:disabled,
+.c7.btn.btn-link.disabled {
   background: none;
   pointer-events: none;
 }
 
-.c6.btn:disabled,
-.c6.btn:disabled:hover {
+.c7.btn:disabled,
+.c7.btn:disabled:hover {
   box-shadow: none;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -691,19 +758,19 @@ exports[`AddProjectForm component renders as expected with existing data 1`] = `
   opacity: 0.65;
 }
 
-.c6.Button .Button__icon {
+.c7.Button .Button__icon {
   margin-right: 1.6rem;
 }
 
-.c6.Button--icon-only:focus {
+.c7.Button--icon-only:focus {
   outline: none;
 }
 
-.c6.Button--icon-only .Button__icon {
+.c7.Button--icon-only .Button__icon {
   margin-right: 0;
 }
 
-.c8 .react-datepicker__calendar-icon {
+.c9 .react-datepicker__calendar-icon {
   width: 3rem;
   height: 3rem;
   margin-top: 0.5rem;
@@ -711,36 +778,36 @@ exports[`AddProjectForm component renders as expected with existing data 1`] = `
   pointer-events: none;
 }
 
-.c8 .react-datepicker__view-calendar-icon input {
+.c9 .react-datepicker__view-calendar-icon input {
   padding: 0.6rem 1rem 0.5rem 0.6rem;
 }
 
-.c8 .react-datepicker-wrapper {
+.c9 .react-datepicker-wrapper {
   max-width: 16rem;
 }
 
-.c9.c9.form-control.is-valid {
+.c10.c10.form-control.is-valid {
   background-image: none;
 }
 
-.c9.c9.form-control.is-invalid {
+.c10.c10.form-control.is-invalid {
   border-color: #d8292f !important;
 }
 
-.c7.c7.btn {
+.c8.c8.btn {
   color: #aaaaaa;
   -webkit-text-decoration: none;
   text-decoration: none;
   line-height: unset;
 }
 
-.c7.c7.btn .text {
+.c8.c8.btn .text {
   display: none;
 }
 
-.c7.c7.btn:hover,
-.c7.c7.btn:active,
-.c7.c7.btn:focus {
+.c8.c8.btn:hover,
+.c8.c8.btn:active,
+.c8.c8.btn:focus {
   color: #d8292f;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -754,13 +821,17 @@ exports[`AddProjectForm component renders as expected with existing data 1`] = `
   flex-direction: row;
 }
 
-.c7.c7.btn:hover .text,
-.c7.c7.btn:active .text,
-.c7.c7.btn:focus .text {
+.c8.c8.btn:hover .text,
+.c8.c8.btn:active .text,
+.c8.c8.btn:focus .text {
   display: inline;
   line-height: 2rem;
 }
 
+.c6 button.close {
+  font-size: 2.4rem;
+}
+
 .c2 {
   font-weight: bold;
   border-bottom: 0.2rem solid;
@@ -786,13 +857,13 @@ exports[`AddProjectForm component renders as expected with existing data 1`] = `
   font-weight: bold;
 }
 
-.c10 textarea.form-control {
+.c11 textarea.form-control {
   min-width: 80rem;
   height: 7rem;
   resize: none;
 }
 
-.c11 {
+.c12 {
   border-bottom: 0.1rem solid grey;
 }
 
@@ -1076,19 +1147,40 @@ exports[`AddProjectForm component renders as expected with existing data 1`] = `
               class="c4 text-left col"
             >
               <div
-                class="form-group"
+                class="c6 form-group"
+                data-testid="typeahead-select-costTypeCode"
               >
-                <select
-                  class="form-select form-control"
-                  id="input-costTypeCode"
-                  name="costTypeCode"
+                <div
+                  class="rbt"
+                  style="outline: none; position: relative;"
+                  tabindex="-1"
                 >
-                  <option
-                    value=""
+                  <div
+                    style="display: flex; flex: 1; height: 100%; position: relative;"
                   >
-                    Select...
-                  </option>
-                </select>
+                    <input
+                      aria-autocomplete="both"
+                      aria-expanded="false"
+                      aria-haspopup="listbox"
+                      autocomplete="off"
+                      class="rbt-input-main form-control rbt-input"
+                      id="typeahead-select-costTypeCode"
+                      name="typeahead-select-costTypeCode"
+                      placeholder="Type to search..."
+                      role="combobox"
+                      type="text"
+                      value=""
+                    />
+                    <input
+                      aria-hidden="true"
+                      class="rbt-input-hint"
+                      readonly=""
+                      style="background-color: transparent; border-color: transparent; box-shadow: none; color: rgba(0, 0, 0, 0.35); left: 0px; pointer-events: none; position: absolute; top: 0px; width: 100%; border-style: inset inset inset inset; border-width: 2px 2px 2px 2px; line-height: normal; padding: 1px 1px 1px 1px;"
+                      tabindex="-1"
+                      value=""
+                    />
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -1108,19 +1200,40 @@ exports[`AddProjectForm component renders as expected with existing data 1`] = `
               class="c4 text-left col"
             >
               <div
-                class="form-group"
+                class="c6 form-group"
+                data-testid="typeahead-select-workActivityCode"
               >
-                <select
-                  class="form-select form-control"
-                  id="input-workActivityCode"
-                  name="workActivityCode"
+                <div
+                  class="rbt"
+                  style="outline: none; position: relative;"
+                  tabindex="-1"
                 >
-                  <option
-                    value=""
+                  <div
+                    style="display: flex; flex: 1; height: 100%; position: relative;"
                   >
-                    Select...
-                  </option>
-                </select>
+                    <input
+                      aria-autocomplete="both"
+                      aria-expanded="false"
+                      aria-haspopup="listbox"
+                      autocomplete="off"
+                      class="rbt-input-main form-control rbt-input"
+                      id="typeahead-select-workActivityCode"
+                      name="typeahead-select-workActivityCode"
+                      placeholder="Type to search..."
+                      role="combobox"
+                      type="text"
+                      value=""
+                    />
+                    <input
+                      aria-hidden="true"
+                      class="rbt-input-hint"
+                      readonly=""
+                      style="background-color: transparent; border-color: transparent; box-shadow: none; color: rgba(0, 0, 0, 0.35); left: 0px; pointer-events: none; position: absolute; top: 0px; width: 100%; border-style: inset inset inset inset; border-width: 2px 2px 2px 2px; line-height: normal; padding: 1px 1px 1px 1px;"
+                      tabindex="-1"
+                      value=""
+                    />
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -1140,19 +1253,40 @@ exports[`AddProjectForm component renders as expected with existing data 1`] = `
               class="c4 text-left col"
             >
               <div
-                class="form-group"
+                class="c6 form-group"
+                data-testid="typeahead-select-businessFunctionCode"
               >
-                <select
-                  class="form-select form-control"
-                  id="input-businessFunctionCode"
-                  name="businessFunctionCode"
+                <div
+                  class="rbt"
+                  style="outline: none; position: relative;"
+                  tabindex="-1"
                 >
-                  <option
-                    value=""
+                  <div
+                    style="display: flex; flex: 1; height: 100%; position: relative;"
                   >
-                    Select...
-                  </option>
-                </select>
+                    <input
+                      aria-autocomplete="both"
+                      aria-expanded="false"
+                      aria-haspopup="listbox"
+                      autocomplete="off"
+                      class="rbt-input-main form-control rbt-input"
+                      id="typeahead-select-businessFunctionCode"
+                      name="typeahead-select-businessFunctionCode"
+                      placeholder="Type to search..."
+                      role="combobox"
+                      type="text"
+                      value=""
+                    />
+                    <input
+                      aria-hidden="true"
+                      class="rbt-input-hint"
+                      readonly=""
+                      style="background-color: transparent; border-color: transparent; box-shadow: none; color: rgba(0, 0, 0, 0.35); left: 0px; pointer-events: none; position: absolute; top: 0px; width: 100%; border-style: inset inset inset inset; border-width: 2px 2px 2px 2px; line-height: normal; padding: 1px 1px 1px 1px;"
+                      tabindex="-1"
+                      value=""
+                    />
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -1188,7 +1322,7 @@ exports[`AddProjectForm component renders as expected with existing data 1`] = `
                 class="col-auto"
               >
                 <button
-                  class="c6 Button c7 btn btn-link"
+                  class="c7 Button c8 btn btn-link"
                   title="Delete Project"
                   type="button"
                 >
@@ -1298,7 +1432,7 @@ exports[`AddProjectForm component renders as expected with existing data 1`] = `
                 class="c4 text-left col-4"
               >
                 <div
-                  class="c8 form-group"
+                  class="c9 form-group"
                 >
                   <div
                     class="react-datepicker-wrapper d-block"
@@ -1317,7 +1451,7 @@ exports[`AddProjectForm component renders as expected with existing data 1`] = `
                       </svg>
                       <input
                         autocomplete="off"
-                        class="c9 form-control date-picker"
+                        class="c10 form-control date-picker"
                         id="datepicker-products.0.startDate"
                         name="products.0.startDate"
                         placeholder="MTH DD, YYYY"
@@ -1389,7 +1523,7 @@ exports[`AddProjectForm component renders as expected with existing data 1`] = `
                     class="c4 text-left col"
                   >
                     <div
-                      class="c8 form-group"
+                      class="c9 form-group"
                     >
                       <div
                         class="react-datepicker-wrapper d-block"
@@ -1408,7 +1542,7 @@ exports[`AddProjectForm component renders as expected with existing data 1`] = `
                           </svg>
                           <input
                             autocomplete="off"
-                            class="c9 form-control date-picker"
+                            class="c10 form-control date-picker"
                             id="datepicker-products.0.costEstimateDate"
                             name="products.0.costEstimateDate"
                             placeholder="MTH DD, YYYY"
@@ -1438,7 +1572,7 @@ exports[`AddProjectForm component renders as expected with existing data 1`] = `
                 class="c4 text-left col"
               >
                 <div
-                  class="c10 textarea input form-group"
+                  class="c11 textarea input form-group"
                 >
                   <textarea
                     class="form-control"
@@ -1467,7 +1601,7 @@ exports[`AddProjectForm component renders as expected with existing data 1`] = `
                 class="c4 text-left col"
               >
                 <div
-                  class="c10 textarea input form-group"
+                  class="c11 textarea input form-group"
                 >
                   <textarea
                     class="form-control"
@@ -1481,7 +1615,7 @@ exports[`AddProjectForm component renders as expected with existing data 1`] = `
               </div>
             </div>
             <div
-              class="c11 my-5"
+              class="c12 my-5"
             />
           </div>
           <div>
@@ -1495,7 +1629,7 @@ exports[`AddProjectForm component renders as expected with existing data 1`] = `
                 class="col-auto"
               >
                 <button
-                  class="c6 Button c7 btn btn-link"
+                  class="c7 Button c8 btn btn-link"
                   title="Delete Project"
                   type="button"
                 >
@@ -1605,7 +1739,7 @@ exports[`AddProjectForm component renders as expected with existing data 1`] = `
                 class="c4 text-left col-4"
               >
                 <div
-                  class="c8 form-group"
+                  class="c9 form-group"
                 >
                   <div
                     class="react-datepicker-wrapper d-block"
@@ -1624,7 +1758,7 @@ exports[`AddProjectForm component renders as expected with existing data 1`] = `
                       </svg>
                       <input
                         autocomplete="off"
-                        class="c9 form-control date-picker"
+                        class="c10 form-control date-picker"
                         id="datepicker-products.1.startDate"
                         name="products.1.startDate"
                         placeholder="MTH DD, YYYY"
@@ -1696,7 +1830,7 @@ exports[`AddProjectForm component renders as expected with existing data 1`] = `
                     class="c4 text-left col"
                   >
                     <div
-                      class="c8 form-group"
+                      class="c9 form-group"
                     >
                       <div
                         class="react-datepicker-wrapper d-block"
@@ -1715,7 +1849,7 @@ exports[`AddProjectForm component renders as expected with existing data 1`] = `
                           </svg>
                           <input
                             autocomplete="off"
-                            class="c9 form-control date-picker"
+                            class="c10 form-control date-picker"
                             id="datepicker-products.1.costEstimateDate"
                             name="products.1.costEstimateDate"
                             placeholder="MTH DD, YYYY"
@@ -1745,7 +1879,7 @@ exports[`AddProjectForm component renders as expected with existing data 1`] = `
                 class="c4 text-left col"
               >
                 <div
-                  class="c10 textarea input form-group"
+                  class="c11 textarea input form-group"
                 >
                   <textarea
                     class="form-control"
@@ -1774,7 +1908,7 @@ exports[`AddProjectForm component renders as expected with existing data 1`] = `
                 class="c4 text-left col"
               >
                 <div
-                  class="c10 textarea input form-group"
+                  class="c11 textarea input form-group"
                 >
                   <textarea
                     class="form-control"
@@ -1789,7 +1923,7 @@ exports[`AddProjectForm component renders as expected with existing data 1`] = `
             </div>
           </div>
           <button
-            class="c6 Button btn btn-link"
+            class="c7 Button btn btn-link"
             type="button"
           >
             <div