PreviewTrigger: option to open on press (tap) instead of long press on touch devices

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

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
30/100
Tipo de issue
Nueva funcionalidad
Claridad
Bastante claro
Estado de actividad
Activo
Stack tecnológico
react, typescript
Área
frontend

Línea de trabajo

Start with the PreviewTrigger component and its long-press handling, then read how the hover, focus and press events open the popover. The issue leaves the API open (a touchTrigger prop or an openOnPress boolean, or a configurable long-press delay), so a maintainer must choose one before coding. Done means a tap toggles the popover with the option on, long press stays the default, and tests cover mouse, keyboard and touch. Read #8905 and #10243 for the earlier decisions.

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

Descripción

enhancement
Provide a general summary of the feature here

Add an option to PreviewTrigger so a regular press (a tap on touch devices) opens the preview. Today a touch user has to long press. The option is for triggers whose only job is to show the popover, such as an info button, rather than links.

🤔 Expected Behavior?

With the option on (for example <PreviewTrigger openOnPress> or touchTrigger="press"):

  • Mouse: hover opens after the usual delay, as now. Clicking the trigger also toggles the popover.
  • Keyboard: focus opens it, as now. Enter or Space toggles it.
  • Touch: a tap toggles the popover. Pressing outside or Escape closes it, as with any non-modal popover.

Long press stays the default, so link previews keep working as they do today.

😯 Current Behavior

PreviewTrigger opens on hover, on focus and on long press. A tap runs the trigger's own action (onPress, or navigation for a Link).

That's right for link previews. But when the trigger's only purpose is to reveal the popover (an info icon next to a field label or table header, for example), touch users have to discover a long press. Tooltip isn't an alternative, because it isn't shown on touch at all, and it can't contain interactive content anyway.

The workaround is to combine useHover with a controlled DialogTrigger/Popover. That means re-implementing the warmup and cooldown delays, the safe-area polygon and the focus behaviour that PreviewTrigger already handles.

💁 Possible Solution

Either of these would work for us:

  1. Open on press. Add a prop that sets how touch users open the preview, for example touchTrigger?: 'longPress' | 'press' (default 'longPress'), or a boolean openOnPress that makes a press on any pointer type toggle the popover.
  2. Configurable long-press threshold. If it fits the current implementation better, expose the long-press delay as a prop. Setting it to 0 for these triggers would give the same result as option 1.

Prior art: Base UI's Popover.Trigger has an openOnHover prop (https://base-ui.com/react/components/popover). Hover is mouse-only and click or tap always opens it, so the same trigger works on hover with a mouse and on tap with touch. This was mentioned in #8905, which PreviewTrigger (#10243) closed.

🔦 Context

We're building a design system on React Aria Components for a mature data product. A common pattern is a small "info" trigger next to labels and column headers. It opens a non-modal popover with a short explanation and sometimes a link. On desktop it should open on hover. On touch it needs to open on tap, because a long press on a plain icon button isn't discoverable.

PreviewTrigger is very close to what we need. It's only the touch gesture that rules it out for this pattern.

💻 Examples
<PreviewTrigger touchTrigger="press">
  <Button aria-label="About this field">
    <InfoIcon />
  </Button>
  <Popover>
    <Dialog>
      Rows are sampled from the last 7 days. <Link href="/docs/sampling">Learn more</Link>
    </Dialog>
  </Popover>
</PreviewTrigger>
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.