diff --git a/.changeset/eleven-apes-prove.md b/.changeset/eleven-apes-prove.md new file mode 100644 index 00000000000..77d9501dbb8 --- /dev/null +++ b/.changeset/eleven-apes-prove.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Prevent focus reset on date/time input clicks in Safari. diff --git a/packages/react/src/TextInput/TextInput.stories.tsx b/packages/react/src/TextInput/TextInput.stories.tsx index 74afc18adcc..fa4fcb273f6 100644 --- a/packages/react/src/TextInput/TextInput.stories.tsx +++ b/packages/react/src/TextInput/TextInput.stories.tsx @@ -32,7 +32,7 @@ export const Playground = (args: FormControlArgs) => {
- + {captionArgs.children && } {validationArgs.children && validationArgs.variant && ( diff --git a/packages/react/src/TextInput/TextInput.tsx b/packages/react/src/TextInput/TextInput.tsx index 5aa61e3040a..be52c1d5e2f 100644 --- a/packages/react/src/TextInput/TextInput.tsx +++ b/packages/react/src/TextInput/TextInput.tsx @@ -97,8 +97,15 @@ const TextInput = React.forwardRef( loading && (loaderPosition === 'leading' || Boolean(LeadingVisual && loaderPosition !== 'trailing')) const showTrailingLoadingIndicator = loading && (loaderPosition === 'trailing' || Boolean(loaderPosition === 'auto' && !LeadingVisual)) - const focusInput: MouseEventHandler = () => { - inputRef.current?.focus() + + // Date/time input types that have segment-based focus + const isSegmentedInputType = type === 'date' || type === 'time' || type === 'datetime-local' + + const focusInput: MouseEventHandler = e => { + // Don't call focus() if the input itself was clicked on date/time inputs. + if (e.target !== inputRef.current || !isSegmentedInputType) { + inputRef.current?.focus() + } } const leadingVisualId = useId() const trailingVisualId = useId()