mirror of
https://github.com/maputnik/editor.git
synced 2026-09-14 16:27:27 +00:00
CHIIMYEN
95bf5f2c55
## Launch Checklist
- [x] Briefly describe the changes in this PR.
- [x] Link to related issues.
- [ ] Include before/after visuals or gifs if this PR includes visual
changes. — not applicable, nothing visual changes.
- [x] Write tests for all new functionality.
- [x] Add an entry to `CHANGELOG.md` under the `## main` section.
### What changed
Keyboard shortcuts went dead as soon as the map had focus.
The global `keyup` handler in `App.tsx` gated shortcuts on
`document.activeElement === document.body`. That reads like "the user is
not
typing", but it actually asks "is nothing focused at all". Clicking the
map makes
`.maplibregl-canvas` the active element, so every shortcut stopped
working until the
map was blurred.
The `m` shortcut demonstrates the problem nicely: its entire job is to
focus that
canvas, so pressing `m` silently disabled all shortcuts until `Esc`.
That path is
covered by an existing test (`'m' should focus map`), which is why the
regression
was easy to miss.
### How
`isTextEntryElement()` now answers the question the guard was reaching
for, so
shortcuts are suppressed only for text entry targets:
`input`, `textarea`, `select`, and `contenteditable` — the last one
covering the
CodeMirror editor, which is a `contenteditable` `.cm-content`.
The check stays independent of either renderer's DOM. MapLibre's
`.maplibregl-canvas` and the OpenLayers viewport live in different
structures, so an
allow-list of canvas class names would have fixed one renderer and left
the other
broken.
### Behaviour change
Single-letter shortcuts now also fire while focus is on a button or a
panel, where
previously they did not. That is inherent to making the map case work —
the old
predicate simply excluded everything that was not `document.body`. Per
@HarelM, this
can be reverted if anyone complains.
### Tests
`e2e/keyboard.spec.ts` gains a `while the map has focus` block. Its
`beforeEach`
focuses the canvas through the `m` shortcut and asserts the canvas
really is focused,
then two independent tests check that `!` and `s` still open their
modals.
Verified the new tests fail without the fix:
```
Error: expect(locator).toBeVisible() failed
Locator: locator('[data-wd-key="modal:debug"]').first()
Expected: visible
Error: element(s) not found
```
and pass with it.
Local results:
| Check | Result |
|---|---|
| `npm run lint` | clean |
| `npx vitest run` | 9 files, 50 tests passed |
| `npx vite build --mode=production` | clean |
| `npx playwright test` | 170 passed, 3 failed |
The 3 failures — `modals › open › upload via drag and drop`,
`modals › global state › remove variable` and `modals › global state ›
edit variable key`
— also fail on unmodified `main`, so they are pre-existing and unrelated
to this
change.
Fixes #940
84 lines
2.6 KiB
TypeScript
84 lines
2.6 KiB
TypeScript
import { beforeEach, describe, test } from "./utils/fixtures";
|
|
import { MaputnikDriver } from "./maputnik-driver";
|
|
|
|
describe("keyboard", () => {
|
|
const { given, get, when, then } = new MaputnikDriver();
|
|
|
|
beforeEach(async () => {
|
|
await given.setupMockBackedResponses();
|
|
await when.setStyle("both");
|
|
});
|
|
|
|
describe("shortcuts", () => {
|
|
beforeEach(async () => {
|
|
await given.setupMockBackedResponses();
|
|
await when.setStyle("");
|
|
});
|
|
|
|
test("ESC should unfocus", async () => {
|
|
const targetSelector = "maputnik-select";
|
|
await when.focus(targetSelector);
|
|
await then(get.elementByTestId(targetSelector)).shouldBeFocused();
|
|
await when.typeKeys("{esc}");
|
|
await then(get.elementByTestId(targetSelector)).shouldNotBeFocused();
|
|
});
|
|
|
|
test("'?' should show shortcuts modal", async () => {
|
|
await when.typeKeys("?");
|
|
await then(get.elementByTestId("modal:shortcuts")).shouldBeVisible();
|
|
});
|
|
|
|
test("'o' should show open modal", async () => {
|
|
await when.typeKeys("o");
|
|
await then(get.elementByTestId("modal:open")).shouldBeVisible();
|
|
});
|
|
|
|
test("'e' should show export modal", async () => {
|
|
await when.typeKeys("e");
|
|
await then(get.elementByTestId("modal:export")).shouldBeVisible();
|
|
});
|
|
|
|
test("'d' should show sources modal", async () => {
|
|
await when.typeKeys("d");
|
|
await then(get.elementByTestId("modal:sources")).shouldBeVisible();
|
|
});
|
|
|
|
test("'s' should show settings modal", async () => {
|
|
await when.typeKeys("s");
|
|
await then(get.elementByTestId("modal:settings")).shouldBeVisible();
|
|
});
|
|
|
|
test("'i' should change map to inspect mode", async () => {
|
|
await when.typeKeys("i");
|
|
await then(get.inputValue("maputnik-select")).shouldEqual("inspect");
|
|
});
|
|
|
|
test("'m' should focus map", async () => {
|
|
await when.typeKeys("m");
|
|
await then(get.canvas()).shouldBeFocused();
|
|
});
|
|
|
|
test("'!' should show debug modal", async () => {
|
|
await when.typeKeys("!");
|
|
await then(get.elementByTestId("modal:debug")).shouldBeVisible();
|
|
});
|
|
|
|
describe("while the map has focus", () => {
|
|
beforeEach(async () => {
|
|
await when.typeKeys("m");
|
|
await then(get.canvas()).shouldBeFocused();
|
|
});
|
|
|
|
test("'!' should show debug modal", async () => {
|
|
await when.typeKeys("!");
|
|
await then(get.elementByTestId("modal:debug")).shouldBeVisible();
|
|
});
|
|
|
|
test("'s' should show settings modal", async () => {
|
|
await when.typeKeys("s");
|
|
await then(get.elementByTestId("modal:settings")).shouldBeVisible();
|
|
});
|
|
});
|
|
});
|
|
});
|