diff --git a/core/api.txt b/core/api.txt index 76027636bb8..a10fdade340 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 f52a676c4f0..b286814a1ca 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 63b2b189e50..27b0dd37b77 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` |