fix: handle pointercancel in tabbar highlight to prevent stale touch state #4381
+12
−0
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…touch state 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 <cursoragent@cursor.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Fixes #4380
The
pointercancelevent listener was already registered ondocumentininitTabbarHighlight, but thef7ToolbarOnPointerhandler had no case fore.type === 'pointercancel'. This causeddata.touchedto remaintrueafter the pointer sequence was cancelled by the system (e.g., when the app is backgrounded on iOS/Android or a browser tab loses focus).On resume, the next
pointerupanywhere ondocumentwould triggerunsetHighlightOnTouch(), which calculates the closest tab from the touch coordinates and calls.click()— switching tabs unintentionally.Changes
Added a
pointercancelhandler that:data.touchedanddata.movedtofalsedata.setTransformtab-link-highlight-pressedCSS classdata.activeIndex) without triggering any clickThis mirrors the cleanup logic of
pointerupbut intentionally skipsunsetHighlightOnTouch()to avoid triggering a tab change.Test Plan
ToolbarPaneMade with Cursor