[Carousel]: Navigation arrows do not respond to taps on touch devices

クローズ 初心者向け
  • 何か問題がありますか？
#14,195 コメント 1 件 リアクション 0 件 担当者 1 名 GitHub で見る

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

@dimovpetar がすでに取り組んでいます。

2026年10月28日 から。

  • #14229 @dimovpetar による — オープン

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
72/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
typescript
領域
frontend

調査の方向性

Carousel の _ontouchstart ハンドラーとテンプレートでのバインディングから始め、矢印のクリックハンドラーと関連する Carousel のテストを確認します。タッチエミュレーションでキャンセルされたタッチイベントを再現し、どちらかの矢印をタップするとナビゲーションが行われて navigate が発行されること、またマウスクリック、スワイプ、キーボード操作でのナビゲーションも引き続き機能することを確認します。

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

説明

bug Medium Prio TOPIC RD
Bug Description

On touch devices the navigation arrows of ui5-carousel are rendered, but tapping them does nothing: no page change, no navigate event and no error. Swiping and keyboard navigation work, and the same arrows work when they are clicked with a mouse.

_ontouchstart cancels the touchstart event whenever its target is one of the arrows:

_ontouchstart(e) {
    const target = e.target;
    if (target.hasAttribute("data-ui5-arrow-forward") || target.hasAttribute("data-ui5-arrow-back")) {
        e.preventDefault();
    }
}

The template binds this handler (onTouchStart) as a non-passive listener, so the cancellation takes effect. A cancelled touchstart keeps the browser from dispatching the compatibility mouse events and the click, so _navButtonClick is never reached. For mouse input, _onmousedown cancels mousedown in the same way; that only prevents the focus change and still lets the click through.

Affected Component

Carousel

Expected Behaviour

Tapping the forward or back arrow on a touch device navigates to the next or previous page, just as clicking it with a mouse does.

Isolated Example
<ui5-carousel arrows-placement="Navigation">
    <div>Page 1</div>
    <div>Page 2</div>
    <div>Page 3</div>
</ui5-carousel>

The default arrows-placement="Content" is affected as well, because the content arrows are always visible on touch devices (see #10383).

Steps to Reproduce
  1. Render the carousel above.
  2. Open the page on a touch device, or in Chrome DevTools device mode with touch emulation, and reload it there.
  3. Tap the forward arrow.
  4. Nothing happens. Swiping changes the page, and on a desktop without touch emulation a mouse click on the arrow works.

Console check in the touch-emulated page:

const carousel = document.querySelector("ui5-carousel");
const arrow = carousel.shadowRoot.querySelector("[data-ui5-arrow-forward]");
const touch = new Touch({ identifier: 1, target: arrow, clientX: 0, clientY: 0 });
const event = new TouchEvent("touchstart", { bubbles: true, cancelable: true, composed: true, touches: [touch], changedTouches: [touch] });
arrow.dispatchEvent(event);
event.defaultPrevented; // true
arrow.click(); // navigates, so the click handler itself works
Log Output, Stack Trace or Screenshots

No errors are logged.

Priority

Medium

UI5 Web Components Version

2.27.2 (the same _ontouchstart code is still in 2.28.1)

Browser

Chrome

Operating System

macOS, Chrome DevTools device emulation with touch

Additional Context

Possible fix: cancel only mousedown (to keep the focus where it is) but not touchstart, or handle the tap on touchend.

Current workaround: set hide-navigation-arrows when no fine pointer is available (matchMedia("(any-pointer: fine)")) and rely on swiping on touch devices.

Declaration
  • I’m not disclosing any internal or sensitive information.
主要言語
TypeScript
スター
1.8k
フォーク
290
平均マージ
2日 16時間
マージ済み PR（30日）
49

環境構築

はじめの一歩

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

UI5/webcomponents のほかの issue

UI5/webcomponents の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

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

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