From 219d08c82e399ffeae974dd931181ec4d34ac661 Mon Sep 17 00:00:00 2001 From: Lebaud Antoine Date: Wed, 21 Jun 2023 17:05:07 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(react)=20prevent=20ENTER=20event?= =?UTF-8?q?=20being=20triggered=20twice=20on=20calendar=20grid-cell?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit iThe Button component is not utilizing the headless UI Button from react-aria. When pressing ENTER on calendar grid cells, the onClick event handler is being called twice. This issue remained unnoticed when the date picker only selected a single date and closed. However, when selecting a range of dates, this double triggering becomes problematic. --- .../react/src/components/Forms/DatePicker/CalendarCell.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/react/src/components/Forms/DatePicker/CalendarCell.tsx b/packages/react/src/components/Forms/DatePicker/CalendarCell.tsx index 31d8145..9bb0ad1 100644 --- a/packages/react/src/components/Forms/DatePicker/CalendarCell.tsx +++ b/packages/react/src/components/Forms/DatePicker/CalendarCell.tsx @@ -80,6 +80,11 @@ export const CalendarCell = ({ state, date }: CalendarCellProps) => { )} disabled={isDisabled} {...buttonProps} + // The keyboard's ENTER event triggers the button twice. + // We could prevent this behavior using their headless ui + // button component. + onKeyDown={(e) => e.preventDefault()} + onKeyUp={(e) => e.preventDefault()} ref={ref} > {formattedDate}