Bug reportNov 9, 2026· 0:35· 11 views
Carbon Design System React DatePicker: pressing Enter after editing locks the calendar — clicks no longer reopen it
0:35 total
Comments · 0
Be the first to comment.
Bug reportby SceneRecap AI
mediumDatePicker open/close state handling on Enter keydown. The calendar appears to open only on focus, so a click on an input that already has focus after Enter closes the calendar does not reopen it. The calendar icon click handler shows the same problem.
os: macOSdpr: 1page: /iframe.html (Storybook story components-datepicker--single-with-calendar)locale: en-USbrowser: Chromium 151.0.7922.34timezone: Europe/Berlinviewport: 1280x720
Repro steps
- 1.Open the Storybook story components-datepicker--single-with-calendar. The 'Date Picker label' input is empty with placeholder mm/dd/yyyy.
- 2.Click the 'Date' textbox. The calendar opens on November 2026.
- 3.Click day '15'. The input shows 11/15/2026 and the calendar closes.
- 4.Click the 'Date (edit)' textbox. The calendar reopens. Edit the text so it reads 11/20/2026.
- 5.Press Enter. The calendar closes and the input shows 11/20/2026. The input stays focused.
- 6.Click the 'Date (bug click)' textbox again.
- 7.Click the 'Calendar icon' button.
Expected
Clicking the input or the calendar icon after pressing Enter reopens the calendar, with 11/20/2026 highlighted.
Actual
After Enter, clicking the focused input at 17.2s and the calendar icon at 20.2s does nothing. The input stays focused with 11/20/2026 and no calendar appears (19s, 21s). The calendar only opens again after the input loses focus from a click on the page background (23.5s) and the input is clicked again (25.9s).
Evidence
visualControl: the first click on the empty 'Date' textbox opens the calendar on November 2026, with the 9th marked as today.
visualControl: after day 15 is clicked, the input shows 11/15/2026 and the calendar closes as expected.
visualControl: clicking the input to edit reopens the calendar. The input reads '11/2' and day 15 is highlighted.
visualAfter Enter, the input shows 11/20/2026 with focus kept and the calendar closed.
visualA red banner reads 'BUG: clicking input after Enter does not open calendar'. After the click on the 'Date (bug click)' textbox, the input stays focused and no calendar is shown.
visualAfter the click on the 'Calendar icon' button at 20.2s, the calendar still does not open.
visualAfter the click on the page background at 23.5s, the input loses its focus ring and still shows 11/20/2026.
visualWorkaround: after blur, the click on the 'Date (workaround click)' textbox at 25.9s opens the calendar with day 20 highlighted.
visualThe calendar stays open while the cursor hovers over days 11 and 25.
Issue markdown (copy-paste ready)
## Summary In the Carbon React DatePicker (single, with calendar), pressing Enter after editing the date closes the calendar but leaves the input focused. After that, clicking the input or the calendar icon does not reopen the calendar until the input is blurred. ## Environment - Chromium 151.0.7922.34, macOS - Viewport 1280x720, DPR 1, locale en-US, timezone Europe/Berlin - Storybook: `/iframe.html`, story `components-datepicker--single-with-calendar` ## Steps to reproduce 1. Open the story. The input is empty with placeholder `mm/dd/yyyy` (0s). 2. Click the date input. The calendar opens on November 2026 (4.5s). 3. Click day `15`. The input shows `11/15/2026` and the calendar closes (7.7s). 4. Click the input again. The calendar reopens. Edit the value to `11/20/2026` (10.1s). 5. Press **Enter**. The calendar closes and the value is `11/20/2026`. Focus stays in the input (12.1s). 6. Click the input (17.2s). 7. Click the calendar icon (20.2s). ## Expected The calendar reopens on click, with 20 highlighted. ## Actual Nothing happens on either click. The input stays focused with `11/20/2026` and no calendar is shown (19s, 21s). ## Workaround Click outside the input first (23.5s). Then click the input (25.9s). The calendar opens with day 20 highlighted (27s). ## Control (works) - First click on the empty input opens the calendar (5s). - Clicking the input after selecting a day reopens the calendar (11s). ## Evidence - 13s: after Enter, the calendar is closed and the input keeps focus. - 19s / 21s: no calendar after the input click and the icon click. - 25s: the input loses focus after the outside click. - 27s to 31s: the calendar opens and stays open after the blur and a new click. ## Suggested area DatePicker open state after an Enter keydown. Opening seems to depend on a focus event, so a click on an input that already has focus does not trigger it. The calendar icon handler is affected in the same way. *Recorded with SceneRecap.*
Your recordings could explain themselves too.
Free plan · silent recordings welcome · bug reports included.
Try SceneRecap free →