[ui][typeahead] allow typeahead to be cleared

apps/portal/.eslintrc.js

@@ -5,4 +5,7 @@ module.exports = {
     tsconfigRootDir: __dirname,
     project: ['./tsconfig.json'],
   },
+  rules: {
+    '@typescript-eslint/ban-ts-comment': 0,
+  },
 };

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)
             }

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)
             }

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);
               }}
             />

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}

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);
             }}

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;
 }>;

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;
 }>;

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>

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,

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);