From 960778a36f6eb6318cc740c4f7a255107723b8fd Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Fri, 21 May 2021 11:11:22 -0400 Subject: [PATCH] fix(popover): update prop defaults, use correct delegate (#23340) --- core/api.txt | 2 +- core/src/components/popover/popover.tsx | 11 +++++++++-- core/src/components/popover/readme.md | 2 +- 3 files changed, 11 insertions(+), 4 deletions(-) diff --git a/core/api.txt b/core/api.txt index 76027636bb..a10fdade34 100644 --- a/core/api.txt +++ b/core/api.txt @@ -824,7 +824,7 @@ ion-picker,css-prop,--min-width ion-picker,css-prop,--width ion-popover,shadow -ion-popover,prop,alignment,"center" | "end" | "start",'center',false,false +ion-popover,prop,alignment,"center" | "end" | "start",'start',false,false ion-popover,prop,animated,boolean,true,false,false ion-popover,prop,arrow,boolean,true,false,false ion-popover,prop,backdropDismiss,boolean,true,false,false diff --git a/core/src/components/popover/popover.tsx b/core/src/components/popover/popover.tsx index f52a676c4f..b286814a1c 100644 --- a/core/src/components/popover/popover.tsx +++ b/core/src/components/popover/popover.tsx @@ -205,7 +205,7 @@ export class Popover implements ComponentInterface, OverlayInterface { /** * Describes how to align the popover content with the `reference` point. */ - @Prop() alignment: PositionAlign = 'center'; + @Prop() alignment: PositionAlign = 'start'; /** * If `true`, the popover will display an arrow @@ -437,7 +437,14 @@ export class Popover implements ComponentInterface, OverlayInterface { destroyDismissInteraction(); this.destroyDismissInteraction = undefined; } - await detachComponent(this.delegate, this.usersElement); + + /** + * If using popover inline + * we potentially need to use the coreDelegate + * so that this works in vanilla JS apps + */ + const delegate = (this.inline) ? this.delegate || this.coreDelegate : this.delegate; + await detachComponent(delegate, this.usersElement); } this.currentTransition = undefined; diff --git a/core/src/components/popover/readme.md b/core/src/components/popover/readme.md index 63b2b189e5..27b0dd37b7 100644 --- a/core/src/components/popover/readme.md +++ b/core/src/components/popover/readme.md @@ -569,7 +569,7 @@ export default defineComponent({ | Property | Attribute | Description | Type | Default | | ----------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ | ----------- | -| `alignment` | `alignment` | Describes how to align the popover content with the `reference` point. | `"center" \| "end" \| "start"` | `'center'` | +| `alignment` | `alignment` | Describes how to align the popover content with the `reference` point. | `"center" \| "end" \| "start"` | `'start'` | | `animated` | `animated` | If `true`, the popover will animate. | `boolean` | `true` | | `arrow` | `arrow` | If `true`, the popover will display an arrow that points at the `reference` when running in `ios` mode on mobile. Does not apply in `md` mode or on desktop. | `boolean` | `true` | | `backdropDismiss` | `backdrop-dismiss` | If `true`, the popover will be dismissed when the backdrop is clicked. | `boolean` | `true` |