Prevent focus reset on date/time input clicks in Safari (#7189)

Author: liuliu-dev

.changeset/eleven-apes-prove.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Prevent focus reset on date/time input clicks in Safari.

packages/react/src/TextInput/TextInput.stories.tsx

@@ -32,7 +32,7 @@ export const Playground = (args: FormControlArgs<TextInputProps>) => {
     <form className={classes.Container}>
       <FormControl {...parentArgs}>
         <FormControl.Label {...labelArgs} />
-        <TextInput value={value} onChange={handleChange} {...args} />
+        <TextInput value={value} onChange={handleChange} onInput={handleChange} {...args} />
         {captionArgs.children && <FormControl.Caption {...captionArgs} />}
         {validationArgs.children && validationArgs.variant && (
           <FormControl.Validation {...validationArgs} variant={validationArgs.variant} />

packages/react/src/TextInput/TextInput.tsx

@@ -97,8 +97,15 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
       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()