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

オープン
  • 何か問題がありますか？
#10,777 コメント 1 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
4/5
見積もり時間
3〜5日
初心者へのやさしさ
30/100
issue の種類
機能追加
明瞭さ
おおむね明確
活発さ
活発
技術スタック
react, typescript
領域
frontend

調査の方向性

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.

索引モデルが issue の本文から書いたものです。

説明

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>
主要言語
TypeScript
スター
16k
フォーク
1.6k
平均マージ
4日 3時間
マージ済み PR（30日）
39

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

adobe/react-spectrum のほかの issue

adobe/react-spectrum の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。