diff --git a/src/Posting/Captcha.v2.coffee b/src/Posting/Captcha.v2.coffee index 0a0a047be..9c8102978 100644 --- a/src/Posting/Captcha.v2.coffee +++ b/src/Posting/Captcha.v2.coffee @@ -241,6 +241,9 @@ Captcha.v2 = if $ 'iframe[src^="https://www.google.com/recaptcha/api2/frame"]', node new MutationObserver(@fixBubble.bind(@, node)).observe node, attributes: true + # Prevent Recaptcha from keeping focus when popup dismissed. + if overlay = $ 'div[style*="position: fixed;"]', node + $.on overlay, 'click', -> $('#qr iframe')?.blur() fixBubble: (node) -> {bottom, right, width} = node.getBoundingClientRect() diff --git a/src/Posting/QR.coffee b/src/Posting/QR.coffee index c5a5a80ad..a707e3499 100644 --- a/src/Posting/QR.coffee +++ b/src/Posting/QR.coffee @@ -153,12 +153,28 @@ QR = unless QR.inBubble() QR.hasFocus = d.activeElement and QR.nodes.el.contains(d.activeElement) QR.nodes.el.classList.toggle 'focus', QR.hasFocus + # XXX Stop unwanted scrolling due to captcha. + if QR.captcha.isEnabled and QR.captcha is Captcha.v2 and !QR.captcha.noscript + if QR.inCaptcha() + QR.scrollY = window.scrollY + $.on d, 'scroll', QR.scrollLock + else + $.off d, 'scroll', QR.scrollLock inBubble: -> bubbles = $$ 'iframe[src^="https://www.google.com/recaptcha/api2/frame"]' d.activeElement in bubbles or bubbles.some (el) -> getComputedStyle(el).visibility isnt 'hidden' and el.getBoundingClientRect().bottom > 0 + inCaptcha: -> + (d.activeElement?.nodeName is 'IFRAME' and QR.nodes.el.contains(d.activeElement)) or (QR.hasFocus and QR.inBubble()) + + scrollLock: -> + if QR.inCaptcha() + window.scroll window.scrollX, QR.scrollY + else + $.off d, 'scroll', QR.scrollLock + hide: -> d.activeElement.blur() $.addClass QR.nodes.el, 'autohide' diff --git a/src/css/style.css b/src/css/style.css index ec2eb0ed9..9c10b1ea2 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -1331,19 +1331,9 @@ input.field.tripped:not(:hover):not(:focus) { #qr .captcha-root { position: relative; } -#qr .captcha-container > div { +#qr .captcha-container > div > div { margin: auto; } -/* scrollable with scroll bar hidden; prevents scroll on space press */ -:root.blink #qr .captcha-container > div { - width: 304px; - overflow: hidden; -} -:root.blink #qr .captcha-container > div > div:first-of-type { - overflow-y: scroll; - overflow-x: hidden; - padding-right: 15px; -} #qr .captcha-counter { display: block; width: 100%;