fix(input-date-picker): allow navigating between months using chevron actions in Safari (#11547)

anveshmekala · benelan · commit 9b8c02ea799b · 2025-02-13T21:44:33.000-08:00
**Related Issue:** #11544 ## Summary No longer closes the `input-date-picker` when navigating between month using chevron actions.
diff --git a/packages/calcite-components/src/components/action/action.tsx b/packages/calcite-components/src/components/action/action.tsx
@@ -308,6 +308,8 @@ export class Action extends LitElement implements InteractiveComponent, Loadable
         disabled={disabled}
         id={buttonId}
         ref={this.buttonEl}
+        // tabIndex is required for the button to be focusable on click in safari.
+        tabIndex={disabled ? null : 0}
       >
         {buttonContent}
       </button>

Original file line number	Diff line number	Diff line change
`@@ -308,6 +308,8 @@ export class Action extends LitElement implements InteractiveComponent, Loadable`
`308`	`308`	`disabled={disabled}`
`309`	`309`	`id={buttonId}`
`310`	`310`	`ref={this.buttonEl}`
	`311`	`+ // tabIndex is required for the button to be focusable on click in safari.`
	`312`	`+ tabIndex={disabled ? null : 0}`
`311`	`313`	`>`
`312`	`314`	`{buttonContent}`
`313`	`315`	`</button>`