ionic-framework: bug: popover does not adjust position when trigger is at edge of screen

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

Current Behavior

Using ion-datetime going outside of the page and not showing completely, I have also tried side="top" attribute on popover but no change in position. Capture

Expected Behavior

should show complete Calendar regardless of the position.

Steps to Reproduce

Use Latest ionic Version Code:

<ion-item button="true" id="open-date-input2">
                  <ion-label>Date Of Birth</ion-label>
                  <ion-text slot="end">{{ dateOfBirth }}</ion-text>
                  <ion-popover trigger="open-date-input2" show-backdrop="true" side="top" alignment="end" backdrop-dismiss="true">
                    <ng-template>
                      <ion-datetime
                        #dobDatetime
                        presentation="date"
                        (ionChange)="dateOfBirth = formatDate(dobDatetime.value)"
                      ></ion-datetime>
                    </ng-template>
                  </ion-popover>
                </ion-item>

Code Reproduction URL

No response

Ionic Info

Ionic:

   Ionic CLI                     : 6.18.1 (C:\Users\IDEA\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 6.0.5
   @angular-devkit/build-angular : 13.0.4
   @angular-devkit/schematics    : 13.0.4
   @angular/cli                  : 13.0.4
   @ionic/angular-toolkit        : 5.0.3

Capacitor:

   Capacitor CLI      : 3.4.0
   @capacitor/android : not installed
   @capacitor/core    : 3.4.0
   @capacitor/ios     : not installed

Utility:

   cordova-res : 0.15.3
   native-run  : 1.5.0

System:

   NodeJS : v16.13.1 (C:\Program Files\nodejs\node.exe)
   npm    : 8.3.2
   OS     : Windows 10

Additional Information

No response

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 7
Comments: 33 (5 by maintainers)

Commits related to this issue

fix(popover): dynamic width popover is positioned correctly (#28072) Issue number: resolves #27190, resolves #24780 --------- <!-- Please do not submit updates to dependencies unless it fixes an is... — committed to ionic-team/ionic-framework by liamdebeasi 10 months ago

Most upvoted comments

any update on this?

albiorixvimal on Oct 19, 2022

Still no updates 😢

distante on Nov 16, 2022

any updates?

Not yet.

Saqib92 on May 24, 2022

Hi, any news on this issue ?

Lineaum on Sep 1, 2022

I used Modal to show datetime calendar to overcome this issue for now. check this Video skip to 13 Minutes: https://www.youtube.com/watch?v=iq_XIPml9_M

Thanks! I really prefer the popover tho. This looks terrible on desktop and it’s always in the middle.

Had to go through same pain. you can use Other Calendar plugin. Like: https://www.npmjs.com/package/ion2-calendar

Let’s hope it will get fixed sooner rather than later. The way it’s going I might ditch Ionic altogether since I am already not using half the components because of small things like this. The benefits are not that much anymore and there is a new quirk with every update…it is starting to get in my way rather than help me 😦

sapabg on Feb 24, 2022

any updates?

MaximSedov on May 24, 2022

@liamdebeasi I can confirm that the issue is fixed in 7.3.2-dev.11693321763.15a54694. Thank you 🙂

hakimio on Aug 31, 2023

Hi there,

Can everyone try the following dev build and let me know if it resolves the issue?

npm install @ionic/angular@7.3.2-dev.11693321763.15a54694

Note: If testing with StackBlitz, you may need to test it in a local project instead. StackBlitz + Angular does not always install these dev builds correctly.

liamdebeasi on Aug 29, 2023

Hi~ I come across the same problem, any updates?

XueMeijing on Apr 27, 2022

The original report was filed back in 2022 before the referenced PR was merged.

@liamdebeasi The original issue was fixed with Ionic 7, probably unknowingly through unrelated changes. It was then reintroduced by the PR I mentioned, possibly with a different root cause but the same symptoms.

This reproduction from the duplicate issue #26202 originally uses Ionic 6.
Updating the reproduction to Ionic 7.0.5 with no other changes fixes the issue: https://stackblitz.com/edit/angular-n4d4o2-1nwwhf
Updating further to Ionic 7.0.6 reintroduces the issue: https://stackblitz.com/edit/angular-n4d4o2-3thxjp

I confirmed locally that changing the one line of code I mentioned in my previous comment does indeed fix the issue introduced by 7.0.6. So the original bug in Ionic 6 that was reported by this and other issues has been fixed already, but a different bug with the same symptoms currently exists in Ionic 7.

ReneZeidler on Jul 5, 2023

This issue still persists on the latest version, 7.1.1.

I tracked down the issue. It was introduced with 7.0.6 with #27344. More specifically, the commit introduced a logic change here: https://github.com/ionic-team/ionic-framework/pull/27344/files#diff-a9009029fec1745d56894683444eca4f67bd76cd37b4d151471579f7efe26fa8L458-R486

Before the change, it would always wait for componentOnReady (hasLazyBuild(el) && (await deepReady(this.usersElement));) and then wait two frames.
After the change, if componentOnReady exists (if (hasLazyBuild(el))), it is used instead of waiting two frames. await waitForMount(); never gets executed.

I’m not well versed in the Stencil framework to know what componentOnReady does exactly, but it’s not enough for the popover to render fully and for the sizing/positioning logic to work. You still need to wait extra frames.

I confirmed that changing this line from else if into a separate if, so that waitForMount gets executed in addition to deepReady, fixes the issue.

As a temporary workaround, setting keepContentsMounted on the popover to true also works, because then the popover is rendered in advance.

ReneZeidler on Jun 29, 2023

Still happening in "@ionic/angular": "^6.4.1".

First Time it is getting rendered outside of screen, but after that is is opening correctly. Secondly: side attribute is not working.

Stackblitz

Click on Footer ellipsis Icon.

Saqib92 on Dec 22, 2022

If the popover is triggered by an ion-input, this has the additional issue of causing the entire page to shift when scroll-assist or input-assist or whatever it’s called kicks in:

https://user-images.githubusercontent.com/362329/206742953-66944fbd-ca29-4622-8275-435950b69b9f.mov

lincolnthree on Dec 9, 2022

This can also be reproduced without datetime: https://github.com/ionic-team/ionic-framework/issues/24870

liamdebeasi on Mar 22, 2022

I ran into this issue while using ion-select with interface=“popover”. If the popover trigger was too close to the bottom of the page, the popover would be very small with only one or two options. It seems to me that if the popover trigger is above the middle of the page, it should pop down, and if the trigger is below the middle of the page, it should pop up. But that’s not the case.

Saqib92’s fix worked for me. Thanks!

Also, I agree the ‘side’ attribute needs a little work. If set to anything except 'bottom", the popover scroll does not work properly when the list of options is long.

moose4lord on Feb 3, 2023

Same issue for me…

Pijuli on Mar 15, 2022

I used Modal to show datetime calendar to overcome this issue for now. check this Video skip to 13 Minutes: https://www.youtube.com/watch?v=iq_XIPml9_M

Thanks! I really prefer the popover tho. This looks terrible on desktop and it’s always in the middle.

Had to go through same pain. you can use Other Calendar plugin. Like: https://www.npmjs.com/package/ion2-calendar

Saqib92 on Feb 24, 2022

I used Modal to show datetime calendar to overcome this issue for now. check this Video skip to 13 Minutes: https://www.youtube.com/watch?v=iq_XIPml9_M

Saqib92 on Feb 24, 2022