Issue — [Bug] s-date-field: clicking within the input text closes the calendar popover, making mouse-based editing impossible
Component: s-date-field (Polaris App Home web component)
Surface: App Home (embedded app)
Framework: React + TypeScript (React Router 7)
Summary
When an s-date-field is focused and its calendar popover is open, clicking anywhere within the input’s text (for example, on the year segment to reposition the cursor) closes the popover instead of moving the caret. This makes it effectively impossible to perform partial edits with the mouse.
In practice, the only reliable way to change the date is full keyboard entry. The calendar popover is also not a practical alternative for dates far in the past (such as company founding dates), because navigation is limited to one‑month‑at‑a‑time arrows.
Steps to reproduce
- Render an s-date-field in an App Home extension with an existing value (for example, 2026-05-13).
- Click into the field — it focuses and the calendar popover opens.
- Click on the year portion of the text (2026) to place the cursor there and edit just the year.
Expected behavior
- Clicking within the input’s text should move the caret to the click position and keep the calendar popover open (or at minimum, the caret should move and editing should continue normally).
Actual behavior
- The popover closes immediately.
- The click does not give a usable caret position, so partial date edits via mouse are effectively impossible.
Environment
- Component: s-date-field (Polaris App Home web component)
- Surface: App Home (embedded Shopify app)
- Framework: React Router 7, TypeScript
- Browser: Chrome (version 150.0.7871.46)