From ebb35d4ea29e84e946564f7ca0f83acca91308f7 Mon Sep 17 00:00:00 2001 From: Umakhan Magomedov Date: Wed, 11 Feb 2026 01:27:27 +0300 Subject: [PATCH] fix: handle pointercancel event in tabbar highlight to prevent stale touch state MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The pointercancel event listener was registered but not handled in the f7ToolbarOnPointer callback. When a Capacitor/Cordova app is backgrounded (or a browser tab loses focus), the OS fires pointercancel to terminate active pointer sequences. Without handling this event, data.touched remains true after resume. The next pointerup anywhere on the document then triggers unsetHighlightOnTouch, which calculates the closest tab link from the touch coordinates and calls .click() on it — causing an unintended tab switch. This commit adds a pointercancel handler that resets the touch state (touched, moved, setTransform), stops the animation, removes the pressed class, and restores the highlight to the currently active tab position without triggering any click. Co-authored-by: Cursor --- src/core/components/toolbar/tabbar-highlight.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/core/components/toolbar/tabbar-highlight.js b/src/core/components/toolbar/tabbar-highlight.js index feb3dccf7..2cce29125 100644 --- a/src/core/components/toolbar/tabbar-highlight.js +++ b/src/core/components/toolbar/tabbar-highlight.js @@ -100,6 +100,18 @@ export const initTabbarHighlight = (el) => { unsetHighlightOnTouch(data); stopAnimation(data); } + if (e.type === 'pointercancel') { + if (!data.touched) return; + data.touched = false; + data.moved = false; + data.setTransform = null; + stopAnimation(data); + if (highlightEl) { + highlightEl.classList.remove('tab-link-highlight-pressed'); + highlightEl.style.transform = `translateX(${data.activeIndex * 100}%)`; + highlightEl.style.transitionTimingFunction = ''; + } + } }; el.addEventListener('touchstart', el.f7ToolbarOnPointer, { passive: false }); el.addEventListener('pointerdown', el.f7ToolbarOnPointer, { passive: false });