Skip to content

fix(nav-drawer): preserve single-tap actions on iOS - 22.1.x - #17559

Open
viktorkombov wants to merge 6 commits into
22.1.xfrom
vkombov/bug-17472-22.1.x
Open

viktorkombov wants to merge 6 commits into
22.1.xfrom
vkombov/bug-17472-22.1.x

Conversation

@viktorkombov

Copy link
Copy Markdown
Contributor

Closes #17472

Description

Fixes an iOS regression where Navbar and icon-button actions could require two taps while Navigation Drawer gestures were enabled.

The Navigation Drawer now waits for meaningful horizontal movement before claiming the touch gesture and preventing native behavior. This preserves single-tap actions and vertical scrolling while keeping edge-swipe navigation working.

Implementation

The Navigation Drawer previously started tracking a pan immediately on pointerdown. Its document-level touchmove listener could consequently call preventDefault() for the small involuntary movement produced during a tap. On iOS, this can suppress the compatibility click, making actions appear to require two taps.

The fix separates gesture eligibility from gesture recognition:

  • pointerDown only checks whether the gesture is eligible, such as starting inside the drawer edge zone.
  • A pan starts only after at least 5px of primarily horizontal movement.
  • touchmove is prevented only after the pan has been recognized.
  • Taps and vertical movement retain their native browser behavior.

Testing

  • Added touch-manager gesture arbitration tests.
  • Added a Navigation Drawer tap regression test.
  • Verified the focused test suite passes.

Type of Change (check all that apply):

  • Bug fix
  • New functionality
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Refactoring (no functional changes)
  • Documentation
  • Demos
  • CI/CD
  • Tests
  • Changelog
  • Skills/Agents

Component(s) / Area(s) Affected:

How Has This Been Tested?

  • Unit tests
  • Manual testing
  • Automated e2e tests

Test Configuration:

  • Angular version:
  • Browser(s):
  • OS:

Screenshots / Recordings

Checklist:

  • All relevant tags have been applied to this PR
  • This PR includes unit tests covering all the new code (test guidelines)
  • This PR includes API docs for newly added methods/properties (api docs guidelines)
  • This PR includes feature/README.MD updates for the feature docs
  • This PR includes general feature table updates in the root README.MD
  • This PR includes CHANGELOG.MD updates for newly added functionality
  • This PR contains breaking changes
  • This PR includes ng update migrations for the breaking changes (migrations guidelines)
  • This PR includes behavioral changes and the feature specification has been updated with them
  • Accessibility (ARIA, keyboard navigation, focus management) has been verified

@mddragnev mddragnev added ✅ status: verified Applies to PRs that have passed manual verification and removed ❌ status: awaiting-test PRs awaiting manual verification labels Sep 1, 2026
Copilot AI lite review requested due to automatic review settings September 17, 2026 05:35

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟡 Changes recommended

The regression test checks an incorrect CSS class token, leaving part of its assertion ineffective.

Get a fresh assessment by requesting another Copilot review.

Pull request overview

This PR fixes iOS tap suppression by delaying Navigation Drawer pan recognition until meaningful horizontal movement.

Changes:

  • Added configurable pan thresholds and axis filtering.
  • Separated drawer gesture eligibility from pan recognition.
  • Added touch-manager and Navigation Drawer regression tests.
File summaries
File Description
navigation-drawer.component.ts Configures delayed horizontal gesture recognition.
navigation-drawer.component.spec.ts Adds tap and gesture tests.
core/src/core/touch.ts Implements pan thresholds, axis filtering, and cleanup.
core/src/core/touch.spec.ts Tests gesture arbitration and state reset.
Review details
  • Files reviewed: 4/4 changed files
  • Comments generated: 1
  • Review effort level: Lite

💡 Add a code-review agent skill for context-aware, tailored reviews. Learn more in the docs.

document.body.dispatchEvent(touchMove);

expect((navDrawer as any)._panning).toBeFalse();
expect(navDrawer.drawer.classList).not.toContain('panning');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

navigation-bar Navigation Bar component touch-manager version: 22.1.x ✅ status: verified Applies to PRs that have passed manual verification

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants