feat: improve popover position customization

[HyperLife1119]

Feature Request

Ionic version:

[x] 5.x

Describe the Feature Request

The current ion-popover position is only directly below the target element. Sometimes it will automatically select the location, but I hope developers can specify its location. For example: up, down, left and right, and the position of the user's finger click (X, Y). Explanation of the position where the finger clicks: If there is an element with a large size, I want the position of the ion-popover to be the position where the user clicks the finger, rather than directly below the element with a large size.

Describe Preferred Solution

Describe Alternatives

Related Code

this.popoverController.create({
      component: PopoverComponent,
      cssClass: 'my-custom-class',
      event: ev,
      translucent: true, 
      position: 'top/right/bottom/left/focus....'
});

[position] attribute value:

1. top
2. right
3. bottom (default)
4. left
5. focus (The focus position of the finger click)
6. focus|top,
7. focus|right
8. focus|bottom
9. focus|left

Additional Context

[cjorasch]

Using the mouse position would also be useful when implementing context menus for desktop apps. If the target element is large then the current approach can result in a context menu that is far apart from the mouse location.

[HyperLife1119]

在为桌面应用程序实现上下文菜单时，使用鼠标位置也很有用。如果目标元素很大，则当前方法可能会导致上下文菜单与鼠标位置相距甚远。

Yes. So I hope to add a position attribute to change the position of the ion-popover so that it can adopt the focus position where the user clicks on the screen, rather than directly below the target element.

[liamdebeasi]

Thanks for the feature request. Providing a value to the event property will allow you to position the popover where the user clicked. Is there a particular issue you are running into?

[HyperLife1119]

感谢您的功能请求。为event属性提供值将使您可以将弹出窗口放置在用户单击的位置。您是否遇到特定问题？

Can you provide an example? I am not quite sure what values to set for the event.

[liamdebeasi]

See the docs: https://ionicframework.com/docs/api/popover#presenting. You need to pass in the click event that triggered the popover.

[HyperLife1119]

请参阅文档：https : //ionicframework.com/docs/api/popover#presenting。您需要传递触发弹出窗口的click事件。 I am using the tap event of hammerjs, which will cause the ion-popover to be displayed just below the target element.

[HyperLife1119]

I think it might be more intuitive to add a position attribute to control the position/orientation.

[liamdebeasi]

We do not support using HammerJS in Ionic as Hammer tends to prevent events from propagating properly. Additionally, the tap event is not a native mouse/pointer event.

Try passing in the standard click event rather than Hammer's tap event.

[HyperLife1119]

We do not support using HammerJS in Ionic as Hammer tends to prevent events from propagating properly. Additionally, the tap event is not a native mouse/pointer event.

Try passing in the standard click event rather than Hammer's tap event.

Okay, actually my goal is to open the popover by long pressing on the target element.

[liamdebeasi]

Thanks! There is probably some improvements we can make here. The popover event is closely tied to the click event among other things, which can make it a bit tricky to customize.

[cjorasch]

Thanks for the feature request. Providing a value to the event property will allow you to position the popover where the user clicked. Is there a particular issue you are running into?

I think this allows positioning relative to the target element but not necessarily to the mouse location. For a context menu I have a large div that provides the target area for the menu. On right click over the div I display the popover but it ends up being displayed outside of the div which may result in a location that can be far from the mouse.

[HyperLife1119]

okay, thank you. Because ionic is mobile-oriented, it is also good to adapt some mobile gestures.

[liamdebeasi]

I think this allows positioning relative to the target element but not necessarily to the mouse location. For a context menu I have a large div that provides the target area for the menu. On right click over the div I display the popover but it ends up being displayed outside of the div which may result in a location that can be far from the mouse.

Ah yep I mis-remembered what the event does. There is also some logic to ensure that popovers do not appear offscreen which complicates customizing.

[cjorasch]

The offscreen logic still applies. It might work if you use a 1 pixel rectangle based on the location (vs. the target element bounds) and then pick side and offsets based on content size and window bounds.

[HyperLife1119]

@liamdebeasi I think we can refer to ant design: https://ng.ant.design/components/popover/en

[liamdebeasi]

Thanks for the issue. We have added support for this (and other popover features) in https://github.com/ionic-team/ionic-framework/pull/23258, and we plan on shipping this in Ionic Framework v6.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.