[ui][typeahead] fix nullable prop (#492)

apps/portal/src/components/questions/LandingComponent.tsx

@@ -106,7 +106,6 @@ export default function LandingComponent({
               isLabelHidden={true}
               value={company}
               onSelect={(value) => {
-                // @ts-ignore TODO(questions): handle potentially null value.
                 handleChangeCompany(value);
               }}
             />
@@ -115,7 +114,6 @@ 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

@@ -128,7 +128,6 @@ export default function ContributeQuestionForm({
                   {...field}
                   required={true}
                   onSelect={(option) => {
-                    // @ts-ignore TODO(questions): handle potentially null value.
                     field.onChange(option);
                   }}
                 />
@@ -164,7 +163,6 @@ export default function ContributeQuestionForm({
                 <CompanyTypeahead
                   {...field}
                   required={true}
-                  // @ts-ignore TODO(questions): handle potentially null value.
                   onSelect={({ id }) => {
                     field.onChange(id);
                   }}
@@ -181,7 +179,6 @@ export default function ContributeQuestionForm({
                   {...field}
                   required={true}
                   onSelect={(option) => {
-                    // @ts-ignore TODO(questions): handle potentially null value.
                     field.onChange(option);
                   }}
                 />

apps/portal/src/components/questions/forms/CreateQuestionEncounterForm.tsx

@@ -52,7 +52,6 @@ export default function CreateQuestionEncounterForm({
             placeholder="Company"
             // TODO: Fix suggestions and set count back to 3
             suggestedCount={0}
-            // @ts-ignore TODO(questions): handle potentially null value.
             onSelect={({ value: company }) => {
               setSelectedCompany(company);
             }}
@@ -69,7 +68,6 @@ export default function CreateQuestionEncounterForm({
             isLabelHidden={true}
             placeholder="Location"
             suggestedCount={0}
-            // @ts-ignore TODO(questions): handle potentially null value.
             onSelect={(location) => {
               setSelectedLocation(location);
             }}
@@ -86,7 +84,6 @@ export default function CreateQuestionEncounterForm({
             isLabelHidden={true}
             placeholder="Role"
             suggestedCount={0}
-            // @ts-ignore TODO(questions): handle potentially null value.
             onSelect={({ value: role }) => {
               setSelectedRole(role);
             }}

apps/portal/src/components/questions/typeahead/ExpandedTypeahead.tsx

@@ -8,7 +8,10 @@ import type { RequireAllOrNone } from '~/utils/questions/RequireAllOrNone';
 type TypeaheadProps = ComponentProps<typeof Typeahead>;
 type TypeaheadOption = TypeaheadProps['options'][number];
 
-export type ExpandedTypeaheadProps = Omit<TypeaheadProps, 'onSelect'> &
+export type ExpandedTypeaheadProps = Omit<
+  TypeaheadProps,
+  'nullable' | 'onSelect'
+> &
   RequireAllOrNone<{
     clearOnSelect?: boolean;
     filterOption: (option: TypeaheadOption) => boolean;
@@ -59,8 +62,7 @@ export default function ExpandedTypeahead({
             if (clearOnSelect) {
               setKey((key + 1) % 2);
             }
-            // TODO: Remove onSelect null coercion once onSelect prop is refactored
+            onSelect(option);
-            onSelect(option!);
           }}
         />
       </div>

apps/portal/src/pages/questions/browse.tsx

@@ -344,7 +344,6 @@ export default function QuestionsBrowsePage() {
             isLabelHidden={true}
             placeholder="Search companies"
             onSelect={(option) => {
-              // @ts-ignore TODO(questions): handle potentially null value.
               onOptionChange({
                 ...option,
                 checked: true,
@@ -385,7 +384,6 @@ export default function QuestionsBrowsePage() {
             isLabelHidden={true}
             placeholder="Search roles"
             onSelect={(option) => {
-              // @ts-ignore TODO(questions): handle potentially null value.
               onOptionChange({
                 ...option,
                 checked: true,
@@ -446,7 +444,6 @@ export default function QuestionsBrowsePage() {
             isLabelHidden={true}
             placeholder="Search locations"
             onSelect={(option) => {
-              // @ts-ignore TODO(questions): handle potentially null value.
               onOptionChange({
                 ...option,
                 checked: true,

packages/ui/src/Typeahead/Typeahead.tsx

@@ -29,17 +29,25 @@ type Props = Readonly<{
   isLabelHidden?: boolean;
   label: string;
   noResultsMessage?: string;
-  nullable?: boolean;
   onQueryChange: (
     value: string,
     event: React.ChangeEvent<HTMLInputElement>,
   ) => void;
-  onSelect: (option: TypeaheadOption | null) => void;
   options: ReadonlyArray<TypeaheadOption>;
   textSize?: TypeaheadTextSize;
   value?: TypeaheadOption | null;
 }> &
-  Readonly<Attributes>;
+  Readonly<Attributes> &
+  (
+    | {
+        nullable: true;
+        onSelect: (option: TypeaheadOption | null) => void;
+      }
+    | {
+        nullable?: false;
+        onSelect: (option: TypeaheadOption) => void;
+      }
+  );
 
 type State = 'error' | 'normal';