ionic-framework: bug: ion-select with interface="popover" does not open popover

Prerequisites

Ionic Framework Version

  • v4.x
  • v5.x
  • v6.x
  • Nightly

Current Behavior

After clicking onto an ion-select with interface="popover" the backdrop appears but no popover is shown. The console shows the error or rather warning “Found a ‘popover’ attribute with an invalid value.

current_behavior

Expected Behavior

After cclicking onto an ion-select with interface="popover" the backdrop AND the popover itself should be shown.

Steps to Reproduce

Just run the stackblitz example from the docs. After opening the stackblitz example the docs show the same incorrect behavior!

image

Code Reproduction URL

No response

Ionic Info

I can’t run ionic info in the stackblitz project but as I have the same error in my project here’s my output

Ionic: Ionic CLI : 6.20.1 Ionic Framework : @ionic/angular 6.5.0 @angular-devkit/build-angular : 15.1.1 @angular-devkit/schematics : 15.1.1 @angular/cli : 15.1.1 @ionic/angular-toolkit : 7.0.0

Capacitor: Capacitor CLI : 4.6.1 @capacitor/android : 4.6.1 @capacitor/core : 4.6.1 @capacitor/ios : 4.6.1

Utility: cordova-res : 0.15.3 native-run : 1.7.1

System: NodeJS : v16.14.2 npm : 8.7.0 OS : Windows 10

Additional Information

After removing interface="popover" it works as expected (but not as popover)

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Comments: 18 (9 by maintainers)

Commits related to this issue

Most upvoted comments

@liamdebeasi I still have the bug with @ionic/vue@6.5.1-dev.11674603407.1bf3d493 Intel Mac Chrome 109.0.5414.87

Are there any errors or warnings in the console?

@liamdebeasi Yes, the erros is: index.esm.js?58b7:1845 Uncaught (in promise) TypeError: Invalid value used as weak map key at WeakMap.set (<anonymous>) at Object.attachViewToDom (index.esm.js?58b7:1845:1) at attachComponent (framework-delegate.js?e7e5:10:1) at Popover.hasController.present (popover.js?59f0:1246:1) at Select.disabled.open (ion-select.js?5f01:166:1)

Hello,

The bug is solved on my side with @ionic/angular@6.5.1-dev.11674603407.1bf3d493

Capture d’écran 2023-01-25 à 09 16 07

Thanks! At this point, we believe this behavior to be caused by a new popover feature in Chrome: https://developer.chrome.com/docs/web-platform/popover-api/popover-property/ Ionic’s popover component appears to be colliding with the browser’s implementation.

The Ionic Framework Team is not able to reproduce the issue, but others at the company are. I am going to continue to investigate this and will reply here when I have more information.

Do you have any enabled browser plugins? (AdBlock, 1Password, etc). Also, are you using an Intel Mac or an Apple Silicon Mac (M1, M2 Pro, etc)

I have disabled all browser plugins in Chrome and I still have the bug. I have a Intel Mac.