🐛(react) prevent ENTER event being triggered twice on calendar grid-cell
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.
This commit is contained in:
committed by
aleb_the_flash
parent
2886f0c992
commit
219d08c82e
@@ -80,6 +80,11 @@ export const CalendarCell = ({ state, date }: CalendarCellProps) => {
|
|||||||
)}
|
)}
|
||||||
disabled={isDisabled}
|
disabled={isDisabled}
|
||||||
{...buttonProps}
|
{...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}
|
ref={ref}
|
||||||
>
|
>
|
||||||
{formattedDate}
|
{formattedDate}
|
||||||
|
|||||||
Reference in New Issue
Block a user