I’m creating my own popovers using the native popover API. Normally, it works as intended, but it doesn’t work inside the form builder. Bricks remove my custom attributes.
See the screenshots.
Browser: Chrome 110
OS: macOS / Windows / Linux / etc.
URL: Link to a page that illustrates this issue
Video: Short screen recording that illustrates this issue (free tool: jam.dev)
[Please describe this bug in as much detail as possible so we can replicate & debug this bug]
Try data-popovertarget=“recoveryPopover”, and add type=“button” to avoid trigger submit button event.
Thank you for your reply.
< input type=“button” data-popovertarget=“recoveryPopover” class=“forgot-password small” value=“Forgot Password” />
This is not rendered at all.
< span type=“button” data-popovertarget=“recoveryPopover” class=“forgot-password small”>Forgot Password
Doesn’t work either.
Hello @VictorG,
HTML field is currently meant for decorative text, not user input. Before outputting it, we are running the code trough the wp_kses_post function, and this will remove popovertarget attribute.
Matej
Hello Matej,
Thank you for your reply. That’s a pity because it would be the perfect spot for “Forgot Password.” I’m sure I’ll find a workaround, but that would have been a nicer solution.
data-popovertarget won’t trigger an [popover] Element. It has to be a “popovertarget”
I’m using now this:
< span role=“button” id=“passwordForgot”>forgot Password< /span >
+
const button = document.getElementById(“passwordForgot”);
const loginPopover = document.getElementById(“loginPopover”);
const recoveryPopover = document.getElementById(“recoveryPopover”);
button.addEventListener(“click”, () => {
loginPopover.hidePopover();
recoveryPopover.showPopover();
});
