bug: Popover menu not displaying on Chrome and Edge

[sali-wick]

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

v6.x, v7.x

Current Behavior

When using ion-popover, dropdown menu is not displaying on Chrome, 114.0.5735.90 and Microsoft Edge 114.

Expected Behavior

Expect the dropdown menu to appear.

Steps to Reproduce

1. Click ion-popover with a menu
2. Menu does not appear

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 7.1.1 (/Users/sheridon/.nvm/versions/node/v16.14.0/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 6.2.5

Capacitor:

Capacitor CLI : 4.4.1-nightly-20221111T150726.0
@capacitor/android : 4.4.0
@capacitor/core : 4.4.0
@capacitor/ios : 4.4.1-nightly-20221111T150726.0

Utility:

cordova-res : not installed globally
native-run (update available: 1.7.2) : 1.7.0

System:

NodeJS : v16.14.0 (/Users/user/.nvm/versions/node/v16.14.0/bin/node)
npm : 9.1.2
OS : macOS

Additional Information

No response

[ionitron-bot]

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.

[MaxWeisen]

After upgrading to the latest version of Chrome on my Mac (version 114.0.5735.90) I am unable to see dropdowns from ion-select components. This was working on Chrome 113. This could be related.

[scarela]

Experiencing the same issue on Ionic 5, the issue happens when I use interface="popover" in any ion-select. I think this is the culprit: https://developer.chrome.com/blog/introducing-popover-api/.

[MaxWeisen]

We resolved this by upgrading ionic. We use @ionic/vue so running npm update @ionic/vue fixed the problem where dropdown menus were not displaying on Chrome 114.0.5735.90

[scarela]

For those who cannot upgrade Ionic, fixed the issue with this CSS workaround:

[popover].popover-viewport {
  display: initial;
  position: initial;
  margin: initial;
  border: initial;
  background: initial;
  padding: initial;
  width: initial;
  height: initial;
  overflow: initial;
  inset: initial;
  color: initial;
}

[dimitriscsd]

Some of our users have seen this issue on Android devices. They could not open popovers.

It seems to be resolved after updating Android WebView to the latest version.

I could replicate this when running our app with "ionic serve" on a PC. Latest version of Chrome installed. To resolve that, as pointed out by @MaxWeisen above, updating @ionic/angular with "npm install @ionic/angular" resolved the issue. This downloaded the last version of Ionic 6, which was what we have been using. We have not migrated to 7 yet.

Lastly, I deleted platforms, plugins and node_modules folders and then ran npm install again, to make sure everything was using the updated packages.

[sali-wick]

For those who cannot upgrade Ionic, fixed the issue with this CSS workaround:

[popover].popover-viewport {
  display: initial;
  position: initial;
  margin: initial;
  border: initial;
  background: initial;
  padding: initial;
  width: initial;
  height: initial;
  overflow: initial;
  inset: initial;
  color: initial;
}

Thank you for that solution.

We have a product running in production that we're rewriting and new to Ionic.

Is that CSS fix in one of the core Ionic modules or for all our scss files where we use ion-select with the 'popover' interface?

[romarioputra]

This issue is fixed when @ionic/angular is upgraded to 7.0.10

[liamdebeasi]

Hi everyone,

Chrome recently rolled out the Popover API. Unfortunately some old code that Ionic had used in ion-popover conflicted with the Popover API. This resulted in the behavior reported here.

This conflicting code has been removed as of Ionic v6.5.2. Our recommended solution is to make sure your apps are on Ionic v6.5.2 or later.

Updating from Ionic 5 to Ionic 6: https://ionicframework.com/docs/updating/6-0
Updating from Ionic 6 to Ionic 7: https://ionicframework.com/docs/updating/7-0

I understand some developers may not be able to upgrade at this time. As a result, the team has developed a workaround for apps on Ionic v4 and v5: https://codepen.io/liamdebeasi/pen/ExOarWv

The relevant code in the CodePen is on lines 79-81. The component passed to ion-popover needs to remove the popover attribute from the host to avoid conflicting with the Popover API. This demo uses vanilla JS, but the same approach applies to Angular, React, and Vue.

I am going to close this as this issue has been patched in Ionic 6 and 7, but let me know if there are any questions.