Native popover using swup v2

[DennysDionigi]

Describe your problem 🧐

Hi all, using native HTML5 popovers, seems giving issue when opening any popovers inner links.

Found also an old thread about classic dialog element, but not exaustive dialog example has been provided on swup fragment official documentation, neither for newest popover element, which are now official browsers standard.

Let's suppose something like:

<button popovertarget="popover1" popovertargetaction="toggle">Open popover 1</button>
<div id="popover1"  class="popover-red-and-big" popover>I am popover, go to <a href="page2">Page 2<a></div>

swup is then stucked on ".is-animating .is-leaving .to-page2"

What is your question? 🙋‍♀️

### How then to enable popover inner links?

I tried something like adding [popover] as additional containers, but breaks swup ajax transitions.
I tried swup fragment, but can't make it working with popovers, I then tried forcing swup load, but still breaks swup, while only a full window location url works, but still bypass ajax loading.

URL to minimal reproduction 🔗

https://swup.js.org/plugins/fragment-plugin/#modals-and-accessibility

Checked all these? 📚

• I have read and searched the official docs
• I have checked discussions and existing issues for answers to my question
• I agree to follow this project's Code of Conduct
• I have provided all necessary information to the best of my knowledge

[daun]

What's the goal? Make links inside a popover load the new content into the popover?

[daun]

(Creating a minimal reproduction will make this much easier for others to chime in.)

[DennysDionigi]

Hi,
Seems I can’t open popover inner links, close the popover and then open new pages.

Just that.

Popover links > open new page .

As I understood, popovers are on top level, so they break someway default swup functionality.

• Popover are inside the ##swup container, if this could help.

So basically layout is the default one:

##swup container

inner main container

inside main container: elements : button to trigger the popover and the popover element.

I may need making this work as any modal/dialog/popup work : close itself and go to destination url.

Actually breaks and stuck the swup loading state.

[hirasso]

As daun already pointed out, there is no way to help you without a minimal reproduction. You might even find the issue yourself while creating it.

[hirasso]

As I understood, popovers are on top level, so they break someway default swup functionality.

The top level is only relevant for css and won't interfere with swup.

[DennysDionigi]

[SOLVED]

It has been an old version of SWUP (2.xx), so old syntax, and old functions.

Updated to latest libs, and everything works smoothly.

Thanks all. :)