TexInput `onClick` focus behavior broken with `type=date` on Safari

[pevd950]

Description

The input focus behavior is broken when using a TextInput with input types such as date and time. Regardless of which part of the input is clicked, focus is reset to the beginning.

Keyboard tab behavior works fine however. Each tab press moves the focus to the next date/time field.

https://github.com/primer/react/assets/12861801/8ceea495-0072-4809-bfff-68c58a6d1e77

Identified on primer/react v35.32.2, but was also able to reproduce on the latest version v36.13.0

Steps to reproduce

1. Go to https://codesandbox.io/p/sandbox/wizardly-sinoussi-42ktdx
2. Click on the day, year or time fields in the input box

Version

v35.32.2

Browser

Safari

[github-actions[bot]]

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.

[sunnyi101]

Notes for FR: Confirm its a bug, size it and send it back to inbox

[francinelucca]

Confirmed this is a bug, there's two issues:

• input focus: https://github.com/primer/react/blob/main/packages/react/src/TextInput/TextInput.tsx#L100 I think we need to check the focused element before doing this, because this is what's forcing the reset when trying to click on a part of the calendar/time selector
• Even after removing the input focus, I noticed the input wasn't changing when making a selection on the calendar. this is because onChange is not being triggered, we need to find another event to tap into so we can modify the value when the calendar is selected 🤔 , though not sure what that event is

[thechillotterq]

😘

[liuliu-dev]

Trending

🟣 done

Summary

Fixed focus behavior for date/time inputs on Safari and fixed the playground story for controlled date/time inputs.

Update

Before:

• When clicking on a TextInput with type=date, Safari would always reset focus to the beginning of the input.
• The playground story for the controlled date/time inputs had a broken onChange control, so clicking on a date would not update the selected value.

https://github.com/user-attachments/assets/ec415f47-2666-4504-876f-7c4f805eb41a

After:

• Fixed the focus behavior for date/time inputs on Safari.
  • Modified the focusInput handler to check the currently focused element before resetting focus. If it is a date picker, the focus reset is avoided.
• Fixed the playground story for controlled date/time inputs.
  • Added an onInput handler alongside onChange to ensure value updates work correctly.

https://github.com/user-attachments/assets/89ecb11f-623e-4495-b8af-79e24a697143