From 08bde725ce27a54599eb817756e744ede80a6a0d Mon Sep 17 00:00:00 2001 From: Valerii Sidorenko Date: Tue, 23 Sep 2025 01:50:57 +0200 Subject: [PATCH] fix(RangeCalendar): ensure buttons are focused on click in Safari --- src/components/CalendarView/hooks/useCalendarProps.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/components/CalendarView/hooks/useCalendarProps.ts b/src/components/CalendarView/hooks/useCalendarProps.ts index 3d8c710..cca3136 100644 --- a/src/components/CalendarView/hooks/useCalendarProps.ts +++ b/src/components/CalendarView/hooks/useCalendarProps.ts @@ -43,6 +43,8 @@ export function useCalendarProps(props: CalendarProps, state: CalendarState | Ra const modeDisabled = state.disabled || isModeLast; const modeButtonProps: ButtonButtonProps = { + // Always set a tabIndex so that Safari allows focusing native buttons + tabIndex: 0, disabled: state.disabled, // FIXME: do not use button class name className: modeDisabled ? buttonDisabledClassName : undefined, @@ -71,6 +73,8 @@ export function useCalendarProps(props: CalendarProps, state: CalendarState | Ra }); const previousButtonProps: ButtonButtonProps = { + // Always set a tabIndex so that Safari allows focusing native buttons + tabIndex: 0, disabled: state.disabled, // FIXME: do not use button class name className: previousDisabled ? buttonDisabledClassName : undefined, @@ -104,6 +108,8 @@ export function useCalendarProps(props: CalendarProps, state: CalendarState | Ra }); const nextButtonProps: ButtonButtonProps = { + // Always set a tabIndex so that Safari allows focusing native buttons + tabIndex: 0, disabled: state.disabled, // FIXME: do not use button class name className: nextDisabled ? buttonDisabledClassName : undefined,