Ion-select popover interface suddenly stopped working in some phones (Version 5)

Ionic Framework Ionic Angular
1

Hi,
We are using ionic version 5 in our project. From last few days, in very few phones if user clicks on ion-select only background backdrop is showing but there is no popover. I am using interface popover for ion-select. after debugging this, we noticed that the height of .popover-content inside popover-wrapper coming as 0. I have tried using min-height , but style is getting broken then.

Please help me with these.Thank you in advance. Please let me know if any code reference needed.

1 Like
2

Hi @trishapaul in which device you facing this? Actually I am facing in SAMSUNG Galaxy F14 5G and SAMSUNG Galaxy M30s.

3

Hi,

Did you managed to find out the issue, we have just started getting users have this issue? So far we have had the report from someone with a Galaxy S21 and a Galaxy S22 when the dropdowns were previously working on their devices and no updates have been made to our App.

4

Hi! This has also started happening in our app (both in production and dev versions). Even without us making changes, the ion-select elements stopped working.

This happens for Android versions of the app and in ionic serve. (iOS version seems to still work so far…)
It has been reported in several devices: Android 13, Android 12, Android 10.
The only Android device where ion-select elements still work is an old HTC with Android 7.

Here’s my ionic info:

Ionic:

   Ionic CLI                     : 6.20.1
   Ionic Framework               : @ionic/angular 6.1.12
   @angular-devkit/build-angular : 13.3.8
   @angular-devkit/schematics    : 13.3.8
   @angular/cli                  : 13.3.8
   @ionic/angular-toolkit        : 6.1.0

Cordova:

   Cordova CLI       : 11.0.0
   Cordova Platforms : android 10.1.2
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 13 other plugins)

Utility:

   cordova-res : 0.10.0
   native-run  : 0.3.0

System:

   Android SDK Tools : 25.2.3 
   NodeJS            : v18.16.0 
   npm               : 7.24.1
   OS                : Windows 10
5

Updating to @ionic/angular 6.5.2 seems to fix the issue.

See:

6
1 Like
7

Hi Julio ,

I updated my ionic to the latest, ionic/vue 7.1.1 and I’m still having the same issues.

8

I found a solution on stackoverflow:

ionic framework - ion-select popover not working Chrome 114 - Stack Overflow.

Adding the code below in the global “variable.css” folder under the theme folder , solved my problem:

ion-popover [popover]:not(:popover-open):not(dialog[open]) {
    display: contents;
}

Tho it still prints a “Found a ‘popover’ attribute with an invalid value.” warning on the console

1 Like