ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
51.02k stars 13.51k forks source link

bug:tabbar show wrong actived tab when click tab fast #29092

Closed Amoyens1s closed 5 months ago

Amoyens1s commented 7 months ago

Prerequisites

Ionic Framework Version

v7.x

Current Behavior

current tab is tab2, but tab bar show tab1. img_v3_028f_e031ddbf-0d92-4e17-ace2-5221b3e4d70g

Expected Behavior

tabbar should show correct tabs

Steps to Reproduce

  1. insert many div on tabs, like <div v-for="e in 10000">tab 1 {{ e }}</div>
  2. click tabs fast,it may occur image image

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (C:\Software\nvm\v20.11.0\node_modules\@ionic\cli) Ionic Framework : @ionic/vue 7.7.3

Capacitor:

Capacitor CLI : 5.1.0 @capacitor/android : 5.1.0 @capacitor/core : 5.1.0 @capacitor/ios : not installed

Utility:

cordova-res : 0.15.4 native-run : 1.7.2

System:

NodeJS : v20.11.0 (C:\Program Files\nodejs\node.exe) npm : 10.2.4 OS : Windows 10

Additional Information

This issue has been present since I used 7.1.1. It tends to occur when there are a large number of DOM elements on the page. I attempted to reduce the DOM count using methods like virtual scrolling, but it still frequently occurs on low-end phones.

ionitron-bot[bot] commented 7 months ago

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

Amoyens1s commented 7 months ago

i created a reproduction: https://github.com/Amoyens1s/ionic-tabs-issue-reproduction

yarn install yarn dev and it can be reproducted in browser, click fast

img_v3_028g_3ec30ca9-5deb-4f20-a6f3-98344b5d0a7g

liamdebeasi commented 5 months ago

Hey there,

Apologies for the delay. I'm not able to reproduce the issue using the sample application provided. Can you please double your steps to reproduce?

ionitron-bot[bot] commented 5 months ago

Thanks for the issue! This issue is being closed due to the lack of a reply. 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.

Thank you for using Ionic!