Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
3 tasks done
Amoyens1s opened this issue Feb 27, 2024 · 3 comments
Open
3 tasks done

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

Amoyens1s opened this issue Feb 27, 2024 · 3 comments
Assignees
Labels
needs: reply the issue needs a response from the user

Comments

@Amoyens1s
Copy link

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 ionitron-bot bot added the triage label Feb 27, 2024
@mapsandapps mapsandapps added the ionitron: needs reproduction a code reproduction is needed from the issue author label Feb 27, 2024
Copy link

ionitron-bot bot commented Feb 27, 2024

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.

@ionitron-bot ionitron-bot bot removed the triage label Feb 27, 2024
@Amoyens1s
Copy link
Author

Amoyens1s commented Feb 28, 2024

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

@amandaejohnston amandaejohnston added triage and removed ionitron: needs reproduction a code reproduction is needed from the issue author labels Feb 29, 2024
@liamdebeasi
Copy link
Contributor

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?

@liamdebeasi liamdebeasi added the needs: reply the issue needs a response from the user label May 1, 2024
@ionitron-bot ionitron-bot bot removed the triage label May 1, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
needs: reply the issue needs a response from the user
Projects
None yet
Development

No branches or pull requests

5 participants