[datetime2] fix(DateInput2): clearing input calls onChange(null)

packages/datetime/src/dateInput.tsx

@@ -92,12 +92,14 @@ export interface IDateInputProps extends IDatePickerBaseProps, DateFormatProps,
     inputProps?: InputGroupProps2;
 
     /**
-     * Called when the user selects a new valid date through the `DatePicker` or by typing
-     * in the input. The second argument is true if the user clicked on a date in the
-     * calendar, changed the input value, or cleared the selection; it will be false if the date
-     * was changed by choosing a new month or year.
+     * Called when the user selects a new valid date through the DatePicker or by typing
+     * in the input.
+     *
+     * @param newDate Date or `null` (if the date is invalid or text input has been cleared)
+     * @param isUserChange `true` if the user clicked on a date in the calendar, changed the input value,
+     *     or cleared the selection; `false` if the date was changed by changing the month or year.
      */
-    onChange?: (selectedDate: Date, isUserChange: boolean) => void;
+    onChange?: (selectedDate: Date | null, isUserChange: boolean) => void;
 
     /**
      * Called when the user finishes typing in a new date and the date causes an error state.
@@ -365,7 +367,7 @@ export class DateInput extends AbstractPureComponent2<DateInputProps, IDateInput
 
     private handleInputBlur = (e: React.FocusEvent<HTMLInputElement>) => {
         const { valueString } = this.state;
-        const date = this.parseDate(valueString);
+        const date: Date = this.parseDate(valueString);
         if (
             valueString.length > 0 &&
             valueString !== getFormattedDateString(this.state.value, this.props) &&

packages/datetime2/src/components/date-input2/dateInput2.tsx

@@ -31,10 +31,16 @@ export interface DateInput2Props extends Omit<DateInputProps, "onChange" | "valu
     /** The default timezone selected. Defaults to the user local timezone */
     defaultTimezone?: string;
 
-    /** Callback invoked whenever the date or timezone has changed. ISO string */
-    onChange: (newDate: string, isUserChange?: boolean) => void;
+    /**
+     * Callback invoked whenever the date or timezone has changed.
+     *
+     * @param newDate ISO string or `null` (if the date is invalid or text input has been cleared)
+     * @param isUserChange `true` if the user clicked on a date in the calendar, changed the input value,
+     *     or cleared the selection; `false` if the date was changed by changing the month or year.
+     */
+    onChange: (newDate: string | null, isUserChange?: boolean) => void;
 
-    /** An ISO string mapping to the selected time. */
+    /** An ISO string representing the selected time. */
     value: string | null;
 
     /**
@@ -88,6 +94,7 @@ export const DateInput2: React.FC<DateInput2Props> = React.memo(function _DateIn
     const handleDateChange = React.useCallback(
         (newDate: Date | null, isUserChange: boolean) => {
             if (newDate == null) {
+                onChange?.(newDate, isUserChange);
                 return;
             }
             const newDateString = getIsoEquivalentWithUpdatedTimezone(newDate, timezoneValue, timePrecision);

packages/datetime2/test/components/dateInput2Tests.tsx

@@ -19,7 +19,7 @@ import { mount } from "enzyme";
 import * as React from "react";
 import * as sinon from "sinon";
 
-import { Position } from "@blueprintjs/core";
+import { InputGroup, Position } from "@blueprintjs/core";
 import { DateInput, TimePrecision } from "@blueprintjs/datetime";
 
 import { DateInput2, DateInput2Props, TimezoneSelect } from "../../src";
@@ -132,4 +132,13 @@ describe("<DateInput2>", () => {
         assert.strictEqual(dateinput.prop("inputProps"), inputProps);
         assert.strictEqual(dateinput.prop("popoverProps"), popoverProps);
     });
+
+    it("Clearing the input invokes onChange with null", () => {
+        const wrapper = mount(<DateInput2 {...DEFAULT_PROPS} />);
+        wrapper
+            .find(InputGroup)
+            .find("input")
+            .simulate("change", { target: { value: "" } });
+        assert.isTrue(onChange.calledOnceWithExactly(null, true));
+    });
 });

packages/docs-app/src/examples/datetime2-examples/dateInput2Example.tsx

@@ -133,7 +133,7 @@ export class DateInput2Example extends React.PureComponent<IExampleProps, DateIn
         );
     }
 
-    private handleDateChange = (date: string) => this.setState({ date });
+    private handleDateChange = (date: string | null) => this.setState({ date });
 
     private handleFormatChange = (format: DateFormatProps) => this.setState({ format });
 }