Signup form in overlay reload site on GhostPro, not on dev, not on Docker

Bugs
1

I’ve learned a lot about preventDefault(); when trying to figure out why the site reloads when I have a signup-form as full-screen cover greeting unregistered users before they access the site.

It is sneaky because the reload happens behind the full-screen cover, the only hint is that the status messages success/error does not show. Only in Edge/Firefox dev console the reload becomes visible.

Since the site is re-loaded the form is reset, you see the ‘loading’ message flash briefly.

This only happens on GhostPro. Tested it on self-hosted Ghost Docker with nginx proxy, and in my WSL2 Debian node dev env.

Here’s the form when working on Docker/nginx and Ghost local on Node.js

image
image831×616 20.9 KB

Issue Summary

  • Two forms active, one in a signup-banner on the site and one in a pop-up full-screen cover. When entering name and e-mail in the full-screen cover the status messages flashes briefly and disappears when submitting the form. Looking at dev console we see that the site is reloaded ‘invisibly’ behind the full-screen cover.

  • What did you expect to happen? I expect the status messages loading/error/success to be visible after submitting the form, and the user can then continue to the site, hiding the full-screen cover.

Steps to Reproduce

  1. Load a full screen form with Ghost’s <form id="fullscreen" data-members-form> and email and name fields, and CSS as below
.fullscreen-cover {
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(255,255,255);
    color: black;
}
  1. Enter name and e-mail and click submit
  2. loading/error/success messages flashes briefly. Site is reloaded behind the full-screen form. Form is reset, removing the status messages.

Tried this with and without preventDefualt() on the form - same result.

    document.querySelector('#fullscreen').addEventListener('submit', function(e) {
      e.preventDefault();
    });

Somehow this is GhostPro related, any ideas on how to prevent the reload behind the full-screen cover?

/magnus

Setup information

Ghost Version

Node.js Version

  • Debian node.js v18.20.4 dev environment Ghost 5.93.0
  • Docker Ghost 5.100.0
  • GhostPro 5.105.0-0-gbb9bd0e2+moya

How did you install Ghost?

  • Docker Compose & nginx on Debian
  • Ghost CLI on Debian

Provide details of your host & operating system

  • Localhost uses… Debian in WSL2 and node v18.20.4
  • Docker uses ghost/latest on Debian with nginx proxy
  • GhostPro…

Browser & OS version
Tried Edge, Firefox on Windows 10 and Linux

Relevant log / error output
Everything works fine, new member invite is sent. Status messages are not displayed since site is re-loaded behind full-screen cover.
Secondary sign-up form on site works fine - status messages OK, no relod.