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

[martinmitteregger]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

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."

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!

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)

[liamdebeasi]

Thanks for the report. What browser are you testing this on? I am testing this on Chrome 109 for macOS and the popover opens as expected.

[martinmitteregger]

Edge 109.0.1518.55 & Chrome 109.0.5414.75 (both Windows 11)

[liamdebeasi]

Thanks for the info. Does this reproduce in any other browser?

[software-OSG]

Hello,

bug with Chrome Mac 109.0.5414.87

[liamdebeasi]

@software-OSG Does this issue reproduce on any other browsers?

[software-OSG]

@software-OSG Does this issue reproduce on any other browsers?

Safari Mac Version 16.0 (17614.1.25.9.10, 17614) -> no
Firefox Mac 105.0.1 -> no
Chrome Mac 109.0.5414.87 -> yes

[liamdebeasi]

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)

[software-OSG]

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.

[liamdebeasi]

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.

[liamdebeasi]

I believe this issue is related to Ionic passing a non-existent property during presentation:

ionic-framework/core/src/components/popover/popover.tsx

Line 453 in 946807d

popover: this.el,

This is likely legacy code that was never removed and is colliding with the popover property available in Chrome 109+

Could everyone try this dev build and let me know if it resolves the issue?

Angular

npm install @ionic/angular@6.5.1-dev.11674603407.1bf3d493

React

npm install @ionic/react@6.5.1-dev.11674603407.1bf3d493 @ionic/react-router@6.5.1-dev.11674603407.1bf3d493

Vue

npm install @ionic/vue@6.5.1-dev.11674603407.1bf3d493 @ionic/vue-router@6.5.1-dev.11674603407.1bf3d493

Stencil/Vanilla JavaScript

npm install @ionic/core@6.5.1-dev.11674603407.1bf3d493

[software-OSG]

Hello,

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

[acoldfox]

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

[liamdebeasi]

@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?

[acoldfox]

@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 ()
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)

[liamdebeasi]

This is a different bug than what is described in #26643 (comment). The original post notes a "Found a 'popover' attribute with an invalid value." warning not a WeakMap error.

Can you provide a GitHub repo I can use to reproduce the WeakMap error?

[acoldfox]

@liamdebeasi This is the reproduce repo, I can reproduce the WeakMap error on chrome with my intel mac and m2 mac
https://github.com/acoldfox/ionic-select-issue

[liamdebeasi]

Thanks for the issue. This has been resolved via #26672, and a fix will be available in an upcoming release of Ionic Framework.

The Vue issue noted in #26643 (comment) will be resolved in #26694.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. 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.