FIX: Regressed scroll-lock after mobile menu close (#26232)

This commit is contained in:
Jarek Radosz 2024-03-19 10:56:46 +01:00 committed by GitHub
parent 80d2afa316
commit 6da7865a77
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 24 additions and 23 deletions

View File

@ -356,6 +356,7 @@ export default class GlimmerSiteHeader extends Component {
menuPanels.forEach((panel) => {
if (this._swipeEvents.shouldCloseMenu(e, this._swipeMenuOrigin)) {
this._animateClosing(e, panel, this._swipeMenuOrigin);
scrollLock(false);
} else {
this._animateOpening(panel, e);
}

View File

@ -1,10 +1,5 @@
import { click, triggerEvent, visit } from "@ember/test-helpers";
import {
acceptance,
chromeTest,
count,
exists,
} from "discourse/tests/helpers/qunit-helpers";
import { acceptance, chromeTest } from "discourse/tests/helpers/qunit-helpers";
async function triggerSwipeStart(touchTarget) {
const emberTesting = document.querySelector("#ember-testing-container");
@ -69,11 +64,15 @@ async function triggerSwipeEnd({ x, y, touchTarget }) {
// new Touch() isn't available in Firefox, so this is skipped there
acceptance("Mobile - menu swipes", function (needs) {
needs.mobileView();
needs.user();
needs.user({
glimmer_header_enabled: true,
});
chromeTest("swipe to close hamburger", async function (assert) {
await visit("/");
await click(".hamburger-dropdown");
await click(".hamburger-dropdown button");
assert.dom(document.documentElement).hasClass(/scroll-lock/);
const touchTarget = document.querySelector(".panel-body");
let swipe = await triggerSwipeStart(touchTarget);
@ -81,17 +80,17 @@ acceptance("Mobile - menu swipes", function (needs) {
await triggerSwipeMove(swipe);
await triggerSwipeEnd(swipe);
assert.ok(
!exists(".panel-body"),
"it should close hamburger on a left swipe"
);
assert
.dom(".panel-body")
.doesNotExist("it closes hamburger on a left swipe");
assert.dom(document.documentElement).doesNotHaveClass(/scroll-lock/);
});
chromeTest(
"swipe back and flick to re-open hamburger",
async function (assert) {
await visit("/");
await click(".hamburger-dropdown");
await click(".hamburger-dropdown button");
const touchTarget = document.querySelector(".panel-body");
let swipe = await triggerSwipeStart(touchTarget);
@ -101,17 +100,17 @@ acceptance("Mobile - menu swipes", function (needs) {
await triggerSwipeMove(swipe);
await triggerSwipeEnd(swipe);
assert.strictEqual(
count(".panel-body"),
1,
"it should re-open hamburger on a right swipe"
);
assert
.dom(".panel-body")
.exists({ count: 1 }, "it re-opens hamburger on a right swipe");
}
);
chromeTest("swipe to user menu", async function (assert) {
await visit("/");
await click("#current-user");
await click("#current-user button");
assert.dom(document.documentElement).hasClass(/scroll-lock/);
const touchTarget = document.querySelector(".panel-body");
let swipe = await triggerSwipeStart(touchTarget);
@ -119,9 +118,10 @@ acceptance("Mobile - menu swipes", function (needs) {
await triggerSwipeMove(swipe);
await triggerSwipeEnd(swipe);
assert.ok(
!exists(".panel-body"),
"it should close user menu on a left swipe"
);
assert
.dom(".panel-body")
.doesNotExist("it closes user menu on a left swipe");
assert.dom(document.documentElement).doesNotHaveClass(/scroll-lock/);
});
});