DatePicker popup TimeField collapses when rendered inside Form

Abierto
  • ¿Algo no está bien?
#10,899 1 comentario 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

@costajohnt ya está trabajando en esto.

Desde el 3/11/2026.

  • #10915 de @costajohnt — abierto

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
45/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Activo
Stack tecnológico
css, react, typescript
Área
design, frontend

Línea de trabajo

The bug sits where Spectrum's DatePicker popup TimeField picks up React Aria's FormContext and applies grid-template-columns: subgrid. Start by reproducing with the StackBlitz linked in the issue, then check the computed grid styles on the popup's parent flex container. Done means the time input keeps its full width inside a Form with no change in behaviour outside one.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

Provide a general summary of the issue here

When a time-enabled Spectrum 2 DatePicker is rendered inside Spectrum’s Form, the time input in its calendar popup collapses, clipping the time segments.

The same picker renders its popup time input correctly outside Form.

Image
🤔 Expected Behavior?

The popup’s time input should remain wide enough to display and edit all time segments, regardless of whether the DatePicker is inside a Form.

😯 Current Behavior

The time input shrinks and is not wide enough to interact with properly.

💁 Possible Solution

The popup TimeField appears to inherit React Aria’s FormContext. Spectrum uses the presence of this context to enable grid-template-columns: subgrid.

However, the popup TimeField’s immediate parent is a flex container rather than the Form’s grid. Its computed grid-template-columns is none, and the input collapses to its minimum width.

🔦 Context

This affects a form containing date pickers. The date fields themselves fill the form correctly, but the time inputs are clipped and difficult to use.

🖥️ Steps to Reproduce

https://stackblitz.com/edit/yn2buesf?file=src%2FExample.tsx

  1. Open the page
  2. Open the calendar popup and observe that the Time input is collapsed
  3. Close the popup and replace the surrounding <Form> with <div>, leaving the picker unchanged
  4. Open the popup again. The Time input renders at its normal width
Version

@react-spectrum/s2 1.8.2

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

macOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

Lenguaje dominante
TypeScript
Estrellas
16k
Forks
1.6k
Merge medio
2 d 17 h
PR fusionados (30 d)
41

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de adobe/react-spectrum

Todos los issues de adobe/react-spectrum

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.