Ionic-framework: Ionic 3 - Clicking multiple times on same tab breaks page

Created on 2 Apr 2017  ·  13Comments  ·  Source: ionic-team/ionic-framework

Ionic version: (check one with "x")
[x] 3.x

I'm submitting a ... (check one with "x")
[x] bug report

Current behavior:
On a tabs page, if you click multiple times on the same tab-button (quickly) the page breaks.
A dismiss transition is started and then a blank screen is shown.
Unfortunately the console logs no errors.
EDIT:
If you scroll down the page and then click on the current tab-button the scroll-position is reset to 0. I presume that the whole page is reloaded every time you click on the tab button.

Expected behavior:
If I click on a tab, that is already opened, nothing should happen. Just like in v2.

Steps to reproduce:
Clone this repo: https://github.com/Daskus1/ionic-tabs-v3
To reproduce the issue open the home page and click a few times on the Home-Button. You will see that the dismiss transition and the page will remain blank.

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Cordova CLI: 6.4.0
Ionic Framework Version: 3.0.0-beta.2
Ionic CLI Version: 2.2.2
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.2.5
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v7.6.0
Xcode version: Not installed

Most helpful comment

All 13 comments

Same issue for me. If the page has a ion-grid and the clicked the same tab again the content of ion-grid will disappear.

ordova CLI: 6.4.0
Ionic Framework Version: 3.0.0-beta.3
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.2.5
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.10.0
Xcode version: Not installed

If the tab is currently displayed, another click reinit the component and refresh the view.

I can also confirm that #11084 fixes this 🎉

I just realized this but unfortunately #11084 doesn't fix the problem entirely.

It fixes the problem whereby the page is refreshed when clicking the tab again. It prevents that.

However it does NOT fix the issue where clicking the tab while it is active should scroll the page to the top. Tapping the tab with #11084 does NOT scroll the page to the top. This behavior seems to have been broken as well.

@longzheng Don't think this behaviour has been coded yet.
on iOS you can click on the statusbar to scroll to the top.

@youssmak Hmmm I might have misremembered then, I thought I saw this behavior in Ionic 2 but I'm probably mistaken.

@longzheng if you click on an active tab in version 2.x it does NOT scroll to the top. So I think this is the expected behavior and #11084 should fix this issue.

@Daskus1 Cool. My mind is tricking me then 🤦‍♂️

Hey, everyone! This issue was fixed with https://github.com/driftyco/ionic/pull/11084. Thanks @soumak77 (:

@jgw96 Hi! My iOS app is still having this issue. When tapping a tab it reloads and when tapping many times really fast it goes all black. I noticed it with version 3.4.0 but also 3.5.0 makes no diference. Any ideas? Is there something on code that I should add? I created a new app with the tabs template and it does not show the issue, but mine does.

global packages:

@ionic/cli-utils : 1.5.0
Cordova CLI      : 7.0.1 
Ionic CLI        : 3.5.0

local packages:

@ionic/app-scripts              : 1.3.0
@ionic/cli-plugin-cordova       : 1.4.1
@ionic/cli-plugin-ionic-angular : 1.3.1
Cordova Platforms               : ios 4.4.0
Ionic Framework                 : ionic-angular 3.0.1

System:

Node       : v6.10.2
OS         : macOS Sierra
Xcode      : Xcode 8.3.2 Build version 8E2002 
ios-deploy : 1.9.1 
ios-sim    : 5.0.13 
npm        : 4.6.1

Updating manually ionic-angular to 3.5.3 solved the problem

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

giammaleoni picture giammaleoni  ·  3Comments

brandyscarney picture brandyscarney  ·  3Comments

vswarte picture vswarte  ·  3Comments

manucorporat picture manucorporat  ·  3Comments

MrBokeh picture MrBokeh  ·  3Comments