iOS keyboard can collapse an upward popover to max-height 0

Abierto
  • ¿Algo no está bien?
#10,891 2 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

@kokoskiwi ya está trabajando en esto.

Desde el 29/10/2026.

  • #10892 de @kokoskiwi — abierto

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
76/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
ios, react, typescript
Área
accessibility, frontend

Línea de trabajo

Start by locating getContainerDimensions and getMaxHeight in React Aria’s popover positioning code; the issue identifies their inconsistent use of the visual viewport origin as the cause. Trace how the viewport origin and pinch zoom handling feed the height calculation, then add a deterministic hook level regression test using the recorded viewport values. Done when the test verifies a positive available height instead of max-height: 0.

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

Descripción

Provide a general summary of the issue here

An upward React Aria popover can receive max-height: 0 on iOS 26 Safari while the software keyboard is open. The visual viewport's offsetTop can disagree with the coordinate system used by the trigger and boundary rectangles.

🤔 Expected Behavior?

The popover should use the available space above its trigger, including its scrollable list, while the keyboard is visible.

😯 Current Behavior

On an iPhone 17 Simulator running iOS 26.5, the popover opened above a composer but only its search field was visible. React Aria calculated max-height: 0 for the content. In the observed state:

Value Measurement
document.documentElement.scrollTop 466
visualViewport.pageTop 466
visualViewport.offsetTop 310
visualViewport.height 404
trigger getBoundingClientRect().top 214

getContainerDimensions uses pageTop - scrollTop (0) as the viewport top, but getMaxHeight uses offsetTop (310). For a top popover, that makes the available height clamp to zero. The same calculation without the inconsistent offsetTop yields about 198 px in the reduced test case.

💁 Possible Solution

Use the visual viewport origin already calculated by getContainerDimensions when bounding popover height, including its existing pinch zoom handling.

🔦 Context

This affects an upward Collections picker with an internal search field above a bottom composer. The picker cannot display or scroll its choices while the keyboard is open. A deterministic regression test for the observed viewport values will be included in the proposed fix.

🖥️ Steps to Reproduce
  1. On iOS 26 Safari, place a React Aria popover above an input near the bottom of a scrolled page, with a search field inside the popover.
  2. Open the software keyboard, then open the popover with placement="top".
  3. Inspect the popover's computed max-height and the visualViewport values above. The issue occurs when WebKit reports a positive offsetTop although the rects remain in the layout viewport's coordinates.

The hook-level regression test in the proposed PR fixes the recorded geometry at these values, verifies the current code returns max-height: 0, and checks the expected positive height after the change.

Version

react-aria 3.53.1

What browsers are you seeing the problem on?

Safari

If other, please specify.

N/A

What operating system are you using?

iOS 26.5 (iPhone 17 Simulator)

🧢 Your Company/Team

Independent application using React Aria

🕷 Tracking Issue

None

Lenguaje dominante
TypeScript
Estrellas
16k
Forks
1.6k
Merge medio
4 d 3 h
PR fusionados (30 d)
39

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.