ionic-team / ionic-team/ionic-framework

bug(angular, ios): routerDirection is reversed, when tapping current tab on root page of the tab

Open
#19,759 3 comments 0 reactions 0 assignees View on GitHub
package: angular type: bug
Dominant language
TypeScript
Stars
52.7k
Forks
13.3k
Avg merge
1d 15h
Merged PRs (30d)
51

Description

# Bug Report

**Ionic version:**

**4.11.1**

**Current behavior:**
If you tap the current tab on the root page of the tab, the page transition **other than the routerLink directive** will reverse routerDirection on iOS.

**Expected behavior:**
No matter how many times you tap the tab, it should become the appropriate routerDirection.

**Steps to reproduce:**
1. enable iOS mode
1. go to `/tabs/tab1` page
1. tap button `Tab One`
1. tap link `navigateByUrl Page1`

https://stackblitz.com/edit/ionic-v4-angular-tabs-mv5vvs

![201910261953](https://user-images.githubusercontent.com/28551976/67618438-add14a00-f82a-11e9-9226-f580bd1e7172.gif)

**Other information:**

Is routerDirection rewritten when the current tab is tapped even if page transition does not occur?

https://github.com/ionic-team/ionic/blob/master/core/src/components/tab-button/tab-button.tsx#L92-L96
https://github.com/ionic-team/ionic/blob/master/angular/src/directives/navigation/ion-tabs.ts#L79

**Ionic info:**

```
Ionic:

Ionic CLI : 5.4.1 (/Users/imnskh/.anyenv/envs/nodenv/versions/10.16.0/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.11.1
@angular-devkit/build-angular : 0.803.9
@angular-devkit/schematics : 8.3.9
@angular/cli : 8.3.9
@ionic/angular-toolkit : 2.0.0

Cordova:

Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : ios 5.0.1
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 3.1.2, (and 23 other plugins)

Utility:

cordova-res : not installed
native-run : not installed

System:

ios-deploy : 1.9.4
ios-sim : 8.0.2
NodeJS : v10.16.0 (/Users/imnskh/.anyenv/envs/nodenv/versions/10.16.0/bin/node)
npm : 6.12.0
OS : macOS Mojave
Xcode : Xcode 11.1 Build version 11A1027
```

Contributor guide

Open the contributing guide

Research direction

Reproduce the flow in the linked StackBlitz with iOS mode: open /tabs/tab1, tap Tab One, then tap the navigateByUrl Page1 link. Read core/src/components/tab-button/tab-button.tsx lines 92-96 and angular/src/directives/navigation/ion-tabs.ts line 79, then trace how tapping the current tab changes routerDirection. Done means repeated taps on the current tab produce the appropriate routerDirection without reversing the transition.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, ios, typescript
Domain
frontend, mobile
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.