From f7ff20bb22e8f9895637b2df9333ce8032ae75e3 Mon Sep 17 00:00:00 2001
From: Yangshun Tay <tay.yang.shun@gmail.com>
Date: Sun, 30 Oct 2022 09:23:03 +0800
Subject: [PATCH] [ui][typeahead] allow typeahead to be cleared

---
 apps/portal/.eslintrc.js                                    | 3 +++
 .../offersSubmission/submissionForm/BackgroundForm.tsx      | 4 ++++
 .../offersSubmission/submissionForm/OfferDetailsForm.tsx    | 4 ++++
 apps/portal/src/components/questions/LandingComponent.tsx   | 2 ++
 .../components/questions/forms/ContributeQuestionForm.tsx   | 3 +++
 .../questions/forms/CreateQuestionEncounterForm.tsx         | 3 +++
 apps/portal/src/components/shared/CompaniesTypeahead.tsx    | 2 +-
 apps/portal/src/components/shared/JobTitlesTypahead.tsx     | 2 +-
 apps/portal/src/pages/offers/index.tsx                      | 2 ++
 apps/portal/src/pages/questions/browse.tsx                  | 3 +++
 packages/ui/src/Typeahead/Typeahead.tsx                     | 6 +-----
 11 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/apps/portal/.eslintrc.js b/apps/portal/.eslintrc.js
index 07b7f196..099e9a60 100644
--- a/apps/portal/.eslintrc.js
+++ b/apps/portal/.eslintrc.js
@@ -5,4 +5,7 @@ module.exports = {
     tsconfigRootDir: __dirname,
     project: ['./tsconfig.json'],
   },
+  rules: {
+    '@typescript-eslint/ban-ts-comment': 0,
+  },
 };
diff --git a/apps/portal/src/components/offers/offersSubmission/submissionForm/BackgroundForm.tsx b/apps/portal/src/components/offers/offersSubmission/submissionForm/BackgroundForm.tsx
index 52d0a42e..b3304e1e 100644
--- a/apps/portal/src/components/offers/offersSubmission/submissionForm/BackgroundForm.tsx
+++ b/apps/portal/src/components/offers/offersSubmission/submissionForm/BackgroundForm.tsx
@@ -97,6 +97,7 @@ function FullTimeJobFields() {
       <div className="mb-5 grid grid-cols-2 space-x-3">
         <div>
           <JobTitlesTypeahead
+            // @ts-ignore TODO(offers): handle potentially null value.
             onSelect={({ value }) =>
               setValue(`background.experiences.0.title`, value)
             }
@@ -104,6 +105,7 @@ function FullTimeJobFields() {
         </div>
         <div>
           <CompaniesTypeahead
+            // @ts-ignore TODO(offers): handle potentially null value.
             onSelect={({ value }) =>
               setValue(`background.experiences.0.companyId`, value)
             }
@@ -178,6 +180,7 @@ function InternshipJobFields() {
       <div className="mb-5 grid grid-cols-2 space-x-3">
         <div>
           <JobTitlesTypeahead
+            // @ts-ignore TODO(offers): handle potentially null value.
             onSelect={({ value }) =>
               setValue(`background.experiences.0.title`, value)
             }
@@ -185,6 +188,7 @@ function InternshipJobFields() {
         </div>
         <div>
           <CompaniesTypeahead
+            // @ts-ignore TODO(offers): handle potentially null value.
             onSelect={({ value }) =>
               setValue(`background.experiences.0.companyId`, value)
             }
diff --git a/apps/portal/src/components/offers/offersSubmission/submissionForm/OfferDetailsForm.tsx b/apps/portal/src/components/offers/offersSubmission/submissionForm/OfferDetailsForm.tsx
index 5b64586d..9a910de6 100644
--- a/apps/portal/src/components/offers/offersSubmission/submissionForm/OfferDetailsForm.tsx
+++ b/apps/portal/src/components/offers/offersSubmission/submissionForm/OfferDetailsForm.tsx
@@ -70,6 +70,7 @@ function FullTimeOfferDetailsForm({
         <div>
           <JobTitlesTypeahead
             required={true}
+            // @ts-ignore TODO(offers): handle potentially null value.
             onSelect={({ value }) =>
               setValue(`offers.${index}.offersFullTime.title`, value)
             }
@@ -89,6 +90,7 @@ function FullTimeOfferDetailsForm({
         <div>
           <CompaniesTypeahead
             required={true}
+            // @ts-ignore TODO(offers): handle potentially null value.
             onSelect={({ value }) =>
               setValue(`offers.${index}.companyId`, value)
             }
@@ -277,6 +279,7 @@ function InternshipOfferDetailsForm({
         <div>
           <JobTitlesTypeahead
             required={true}
+            // @ts-ignore TODO(offers): handle potentially null value.
             onSelect={({ value }) =>
               setValue(`offers.${index}.offersIntern.title`, value)
             }
@@ -287,6 +290,7 @@ function InternshipOfferDetailsForm({
         <div>
           <CompaniesTypeahead
             required={true}
+            // @ts-ignore TODO(offers): handle potentially null value.
             onSelect={({ value }) =>
               setValue(`offers.${index}.companyId`, value)
             }
diff --git a/apps/portal/src/components/questions/LandingComponent.tsx b/apps/portal/src/components/questions/LandingComponent.tsx
index cd2ace15..0961187c 100644
--- a/apps/portal/src/components/questions/LandingComponent.tsx
+++ b/apps/portal/src/components/questions/LandingComponent.tsx
@@ -97,6 +97,7 @@ export default function LandingComponent({
               isLabelHidden={true}
               value={company}
               onSelect={(value) => {
+                // @ts-ignore TODO(questions): handle potentially null value.
                 handleChangeCompany(value);
               }}
             />
@@ -105,6 +106,7 @@ export default function LandingComponent({
               isLabelHidden={true}
               value={location}
               onSelect={(value) => {
+                // @ts-ignore TODO(questions): handle potentially null value.
                 handleChangeLocation(value);
               }}
             />
diff --git a/apps/portal/src/components/questions/forms/ContributeQuestionForm.tsx b/apps/portal/src/components/questions/forms/ContributeQuestionForm.tsx
index ea87d8f5..a1f5777c 100644
--- a/apps/portal/src/components/questions/forms/ContributeQuestionForm.tsx
+++ b/apps/portal/src/components/questions/forms/ContributeQuestionForm.tsx
@@ -81,6 +81,7 @@ export default function ContributeQuestionForm({
                 <LocationTypeahead
                   required={true}
                   onSelect={(option) => {
+                    // @ts-ignore TODO(questions): handle potentially null value.
                     field.onChange(option.value);
                   }}
                   {...field}
@@ -119,6 +120,7 @@ export default function ContributeQuestionForm({
               render={({ field }) => (
                 <CompanyTypeahead
                   required={true}
+                  // @ts-ignore TODO(questions): handle potentially null value.
                   onSelect={({ id }) => {
                     field.onChange(id);
                   }}
@@ -134,6 +136,7 @@ export default function ContributeQuestionForm({
                 <RoleTypeahead
                   required={true}
                   onSelect={(option) => {
+                    // @ts-ignore TODO(questions): handle potentially null value.
                     field.onChange(option.value);
                   }}
                   {...field}
diff --git a/apps/portal/src/components/questions/forms/CreateQuestionEncounterForm.tsx b/apps/portal/src/components/questions/forms/CreateQuestionEncounterForm.tsx
index fbebb6f9..fb00e48b 100644
--- a/apps/portal/src/components/questions/forms/CreateQuestionEncounterForm.tsx
+++ b/apps/portal/src/components/questions/forms/CreateQuestionEncounterForm.tsx
@@ -43,6 +43,7 @@ export default function CreateQuestionEncounterForm({
             isLabelHidden={true}
             placeholder="Other company"
             suggestedCount={3}
+            // @ts-ignore TODO(questions): handle potentially null value.
             onSelect={({ value: company }) => {
               setSelectedCompany(company);
             }}
@@ -59,6 +60,7 @@ export default function CreateQuestionEncounterForm({
             isLabelHidden={true}
             placeholder="Other location"
             suggestedCount={3}
+            // @ts-ignore TODO(questions): handle potentially null value.
             onSelect={({ value: location }) => {
               setSelectedLocation(location);
             }}
@@ -75,6 +77,7 @@ export default function CreateQuestionEncounterForm({
             isLabelHidden={true}
             placeholder="Other role"
             suggestedCount={3}
+            // @ts-ignore TODO(questions): handle potentially null value.
             onSelect={({ value: role }) => {
               setSelectedRole(role);
             }}
diff --git a/apps/portal/src/components/shared/CompaniesTypeahead.tsx b/apps/portal/src/components/shared/CompaniesTypeahead.tsx
index 7a48bd10..3b641b35 100644
--- a/apps/portal/src/components/shared/CompaniesTypeahead.tsx
+++ b/apps/portal/src/components/shared/CompaniesTypeahead.tsx
@@ -8,7 +8,7 @@ type Props = Readonly<{
   disabled?: boolean;
   errorMessage?: string;
   isLabelHidden?: boolean;
-  onSelect: (option: TypeaheadOption) => void;
+  onSelect: (option: TypeaheadOption | null) => void;
   placeHolder?: string;
   required?: boolean;
 }>;
diff --git a/apps/portal/src/components/shared/JobTitlesTypahead.tsx b/apps/portal/src/components/shared/JobTitlesTypahead.tsx
index b2e80fe9..0d8ca3f4 100644
--- a/apps/portal/src/components/shared/JobTitlesTypahead.tsx
+++ b/apps/portal/src/components/shared/JobTitlesTypahead.tsx
@@ -7,7 +7,7 @@ import { JobTitleLabels } from './JobTitles';
 type Props = Readonly<{
   disabled?: boolean;
   isLabelHidden?: boolean;
-  onSelect: (option: TypeaheadOption) => void;
+  onSelect: (option: TypeaheadOption | null) => void;
   placeHolder?: string;
   required?: boolean;
 }>;
diff --git a/apps/portal/src/pages/offers/index.tsx b/apps/portal/src/pages/offers/index.tsx
index dbfe6323..bb09c36f 100644
--- a/apps/portal/src/pages/offers/index.tsx
+++ b/apps/portal/src/pages/offers/index.tsx
@@ -37,12 +37,14 @@ export default function OffersHomePage() {
             <JobTitlesTypeahead
               isLabelHidden={true}
               placeHolder="Software Engineer"
+              // @ts-ignore TODO(offers): handle potentially null value.
               onSelect={({ value }) => setjobTitleFilter(value)}
             />
             <span>in</span>
             <CompaniesTypeahead
               isLabelHidden={true}
               placeHolder="All Companies"
+              // @ts-ignore TODO(offers): handle potentially null value.
               onSelect={({ value }) => setCompanyFilter(value)}
             />
           </div>
diff --git a/apps/portal/src/pages/questions/browse.tsx b/apps/portal/src/pages/questions/browse.tsx
index 89ab3c6d..bc471080 100644
--- a/apps/portal/src/pages/questions/browse.tsx
+++ b/apps/portal/src/pages/questions/browse.tsx
@@ -325,6 +325,7 @@ export default function QuestionsBrowsePage() {
             isLabelHidden={true}
             placeholder="Search companies"
             onSelect={(option) => {
+              // @ts-ignore TODO(questions): handle potentially null value.
               onOptionChange({
                 ...option,
                 checked: true,
@@ -357,6 +358,7 @@ export default function QuestionsBrowsePage() {
             isLabelHidden={true}
             placeholder="Search roles"
             onSelect={(option) => {
+              // @ts-ignore TODO(questions): handle potentially null value.
               onOptionChange({
                 ...option,
                 checked: true,
@@ -414,6 +416,7 @@ export default function QuestionsBrowsePage() {
             isLabelHidden={true}
             placeholder="Search locations"
             onSelect={(option) => {
+              // @ts-ignore TODO(offers): fix potentially empty value.
               onOptionChange({
                 ...option,
                 checked: true,
diff --git a/packages/ui/src/Typeahead/Typeahead.tsx b/packages/ui/src/Typeahead/Typeahead.tsx
index 23db4a77..bf16f07c 100644
--- a/packages/ui/src/Typeahead/Typeahead.tsx
+++ b/packages/ui/src/Typeahead/Typeahead.tsx
@@ -34,7 +34,7 @@ type Props = Readonly<{
     value: string,
     event: React.ChangeEvent<HTMLInputElement>,
   ) => void;
-  onSelect: (option: TypeaheadOption) => void;
+  onSelect: (option: TypeaheadOption | null) => void;
   options: ReadonlyArray<TypeaheadOption>;
   textSize?: TypeaheadTextSize;
   value?: TypeaheadOption;
@@ -102,10 +102,6 @@ export default function Typeahead({
         // @ts-ignore
         value={value}
         onChange={(newValue) => {
-          if (newValue == null) {
-            return;
-          }
-
           // eslint-disable-next-line @typescript-eslint/ban-ts-comment
           // @ts-ignore
           onSelect(newValue as TypeaheadOption);