[Request] Nested popovers

[axelsvjax]

Currently it is not possible to create nested popovers like nested menus. Problem is then clicked on the second level popover button, the first level popover disappeared. It would be better to have, for example, property for popover to stay visible after clicking on another popover.

[aandr]

I've been looking into possible fixes for this and identified two approaches. Would love to hear your thoughts.

1. Add an autoClose property. Setting it to false would disable the popover closing from a document click. This will allow multiple popovers (nested or not), only when they all have autoClose = false. The shortcoming of this is that clicking outside of a popover will no longer close it.

2. In the close() method there is this check:

if (!this.opened || this.progress || (fn && fn.target && this.$el.contains(fn.target))) { return }

In other words, if the click comes from a nested element of the q-popover div, then ignore the close attempt. We can change this so that instead of checking whether $el contains the click target, we can iterate through the click target's parents and check if there is a 'q-popover' element in there.

The open() method contains document.body.click() to close all other popovers. This will have to be removed. Instead we will rely on the real click event, used to open the new popover.

[rstoenescu]

Hi,

This is really tricky to make it work across browsers. Removing document.body.click() will leave other popovers opened, so it's not an option, or at least not in this form. I think the solution is around your second approach, but got to ponder on this very good. Unfortunately, this won't happen so soon as the workload is huge at the moment.

[NothingWeAre]

Hi,
I think that autoClose might work, with a little convoluted approach.

• When opening popover it's state set to autoClose = true
• Before opening nested popover autoClose = false
• When nested popover closes set autoClose = true and process event that closed nested popover.
• If nested popover was closed by click outside current popover than close itself, if inside than process click.

[mmakrzem]

Is it possible to register a callback with the popover so that before a popover is closed it calls this callback. If the callback doesn't exist or it returns true then allow the popover to close. Otherwise leave it open. Then the user can control which popovers stay open based on this custom callback that gets registered.

[SeoRoman]

I'm assuming this is still an issue? I noticed that the popovers had ref tags,however they don't seem to allow anything other than the individual items within them to control them... Doesn't stop the parent from closing when the child is opened.

[rstoenescu]

Nested Popovers are not supported. Can't accommodate all its features with this, and still make it work for the buggy webview in iOS platform. Sorry for any inconvenience.