ionic-framework: bug: ion-segment on android
Bug Report
Ionic version: [x] 5.x
Current behavior: only 1st ion-segment-button within ion-segment is clickable on android… on ios it is working fine
Expected behavior: all <ion-segment-button> should be clickable on android
Steps to reproduce: install ionic 5 and run on android
<ion-toolbar>
<ion-segment value="general" (ionChange)="segmentChanged($event)">
<ion-segment-button value="general">
<ion-label>General</ion-label>
</ion-segment-button>
<ion-segment-button value="notifications">
<ion-label>Notification</ion-label>
</ion-segment-button>
</ion-segment>
</ion-toolbar>
Related code:
insert short code snippets here
Other information:
Ionic info:
Ionic:
Ionic CLI : 5.4.16
Ionic Framework : @ionic/angular 5.0.0
@angular-devkit/build-angular : 0.803.23
@angular-devkit/schematics : 8.1.3
@angular/cli : 8.1.3
@ionic/angular-toolkit : 2.1.2
Cordova:
Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : android 8.1.0, browser 6.0.0, ios 5.1.1
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 15 other plugins)
Utility:
cordova-res (update available: 0.9.0) : 0.6.0
native-run (update available: 0.3.0) : 0.2.4
System:
Android SDK Tools : 26.1.1 (/Users/haraldwiesinger/Library/Android/sdk)
ios-deploy : 1.10.0
ios-sim : 8.0.2
NodeJS : v10.15.3 (/usr/local/bin/node)
npm : 6.13.4
OS : macOS Catalina
Xcode : Xcode 11.3.1 Build version 11C504
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Comments: 50 (17 by maintainers)
Yes, I was able to reproduce this issue. We are investigating a fix.
have result?
Thanks for the issue! As per https://github.com/ionic-team/ionic/issues/20466#issuecomment-589173907 it sounds like this issue has been fixed by the dev build. As a result I have merged my changes in and will be closing out this issue. If you are still experiencing issues, please ensure that you are running dev build
5.1.0-dev.202002201606.ac98652. For any additional bugs, please open a new issue. Thanks!I tried out the dev build and I still experience the same issue as detailed in https://github.com/ionic-team/ionic/issues/20466#issuecomment-588478532.
I attempted one fix which seems to work at least for this case, on this line… https://github.com/ionic-team/ionic/blob/master/core/src/components/segment/segment.tsx#L305
What happens is when it tries to find
nextElon the next line it gets the ion-header element instead. Instead of using the top point of the previously selected button we use the vertical center of the element like this:const previousY = rect.y + (rect.height / 2);@liamdebeasi i tested it with the devbuild… works like charm 😃 thank you very much
@aspoonemore, @liamdebeasi, @s3ppo
Just verified on Dales repo, surrounding ion-segments with ion-toolbar solve this
<ion-toolbar> <ion-segment (ionChange)="segmentChanged($event)" value="test1"> <ion-segment-button value="test1"> <ion-label>Test1</ion-label> </ion-segment-button> <ion-segment-button value="test2"> <ion-label>Test2</ion-label> </ion-segment-button> </ion-segment> </ion-toolbar>YarivO problema real agora encontrei, é ion-segment esta com z-index css menor que o filho. coloquei z-index: 11; funcionou.
@liamdebeasi consegui replicar o problema, é o uso do bloqueio do touch no ngOnInit ou ionViewDidEnter
document.addEventListener(“touchstart”, () => { this.slides.lockSwipes(true); }, false); document.addEventListener(“touchend”, () => { this.slides.lockSwipes(true); }, false); document.addEventListener(“touchcancel”, () => { this.slides.lockSwipes(true); }, false); document.addEventListener(“touchleave”, () => { this.slides.lockSwipes(true); }, false); document.addEventListener(“touchmove”, () => { this.slides.lockSwipes(true); }, false);
Aguardando um posicionamento, esse componente sem o clique é dificil pro usuário utilizar
+1 , testado em vários dispositivos, dois de exemplos (moto G 7 play e Pixel 2)
yes of course… i will try this a little bit later in the evening 👍