[portal] add way to clear month year picker

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

@@ -103,9 +103,9 @@ export default function ContributeQuestionForm({
                     year: field.value.getFullYear(),
                   }}
                   yearRequired={true}
-                  onChange={({ month, year }) =>
+                  onChange={({ month, year }) => {
-                    field.onChange(startOfMonth(new Date(year, month - 1)))
+                    field.onChange(startOfMonth(new Date(year!, month! - 1)));
-                  }
+                  }}
                 />
               )}
             />

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

@@ -87,15 +87,17 @@ export default function CreateQuestionEncounterForm({
       )}
       {step === 3 && (
         <MonthYearPicker
+          // TODO: Add label and hide label on Select instead.
           monthLabel=""
           value={{
             month: ((selectedDate?.getMonth() ?? 0) + 1) as Month,
             year: selectedDate?.getFullYear() as number,
           }}
+          // TODO: Add label and hide label on Select instead.
           yearLabel=""
           onChange={(value) => {
             setSelectedDate(
-              startOfMonth(new Date(value.year, value.month - 1)),
+              startOfMonth(new Date(value.year!, value.month! - 1)),
             );
           }}
         />

apps/portal/src/components/shared/MonthYearPicker.tsx

@@ -1,4 +1,4 @@
-import { useId } from 'react';
+import { useEffect, useId, useState } from 'react';
 import { Select } from '@tih/ui';
 
 export type Month = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
@@ -8,12 +8,17 @@ export type MonthYear = Readonly<{
   year: number;
 }>;
 
+export type MonthYearOptional = Readonly<{
+  month: Month | null;
+  year: number | null;
+}>;
+
 type Props = Readonly<{
   errorMessage?: string;
   monthLabel?: string;
   monthRequired?: boolean;
-  onChange: (value: MonthYear) => void;
+  onChange: (value: MonthYearOptional) => void;
-  value: MonthYear;
+  value: MonthYearOptional;
   yearLabel?: string;
   yearRequired?: boolean;
 }>;
@@ -89,29 +94,45 @@ export default function MonthYearPicker({
 }: Props) {
   const hasError = errorMessage != null;
   const errorId = useId();
+  const [monthCounter, setMonthCounter] = useState<number>(0);
+  const [yearCounter, setYearCounter] = useState<number>(0);
+
+  useEffect(() => {
+    if (value.month == null) {
+      setMonthCounter((val) => val + 1);
+    }
+
+    if (value.year == null) {
+      setYearCounter((val) => val + 1);
+    }
+  }, [value.month, value.year]);
 
   return (
-    <div
+    <div aria-describedby={hasError ? errorId : undefined}>
-      aria-describedby={hasError ? errorId : undefined}
+      <div className="flex items-end space-x-2">
-      className="flex items-end space-x-4">
+        <Select
-      <Select
+          key={`month:${monthCounter}`}
-        label={monthLabel}
+          label={monthLabel}
-        options={MONTH_OPTIONS}
+          options={MONTH_OPTIONS}
-        required={monthRequired}
+          placeholder="Select month"
-        value={value.month}
+          required={monthRequired}
-        onChange={(newMonth) =>
+          value={value.month}
-          onChange({ month: Number(newMonth) as Month, year: value.year })
+          onChange={(newMonth) =>
-        }
+            onChange({ month: Number(newMonth) as Month, year: value.year })
-      />
+          }
-      <Select
+        />
-        label={yearLabel}
+        <Select
-        options={YEAR_OPTIONS}
+          key={`year:${yearCounter}`}
-        required={yearRequired}
+          label={yearLabel}
-        value={value.year}
+          options={YEAR_OPTIONS}
-        onChange={(newYear) =>
+          placeholder="Select year"
-          onChange({ month: value.month, year: Number(newYear) })
+          required={yearRequired}
-        }
+          value={value.year}
-      />
+          onChange={(newYear) =>
+            onChange({ month: value.month, year: Number(newYear) })
+          }
+        />
+      </div>
       {errorMessage && (
         <p className="text-danger-600 mt-2 text-sm" id={errorId}>
           {errorMessage}

apps/portal/src/pages/test__.tsx

@@ -6,7 +6,10 @@ import { HorizontalDivider } from '@tih/ui';
 
 import CompaniesTypeahead from '~/components/shared/CompaniesTypeahead';
 import JobTitlesTypeahead from '~/components/shared/JobTitlesTypahead';
-import type { Month, MonthYear } from '~/components/shared/MonthYearPicker';
+import type {
+  Month,
+  MonthYearOptional,
+} from '~/components/shared/MonthYearPicker';
 import MonthYearPicker from '~/components/shared/MonthYearPicker';
 
 export default function HomePage() {
@@ -14,7 +17,8 @@ export default function HomePage() {
     useState<TypeaheadOption | null>(null);
   const [selectedJobTitle, setSelectedJobTitle] =
     useState<TypeaheadOption | null>(null);
-  const [monthYear, setMonthYear] = useState<MonthYear>({
+
+  const [monthYear, setMonthYear] = useState<MonthYearOptional>({
     month: (new Date().getMonth() + 1) as Month,
     year: new Date().getFullYear(),
   });
@@ -38,7 +42,24 @@ export default function HomePage() {
           />
           <pre>{JSON.stringify(selectedJobTitle, null, 2)}</pre>
           <HorizontalDivider />
-          <MonthYearPicker value={monthYear} onChange={setMonthYear} />
+          <MonthYearPicker
+            errorMessage={
+              monthYear.month == null || monthYear.year == null
+                ? 'Incomplete date'
+                : undefined
+            }
+            value={monthYear}
+            onChange={setMonthYear}
+          />
+          <Button
+            label="Clear dates"
+            size="sm"
+            variant="tertiary"
+            onClick={() => {
+              setMonthYear({ month: null, year: null });
+            }}
+          />
+          <pre>{JSON.stringify(monthYear, null, 2)}</pre>
           <HorizontalDivider />
           <Button
             label="Add toast"