Bug: Page jumps when hcaptcha-image-select-dialogue shows

[davidfaber]

I'm using react-hcaptcha with GatsbyJS. Whenever the hcaptcha opens the page jumps to top and the dialogue shows centered on the screen (not next to the button).

I simply can't figure out why.

If you need anything, please let me know.

Thanks in advance,
David

[e271828-]

@davidfaber do you have an example site or minimal repro of this?

[davidfaber]

Hi @e271828-,
Thanks for the quick reply.

Yes... I do have an example. If you go to https://oe44.gtsb.io/kontakt/ (PW is oe44, no worries it's just so Google doesn't index the staging-site).

At the bottom of the page you'll find a contact-form. Fill out all the fields including the checkbox at the end and hit send. You should then see 2 things:

• the hCaptcha
• the page scrolled to the top

Thanks in advance,
David

[zoryana94]

Hi @davidfaber,

Thank you for providing an example!
Unfortunately, I still couldn't reproduce the issue. Which platform/browser do you use?

Also, I suspect it might be the form itself that causes the issue. Please check this: https://stackoverflow.com/questions/30960537/submit-button-in-bootstrap-scrolling-to-top

Please let us know the additional details or if the issue gets fixed.

Best Regards,
IMI Dev Team

[awesomephant]

I think I've run into the same issue as OP.

Test: Codepen
Browser: Windows / Firefox 108 (64-bit):

Steps:

• Scroll down to the bottom of the page
• Tap the hCaptcha widget to trigger the challenge modal
• Tap outside the modal to close it
• Tap the widget again

Expected:

• Challenge modal opens and closes right next to the widget
• Scroll position stays the same

Actual:

• The first time you open the modal, the page jerks a little bit. On subsequent invocations, the page scrolls all the way to the top.

Behaviour in Chrome is as expected.

---

OP also describes an issue where the modal appears in the centre of the screen rather than next to the widget. I'm seeing the same issue in Firefox and Chrome, but I think it's separate from the first issue. Maybe it's related to the fact that the modal HTML is injected right before the closing </body> tag, outside of Gatsby's page container (div#___gatsby)? Edit: I've looked into it a little more and it looks like the modal is centred on the screen whenever the widget container is set to position:absolute or fixed - I take it that's intended behaviour?

[zoryana94]

Hi @awesomephant!

Thank you for notifying us about the issue!
And thank you a lot for providing us with the investigation details and the test app for reproducing it!

We'll look into it and let you know the summary of our investigation.

Best Regards,
IMI Dev Team