SIGN IN SIGN UP

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.

0 0 0 TypeScript

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

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Popovers with dynamic widths were not being positioned correctly
relative to the trigger element. This was happening because the child
component always had dimensions of 0 x 0. Ionic has logic built-in to
wait for the child components to be rendered, but this was not working
as intended for two reasons:

1. `this.usersElement` was referencing the popover element itself not
the user’s component. When calling `deepReady` on
https://github.com/ionic-team/ionic-framework/blob/01fc9b45116f7ad6ddc56c7fb1535dec798c2b3a/core/src/components/popover/popover.tsx#L477
we are waiting for the popover to be hydrated, not the child content.
The popover was already hydrated on page load, so this resolves
immediately. However, the child content that was just added to the DOM
has not yet been hydrated, so we aren’t waiting long enough.

This is happening because we return `BaseComponent `from
`attachComponent` which is a reference to the overlay:
https://github.com/ionic-team/ionic-framework/blob/01fc9b45116f7ad6ddc56c7fb1535dec798c2b3a/core/src/utils/framework-delegate.ts#L133

Other framework delegates return the actual child content:

- Core delegate with controller:
https://github.com/ionic-team/ionic-framework/blob/01fc9b45116f7ad6ddc56c7fb1535dec798c2b3a/core/src/utils/framework-delegate.ts#L35
(this is part of why the controller popover works but the inline popover
does not)
- React delegate:
https://github.com/ionic-team/ionic-framework/blob/01fc9b45116f7ad6ddc56c7fb1535dec798c2b3a/packages/react/src/framework-delegate.tsx#L31
- Vue delegate:
https://github.com/ionic-team/ionic-framework/blob/01fc9b45116f7ad6ddc56c7fb1535dec798c2b3a/packages/vue/src/framework-delegate.ts#L45

2. `attachComponent` is unable to return the correct element currently
because the child content has not been mounted yet in this scenario.
`ionMount` is emitted after `attachComponent` resolves:
https://github.com/ionic-team/ionic-framework/blob/01fc9b45116f7ad6ddc56c7fb1535dec798c2b3a/core/src/components/popover/popover.tsx#L466

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- `ionMount` is emitted before `attachComponent` runs
- `attachComponent` now consistently returns the child view if present
in the DOM
- Added a test

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev build: `7.3.2-dev.11693321763.15a54694`

---------

Co-authored-by: ionitron <hi@ionicframework.com>
L
Liam DeBeasi committed
2a80eb6bd0b16a9dab9bea600bb7f935d25c0e1b
Parent: cddefd1
Committed by GitHub <noreply@github.com> on 8/31/2023, 1:10:36 PM