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

Chiusa Adatta ai principianti
  • Qualcosa non va?
#14,195 1 commento 0 reazioni 1 assegnatario Vedi su GitHub

I maintainer di solito rispondono entro 2 giorni

@dimovpetar ci sta già lavorando.

Dal 28/10/2026.

  • #14229 di @dimovpetar — aperta

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
72/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
typescript
Ambito
frontend

Direzione di ricerca

Inizia dal gestore _ontouchstart di Carousel e dal relativo binding nel template, poi controlla il gestore dei clic delle frecce e i test correlati di Carousel. Riproduci l’evento touch annullato nell’emulazione touch e verifica che toccando una delle due frecce si avvii la navigazione e venga emesso navigate, mentre i clic del mouse, gli swipe e la navigazione da tastiera continuano a funzionare.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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.
Lingua principale
TypeScript
Stelle
1.8k
Fork
290
Merge medio
2g 16h
PR unite (30g)
49

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di UI5/webcomponents

Tutte le issue di UI5/webcomponents

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.