Don't reset internal state on value change

Author: connor-baer

packages/circuit-ui/components/DateInput/DateInput.stories.tsx

@@ -49,7 +49,7 @@ const baseArgs = {
 };
 
 export const Base = (args: DateInputProps) => {
-  const [value, setValue] = useState(args.value || '');
+  const [value, setValue] = useState(args.defaultValue || args.value || '');
   return <DateInput {...args} value={value} onChange={setValue} />;
 };
 
@@ -108,14 +108,14 @@ export const Readonly = (args: DateInputProps) => <DateInput {...args} />;
 Readonly.args = {
   ...baseArgs,
   label: 'Appointment date',
-  value: '2017-08-28',
+  defaultValue: '2017-08-28',
   readOnly: true,
 };
 
 export const Disabled = (args: DateInputProps) => <DateInput {...args} />;
 
 Disabled.args = {
   ...baseArgs,
-  value: '2017-08-28',
+  defaultValue: '2017-08-28',
   disabled: true,
 };

packages/circuit-ui/components/DateInput/DateInput.tsx

@@ -253,7 +253,7 @@ export const DateInput = forwardRef<HTMLDivElement, DateInputProps>(
     };
 
     const openCalendar = () => {
-      setSelection(toPlainDate(value) || undefined);
+      setSelection(state.plainDate || undefined);
       setOpen(true);
     };
 
@@ -344,11 +344,11 @@ export const DateInput = forwardRef<HTMLDivElement, DateInputProps>(
       }
     }
 
-    const plainDate = toPlainDate(value);
-    const calendarButtonLabel = plainDate
-      ? [openCalendarButtonLabel, formatDate(plainDate, locale, 'long')].join(
-          ', ',
-        )
+    const calendarButtonLabel = state.plainDate
+      ? [
+          openCalendarButtonLabel,
+          formatDate(state.plainDate, locale, 'long'),
+        ].join(', ')
       : openCalendarButtonLabel;
 
     const segments = getDateSegments(locale);

packages/circuit-ui/components/DateInput/hooks.ts

@@ -33,7 +33,7 @@ import {
   MIN_YEAR,
   toPlainDate,
 } from '../../util/date.js';
-import { isNumber, isString } from '../../util/type-check.js';
+import { isNumber } from '../../util/type-check.js';
 import { isBackspace, isDelete } from '../../util/key-codes.js';
 import { clamp } from '../../util/helpers.js';
 
@@ -52,6 +52,7 @@ type PartialPlainDate = {
 
 type PlainDateState = {
   date: PartialPlainDate;
+  plainDate: Temporal.PlainDate | undefined;
   update: (date: PartialPlainDate) => void;
 };
 
@@ -74,7 +75,7 @@ export function usePlainDateState(
   );
 
   useEffect(() => {
-    if (isString(value)) {
+    if (value) {
       setDate(parseValue(value));
     }
   }, [value]);
@@ -120,7 +121,12 @@ export function usePlainDateState(
     [onChange],
   );
 
-  return { date, update };
+  const { year, month, day } = date;
+
+  const plainDate =
+    year && month && day ? new Temporal.PlainDate(year, month, day) : undefined;
+
+  return { date, plainDate, update };
 }
 
 export function useSegment(