fix(DateInput): keep cleared calendars empty

.changeset/calendar-controlled-empty.md

@@ -0,0 +1,7 @@
+---
+'@astryxdesign/core': patch
+---
+
+[fix] Keep DateInput's calendar selection empty after clearing the field.
+
+@korkt-kim

apps/storybook/stories/DateInput.stories.tsx

@@ -2,6 +2,7 @@
 
 import {useState} from 'react';
 import type {Meta, StoryObj} from '@storybook/react';
+import {expect, userEvent, waitFor, within} from 'storybook/test';
 import {DateInput} from '@astryxdesign/core/DateInput';
 import type {ISODateString} from '@astryxdesign/core/Calendar';
 import {Layout, LayoutContent} from '@astryxdesign/core/Layout';
@@ -555,6 +556,42 @@ export const Clearable: Story = {
   },
 };
 
+/**
+ * Selects a date, clears the controlled value, and reopens the calendar. The
+ * final frame is the regression endpoint: an empty field with no selected day.
+ */
+export const ClearedCalendarSelection: Story = {
+  tags: ['visual-baseline'],
+  render: args => {
+    const [value, setValue] = useState<ISODateString | undefined>('2026-04-06');
+    return <DateInput {...args} value={value} onChange={setValue} />;
+  },
+  args: {
+    label: 'Event date',
+    hasClear: true,
+    min: '2026-04-01',
+    max: '2026-04-30',
+    presentation: 'popover',
+  },
+  play: async ({canvasElement}) => {
+    const canvas = within(canvasElement);
+
+    await userEvent.click(canvas.getByRole('button', {name: 'Open calendar'}));
+    await userEvent.click(canvas.getByRole('button', {name: /April 15, 2026/}));
+    await userEvent.click(
+      canvas.getByRole('button', {name: 'Clear Event date'}),
+    );
+    await expect(canvas.getByRole('combobox')).toHaveValue('');
+    await userEvent.click(canvas.getByRole('button', {name: 'Open calendar'}));
+
+    await waitFor(() => {
+      expect(
+        canvas.queryAllByRole('gridcell', {selected: true, hidden: true}),
+      ).toHaveLength(0);
+    });
+  },
+};
+
 export const ClearableWithStatus: Story = {
   render: args => {
     const [value, setValue] = useState<ISODateString | undefined>('2026-04-06');

apps/storybook/stories/DateLocaleConsistency.stories.tsx

@@ -2,7 +2,7 @@
 
 /**
  * @file DateLocaleConsistency.stories.tsx
- * @input InternationalizationProvider locale plus a fixed Gregorian date
+ * @input InternationalizationProvider locale plus a controlled Gregorian date or empty value
  * @output Side-by-side French and Thai date-formatting evidence
  * @position Storybook verification story for shared date semantics
  */
@@ -54,7 +54,7 @@ function LocaleDateExamples({locale}: {locale: Locale}) {
         </Text>
         <Calendar
           mode="single"
-          value={value}
+          value={value ?? null}
           onChange={setValue}
           focusDate="2026-08-01"
         />

packages/core/src/DateInput/DateInput.test.tsx

@@ -9,6 +9,7 @@
  * SYNC: When DateInput.tsx changes, update tests to match new behavior
  */
 
+import {useState} from 'react';
 import {describe, it, expect, vi, beforeEach} from 'vitest';
 import {
   render,
@@ -27,6 +28,7 @@ import {InputGroupText} from '../InputGroup/InputGroupText';
 import {defineTheme} from '../theme/defineTheme';
 import {generateThemeCSS} from '../theme/generateThemeRules';
 import {InternationalizationProvider} from '../i18n';
+import type {ISODateString} from '../utils';
 
 function generateThemeTestCSS(theme: Parameters<typeof generateThemeCSS>[0]) {
   const {prose, component} = generateThemeCSS(theme);
@@ -593,6 +595,42 @@ describe('DateInput', () => {
   // Full popover interaction is tested in the browser via Storybook.
 
   describe('hasClear', () => {
+    it('shows no selected calendar days after clearing', async () => {
+      const user = userEvent.setup();
+
+      function ControlledDateInput() {
+        const [value, setValue] = useState<ISODateString | undefined>(
+          '2026-01-01',
+        );
+        return (
+          <DateInput
+            label="Date"
+            value={value}
+            onChange={setValue}
+            min="2026-01-01"
+            max="2026-01-31"
+            presentation="popover"
+            hasClear
+          />
+        );
+      }
+
+      render(<ControlledDateInput />);
+      await user.click(getButton('Open calendar'));
+      await user.click(getButton(/January 15, 2026/));
+      expect(
+        screen.getAllByRole('gridcell', {selected: true, hidden: true}),
+      ).toHaveLength(1);
+
+      await user.click(getButton('Clear Date'));
+      expect(screen.getByRole('combobox')).toHaveValue('');
+      await user.click(getButton('Open calendar'));
+
+      expect(
+        screen.queryAllByRole('gridcell', {selected: true, hidden: true}),
+      ).toHaveLength(0);
+    });
+
     it('shows clear button when hasClear is true and value exists', () => {
       render(
         <DateInput

packages/core/src/DateInput/DateInput.tsx

@@ -883,7 +883,7 @@ function PointerDateField({
         <Calendar
           handleRef={calendarRef}
           mode="single"
-          value={optimisticValue}
+          value={optimisticValue ?? null}
           onChange={handleDateSelect}
           min={min}
           max={max}