chore(deps-dev): Bump sass from 1.104.0 to 1.104.1 (#2165)

Bumps [sass](https://github.com/sass/dart-sass) from 1.104.0 to 1.104.1.
<details>
<summary>Release notes</summary>
<p><em>Sourced from <a
href="https://github.com/sass/dart-sass/releases">sass's
releases</a>.</em></p>
<blockquote>
<h2>Dart Sass 1.104.1</h2>
<p>To install Sass 1.104.1, download one of the packages below and <a
href="https://katiek2.github.io/path-doc/">add it to your PATH</a>, or
see <a href="https://sass-lang.com/install">the Sass website</a> for
full installation instructions.</p>
<h1>Changes</h1>
<ul>
<li>
<p>Fix a bug where loud comments before <code>@use</code> rules could be
emitted multiple times under certain circumstances.</p>
</li>
<li>
<p>Fix a bug in which an invalid selector at the end of an indented
syntax stylesheet would cause the parser to crash instead of emitting a
useful error message.</p>
</li>
</ul>
<h3>Command Line Interface</h3>
<ul>
<li>
<p>Many-to-many compilations no longer compile any files that appear in
the output directory if the output directory is also within the source
directory. This fixes a bug where <code>--watch</code> mode could enter
an infinite loop recompiling the same CSS file over and over.</p>
</li>
<li>
<p>Sass now sets the modification time of output files to the time
compilation <em>started</em> rather than the time it <em>ended</em>.
This ensures that, if a source file is modified during compilation,
<code>--watch</code> and <code>--update</code> mode will recompile the
outputs to include the new source file contents.</p>
</li>
</ul>
<p>See the <a
href="https://github.com/sass/dart-sass/blob/master/CHANGELOG.md#11041">full
changelog</a> for changes in earlier releases.</p>
</blockquote>
</details>
<details>
<summary>Changelog</summary>
<p><em>Sourced from <a
href="https://github.com/sass/dart-sass/blob/main/CHANGELOG.md">sass's
changelog</a>.</em></p>
<blockquote>
<h2>1.104.1</h2>
<ul>
<li>
<p>Fix a bug where loud comments before <code>@use</code> rules could be
emitted multiple
times under certain circumstances.</p>
</li>
<li>
<p>Fix a bug in which an invalid selector at the end of an indented
syntax
stylesheet would cause the parser to crash instead of emitting a useful
error
message.</p>
</li>
</ul>
<h3>Command Line Interface</h3>
<ul>
<li>
<p>Many-to-many compilations no longer compile any files that appear in
the
output directory if the output directory is also within the source
directory.
This fixes a bug where <code>--watch</code> mode could enter an infinite
loop recompiling
the same CSS file over and over.</p>
</li>
<li>
<p>Sass now sets the modification time of output files to the time
compilation
<em>started</em> rather than the time it <em>ended</em>. This ensures
that, if a source file
is modified during compilation, <code>--watch</code> and
<code>--update</code> mode will recompile
the outputs to include the new source file contents.</p>
</li>
</ul>
</blockquote>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a
href="https://github.com/sass/dart-sass/commit/da84fb52f6b7576cc9516e12312bc33f93ac7596"><code>da84fb5</code></a>
Fix <code>--watch</code> not recompiling sources modified during a
compilation (<a
href="https://redirect.github.com/sass/dart-sass/issues/2850">#2850</a>)</li>
<li><a
href="https://github.com/sass/dart-sass/commit/8a287a71e0fd8cf24fc5fe93a33179c14c845924"><code>8a287a7</code></a>
Merge pull request <a
href="https://redirect.github.com/sass/dart-sass/issues/2859">#2859</a>
from sass/fix-auto-merge</li>
<li><a
href="https://github.com/sass/dart-sass/commit/6033b463ec9f3fc17ab1e5fc2c860b18b7a270d2"><code>6033b46</code></a>
Add explicit versions to .github/util actions</li>
<li><a
href="https://github.com/sass/dart-sass/commit/cc71d43f78056e4f43394711ece111520fd6ade9"><code>cc71d43</code></a>
Only auto-merge dependabot PRs once the tests pass</li>
<li><a
href="https://github.com/sass/dart-sass/commit/49ddc4fe9e59e29271a377cf3f59d557f5a88c4a"><code>49ddc4f</code></a>
Revert &quot;Bump dart-lang/setup-dart in
/.github/util/initialize&quot;</li>
<li><a
href="https://github.com/sass/dart-sass/commit/71a127d6bbe49d86d2b31d8531f2253dfb933bc9"><code>71a127d</code></a>
Avoid duplicating loud comments that appear before <code>@use</code> (<a
href="https://redirect.github.com/sass/dart-sass/issues/2854">#2854</a>)</li>
<li><a
href="https://github.com/sass/dart-sass/commit/f19baabb4ffe16323f02365d04d025be7cabe840"><code>f19baab</code></a>
Merge pull request <a
href="https://redirect.github.com/sass/dart-sass/issues/2857">#2857</a>
from sass/dependabot/github_actions/dot-github/util/...</li>
<li><a
href="https://github.com/sass/dart-sass/commit/f5263e2a4ffd7f24c31969612d1a4e35246973dd"><code>f5263e2</code></a>
Bump dart-lang/setup-dart in /.github/util/initialize</li>
<li><a
href="https://github.com/sass/dart-sass/commit/3018c0d73f61c29634099a97007987c040e641aa"><code>3018c0d</code></a>
Merge pull request <a
href="https://redirect.github.com/sass/dart-sass/issues/2856">#2856</a>
from sass/dependabot/github_actions/dart-lang/setup-...</li>
<li><a
href="https://github.com/sass/dart-sass/commit/5d74adbcb6dd19c403e21c03a54cffa43ddb96f4"><code>5d74adb</code></a>
Bump dart-lang/setup-dart from 1.8.0 to 1.8.1</li>
<li>Additional commits viewable in <a
href="https://github.com/sass/dart-sass/compare/1.104.0...1.104.1">compare
view</a></li>
</ul>
</details>
<br />


[![Dependabot compatibility
score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=sass&package-manager=npm_and_yarn&previous-version=1.104.0&new-version=1.104.1)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)

Dependabot will resolve any conflicts with this PR as long as you don't
alter it yourself. You can also trigger a rebase manually by commenting
`@dependabot rebase`.

[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)

---

<details>
<summary>Dependabot commands and options</summary>
<br />

You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits
that have been made to it
- `@dependabot show <dependency name> ignore conditions` will show all
of the ignore conditions of the specified dependency
- `@dependabot ignore this major version` will close this PR and stop
Dependabot creating any more for this major version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop
Dependabot creating any more for this minor version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop
Dependabot creating any more for this dependency (unless you reopen the
PR or upgrade to it yourself)


</details>

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.github/workflows/codeql-analysis.yml

@@ -46,7 +46,7 @@ jobs:
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL
-      uses: github/codeql-action/init@cdf488f595d80d6e07e03d4674febd5ab45fa938 # v4.37.9
+      uses: github/codeql-action/init@b96794f015dfd88f77b49b1c93e0fa7110f94c63 # v4.38.0
       with:
         languages: ${{ matrix.language }}
         # If you wish to specify custom queries, you can do so here or in a config file.
@@ -57,7 +57,7 @@ jobs:
     # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
     # If this step fails, then you should remove it and run the build manually (see below)
     - name: Autobuild
-      uses: github/codeql-action/autobuild@cdf488f595d80d6e07e03d4674febd5ab45fa938 # v4.37.9
+      uses: github/codeql-action/autobuild@b96794f015dfd88f77b49b1c93e0fa7110f94c63 # v4.38.0
 
     # ℹ️ Command-line programs to run using the OS shell.
     # 📚 https://git.io/JvXDl
@@ -71,4 +71,4 @@ jobs:
     #   make release
 
     - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@cdf488f595d80d6e07e03d4674febd5ab45fa938 # v4.37.9
+      uses: github/codeql-action/analyze@b96794f015dfd88f77b49b1c93e0fa7110f94c63 # v4.38.0

CHANGELOG.md

@@ -8,8 +8,12 @@
 - _...Add new stuff here..._
 
 ### 🐞 Bug fixes
+- Prevent a crash when converting a function to an expression
+- Prevent a crash when deleting either stop from a function with two stops
+- Preserve expanded layer groups when deleting layers, including the first layer of a group
 - The map's data listener now fires on tile loads again, so source and vector layer field autocompletion is populated
 - The `maputnik` desktop binary now opens the default browser automatically on startup (opt out with `--no-browser`)
+- Keyboard shortcuts now keep working while the map has focus, instead of going dead until the map is blurred
 - _...Add new stuff here..._
 
 ## 3.1.0

e2e/fixtures/grouped-layers-style.json

@@ -0,0 +1,16 @@
+{
+  "version": 8,
+  "name": "Grouped layers",
+  "sources": {},
+  "layers": [
+    { "id": "background", "type": "background" },
+    { "id": "park-a", "type": "background" },
+    { "id": "park-b", "type": "background" },
+    { "id": "park-c", "type": "background" },
+    { "id": "road", "type": "background" },
+    { "id": "park-d", "type": "background" },
+    { "id": "park-e", "type": "background" },
+    { "id": "water-a", "type": "background" },
+    { "id": "water-b", "type": "background" }
+  ]
+}

e2e/keyboard.spec.ts

@@ -62,5 +62,22 @@ describe("keyboard", () => {
       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();
+      });
+    });
   });
 });

e2e/layer-editor.spec.ts

@@ -289,6 +289,20 @@ describe("layer editor", () => {
         });
       });
 
+      test("should leave a plain editable value after deleting a stop", async () => {
+        await when.setFunctionStopValue("circle-radius", "Output value", 1, "0");
+        await when.deleteFunctionStop("circle-radius");
+        await then(get.elementByTestId("spec-field:circle-radius")).shouldBeVisible();
+        await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+          layers: [{ id, paint: { "circle-radius": 0 } }],
+        });
+
+        await when.setValue("spec-field-input:circle-radius", "7");
+        await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+          layers: [{ id, paint: { "circle-radius": 7 } }],
+        });
+      });
+
       test("should set the base", async () => {
         await when.setFunctionBase("circle-radius", "2");
         await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
@@ -310,8 +324,9 @@ describe("layer editor", () => {
         });
       });
 
-      test("should convert to an expression", async () => {
+      test("should convert to an expression without crashing", async () => {
         await when.makeExpression("circle-radius");
+        await then(get.element("[data-wd-key='spec-field-container:circle-radius'] .maputnik-expression-editor")).shouldBeVisible();
         await then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
           layers: [{ id, paint: { "circle-radius": ["interpolate", ["linear"], ["zoom"], 6, 5, 10, 5] } }],
         });

e2e/layers-list.spec.ts

@@ -306,6 +306,75 @@ describe("layers list", () => {
   });
 
   describe("groups", () => {
+    for (const control of ["menu", "trash"] as const) {
+      describe(`after deletion using ${control}`, () => {
+        beforeEach(async () => {
+          await when.setStyle("grouped_layers");
+        });
+
+        test("keeps all groups expanded when an earlier layer is deleted", async () => {
+          await when.click("skip-target-layer-list");
+          await then(get.elementByTestId("layer-list-item:park-b")).shouldBeVisible();
+          await when.deleteLayer("background", control);
+          await then(get.elementByTestId("layer-list-item:background")).shouldNotExist();
+          await then(get.elementByTestId("layer-list-group:park-0")).shouldExist();
+          await expect(get.elementByTestId("layer-list-group:water-6").getByRole("button")).toHaveAttribute("aria-expanded", "true");
+          await then(get.elementByTestId("layer-list-item:park-b")).shouldBeVisible();
+          await then(get.elementByTestId("layer-list-item:park-e")).shouldBeVisible();
+          await then(get.elementByTestId("layer-list-item:water-b")).shouldBeVisible();
+        });
+
+        test("preserves separate states for groups with the same prefix", async () => {
+          await when.click("layer-list-group:park-1");
+          await when.deleteLayer("background", control);
+          await then(get.elementByTestId("layer-list-group:park-0")).shouldExist();
+          await when.click("layer-list-item:road");
+          await expect(get.elementByTestId("layer-list-group:park-0").getByRole("button")).toHaveAttribute("aria-expanded", "true");
+          await expect(get.elementByTestId("layer-list-group:park-4").getByRole("button")).toHaveAttribute("aria-expanded", "false");
+          await then(get.elementByTestId("layer-list-item:park-b")).shouldBeVisible();
+          await then(get.elementByTestId("layer-list-item:park-e")).shouldNotBeVisible();
+        });
+
+        test("keeps a group expanded when its first layer is deleted", async () => {
+          await when.click("layer-list-group:park-1");
+          await when.deleteLayer("park-a", control);
+          await then(get.elementByTestId("layer-list-item:park-a")).shouldNotExist();
+          await when.click("layer-list-item:road");
+          await expect(get.elementByTestId("layer-list-group:park-1").getByRole("button")).toHaveAttribute("aria-expanded", "true");
+          await then(get.elementByTestId("layer-list-item:park-c")).shouldBeVisible();
+        });
+
+        for (const expandedGroup of ["park-1", "park-5"]) {
+          test(`keeps a merged group expanded when ${expandedGroup} was expanded`, async () => {
+            await when.click("layer-list-group:" + expandedGroup);
+            await when.deleteLayer("road", control);
+            await then(get.elementByTestId("layer-list-item:road")).shouldNotExist();
+            await expect(get.elementByTestId("layer-list-group:park-1").getByRole("button")).toHaveAttribute("aria-expanded", "true");
+            await then(get.elementByTestId("layer-list-item:park-b")).shouldBeVisible();
+            await then(get.elementByTestId("layer-list-item:park-e")).shouldBeVisible();
+          });
+        }
+
+        test("keeps a merged group collapsed when both groups were collapsed", async () => {
+          await when.deleteLayer("road", control);
+          await then(get.elementByTestId("layer-list-item:road")).shouldNotExist();
+          await when.click("layer-list-item:background");
+          await expect(get.elementByTestId("layer-list-group:park-1").getByRole("button")).toHaveAttribute("aria-expanded", "false");
+          await then(get.elementByTestId("layer-list-item:park-b")).shouldNotBeVisible();
+          await then(get.elementByTestId("layer-list-item:park-e")).shouldNotBeVisible();
+        });
+
+        test("preserves later groups after deleting an entire group", async () => {
+          await when.click("skip-target-layer-list");
+          await when.deleteLayer("park-a", control);
+          await when.deleteLayer("park-b", control);
+          await when.deleteLayer("park-c", control);
+          await expect(get.elementByTestId("layer-list-group:water-4").getByRole("button")).toHaveAttribute("aria-expanded", "true");
+          await then(get.elementByTestId("layer-list-item:water-b")).shouldBeVisible();
+        });
+      });
+    }
+
     test("simple", async () => {
       await when.setStyle("geojson");
 

e2e/maputnik-driver.ts

@@ -1,5 +1,6 @@
 import { PlaywrightHelper } from "./playwright-helper";
 import { ModalDriver } from "./modal-driver";
+import emptyStyle from "../src/config/empty-style.json" with { type: "json" };
 
 const baseUrl = "http://localhost:8888/";
 const isMac = process.platform === "darwin";
@@ -39,6 +40,7 @@ export class MaputnikDriver {
         "example-style-with-zoom-7-and-center-0-51.json",
         "example-style-with-zoom-5-and-center-50-50.json",
         "access-token-style.json",
+        "grouped-layers-style.json",
       ];
       for (const fixture of styleFixtures) {
         await this.helper.given.interceptAndMockResponse({
@@ -55,6 +57,11 @@ export class MaputnikDriver {
         url: "https://www.glyph-server.com/*",
         response: ["Font 1", "Font 2", "Font 3"],
       });
+      await this.helper.given.interceptAndMockResponse({
+        method: "GET",
+        url: /cdn\.jsdelivr\.net\/.*\/empty-style\.json$/,
+        response: emptyStyle,
+      });
     },
   };
 
@@ -63,6 +70,18 @@ export class MaputnikDriver {
 
     modal: this.modalDriver.when,
 
+    deleteLayer: async (id: string, control: "menu" | "trash" = "menu") => {
+      if (control === "trash") {
+        await this.helper.when.hover("layer-list-item:" + id);
+        await this.helper.when.click("layer-list-item:" + id + ":delete");
+        return;
+      }
+
+      await this.helper.when.click("layer-list-item:" + id);
+      await this.helper.when.click("skip-target-layer-editor");
+      await this.helper.when.click("menu-delete-layer");
+    },
+
     setStyle: async (
       styleProperties:
         | "geojson"
@@ -73,6 +92,7 @@ export class MaputnikDriver {
         | "font"
         | "zoom_7_center_0_51"
         | "access_tokens"
+        | "grouped_layers"
         | "",
       zoom?: number
     ) => {
@@ -85,6 +105,7 @@ export class MaputnikDriver {
         font: "example-style-with-fonts.json",
         zoom_7_center_0_51: "example-style-with-zoom-7-and-center-0-51.json",
         access_tokens: "access-token-style.json",
+        grouped_layers: "grouped-layers-style.json",
       };
 
       const url = new URL(baseUrl);

package.json

@@ -29,7 +29,7 @@
   "dependencies": {
     "@codemirror/lang-json": "^6.0.2",
     "@codemirror/lint": "^6.9.7",
-    "@codemirror/state": "^6.7.3",
+    "@codemirror/state": "^6.7.4",
     "@codemirror/theme-one-dark": "^6.1.3",
     "@codemirror/view": "^6.43.11",
     "@dnd-kit/core": "^6.3.1",
@@ -38,7 +38,7 @@
     "@mapbox/mapbox-gl-rtl-text": "^0.4.0",
     "@maplibre/maplibre-gl-geocoder": "^1.9.4",
     "@maplibre/maplibre-gl-inspect": "^1.9.0",
-    "@maplibre/maplibre-gl-style-spec": "^26.4.1",
+    "@maplibre/maplibre-gl-style-spec": "^26.4.4",
     "array-move": "^4.0.0",
     "buffer": "^6.0.3",
     "classnames": "^2.5.1",
@@ -60,19 +60,19 @@
     "lodash.get": "^4.4.2",
     "lodash.isequal": "^4.5.0",
     "lodash.throttle": "^4.1.1",
-    "maplibre-gl": "^6.7.0",
+    "maplibre-gl": "^6.9.0",
     "maputnik-design": "github:maputnik/design#172b06c",
     "ol": "^10.10.0",
-    "ol-mapbox-style": "^13.4.3",
+    "ol-mapbox-style": "^13.5.0",
     "pmtiles": "^4.5.0",
     "prop-types": "^15.8.1",
-    "react": "^19.2.8",
+    "react": "^19.3.0",
     "react-accessible-accordion": "^5.0.1",
     "react-aria-menubutton": "^8.0.0",
     "react-aria-modal": "^5.0.2",
     "react-collapse": "^5.1.1",
     "react-color": "^2.19.3",
-    "react-dom": "^19.2.8",
+    "react-dom": "^19.3.0",
     "react-i18next": "^17.0.13",
     "react-icons": "^5.7.0",
     "react-markdown": "^10.1.0",
@@ -101,7 +101,7 @@
   "devDependencies": {
     "@eslint/js": "^10.0.1",
     "@istanbuljs/nyc-config-typescript": "^1.0.2",
-    "@playwright/test": "^1.62.1",
+    "@playwright/test": "^1.63.0",
     "@stylistic/eslint-plugin": "^5.10.0",
     "@types/codemirror": "^5.60.18",
     "@types/color": "^4.2.1",
@@ -116,36 +116,36 @@
     "@types/lodash.isequal": "^4.5.8",
     "@types/lodash.throttle": "^4.1.9",
     "@types/randomcolor": "^0.5.9",
-    "@types/react": "^19.2.18",
+    "@types/react": "^19.3.0",
     "@types/react-aria-menubutton": "^6.2.14",
     "@types/react-aria-modal": "^5.0.0",
     "@types/react-collapse": "^5.0.4",
     "@types/react-color": "^3.0.13",
-    "@types/react-dom": "^19.2.7",
+    "@types/react-dom": "^19.3.0",
     "@types/string-hash": "^1.1.3",
     "@types/wicg-file-system-access": "^2023.10.7",
     "@vitejs/plugin-react": "^6.1.1",
-    "@vitest/coverage-v8": "^4.1.11",
+    "@vitest/coverage-v8": "^5.0.0",
     "cors": "^2.8.6",
-    "eslint": "^10.9.1",
+    "eslint": "^10.10.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.6",
-    "i18next-cli": "^1.73.0",
+    "i18next-cli": "^1.73.2",
     "istanbul": "^0.4.5",
     "istanbul-lib-coverage": "^3.2.2",
     "nyc": "^18.0.0",
     "postcss": "^8.5.28",
     "react-hot-loader": "^4.13.1",
-    "sass": "^1.104.0",
-    "stylelint": "^17.14.1",
+    "sass": "^1.104.1",
+    "stylelint": "^17.15.0",
     "stylelint-config-recommended-scss": "^17.0.1",
     "stylelint-scss": "^7.2.0",
     "typescript": "^6.0.3",
-    "typescript-eslint": "^8.69.0",
+    "typescript-eslint": "^8.70.0",
     "uuid": "^14.0.2",
-    "vite": "^8.2.2",
+    "vite": "^8.3.0",
     "vite-plugin-istanbul": "^9.0.1",
-    "vitest": "^4.1.11"
+    "vitest": "^5.0.0"
   }
 }

playwright.config.ts

@@ -1,6 +1,10 @@
+import { cpus } from "node:os";
 import { defineConfig, devices } from "@playwright/test";
 
 const isCI = !!process.env.CI;
+// Playwright defaults to CPU / 2 workers,
+// capping the number of workers to 4 to avoid overloading browsers.
+const workers = Math.min(4, Math.max(1, Math.floor(cpus().length / 2)));
 // When the app is already served elsewhere (e.g. the docker e2e job) set
 // E2E_NO_WEBSERVER=1 so Playwright does not start its own dev server.
 const useExternalServer = !!process.env.E2E_NO_WEBSERVER;
@@ -13,6 +17,7 @@ export default defineConfig({
   globalTeardown: "./e2e/utils/e2e-teardown.ts",
   fullyParallel: true,
   forbidOnly: isCI,
+  workers,
   retries: isCI ? 2 : 0,
   reporter: isCI ? [["list"], ["html", { open: "never" }]] : "list",
   use: {

src/components/App.tsx

@@ -83,6 +83,22 @@ function updateRootSpec(spec: any, fieldName: string, newValues: any) {
   };
 }
 
+/**
+ * Whether the given element consumes keystrokes as text.
+ *
+ * Shortcuts have to stay out of the way while the user is typing, but asking
+ * whether the focus is on `document.body` answers a different question: the map
+ * canvas is not a text field, yet focusing it used to disable every shortcut.
+ */
+function isTextEntryElement(element: Element | null): boolean {
+  if (!element) return false;
+  const node = element as HTMLElement;
+  return node.isContentEditable ||
+    node.tagName === "INPUT" ||
+    node.tagName === "TEXTAREA" ||
+    node.tagName === "SELECT";
+}
+
 type AppState = {
   errors: MappedError[],
   infos: string[],
@@ -242,7 +258,7 @@ export class App extends React.Component<any, AppState> {
         (e.target as HTMLElement).blur();
         document.body.focus();
       }
-      else if(this.state.isOpen.shortcuts || document.activeElement === document.body) {
+      else if(this.state.isOpen.shortcuts || !isTextEntryElement(document.activeElement)) {
         const shortcut = shortcuts.find((shortcut) => {
           return (shortcut.key === e.key);
         });

src/components/FieldFunction.tsx

@@ -129,16 +129,10 @@ type FieldFunctionProps = {
  * https://www.mapbox.com/mapbox-gl-style-spec/#types-function-zoom-property
  */
 export const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
-  const [dataType, setDataType] = React.useState(
-    getDataType(props.value, props.fieldSpec)
-  );
   const [isEditing, setIsEditing] = React.useState(false);
-
-  React.useEffect(() => {
-    if (!isEditing) {
-      setDataType(getDataType(props.value, props.fieldSpec));
-    }
-  }, [props.value, props.fieldSpec, isEditing]);
+  // Keep the expression editor mounted while typing, but otherwise select the
+  // editor from the current value so a collapsed function never renders as stops.
+  const dataType = isEditing ? "expression" : getDataType(props.value, props.fieldSpec);
 
   const getFieldFunctionType = (fieldSpec: any) => {
     if (fieldSpec.expression.interpolated) {
@@ -173,7 +167,7 @@ export const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
   const deleteExpression = () => {
     const { fieldSpec, fieldName } = props;
     props.onChange(fieldName, fieldSpec.default);
-    setDataType("value");
+    setIsEditing(false);
   };
 
   const deleteStop = (stopIdx: number) => {
@@ -233,10 +227,10 @@ export const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
         type: "identity",
         property: value[1],
       });
-      setDataType("value");
+      setIsEditing(false);
     } else if (isLiteralExpression(value)) {
       props.onChange(fieldName, value[1]);
-      setDataType("value");
+      setIsEditing(false);
     }
   };
 

src/components/LayerList.tsx

@@ -106,13 +106,13 @@ class LayerListContainerInternal extends React.Component<LayerListContainerInter
     });
   };
 
-  groupedLayers(): (LayerSpecification & {key: string})[][] {
+  groupedLayers(layers = this.props.layers): (LayerSpecification & {key: string})[][] {
     const groups = [];
     const layerIdCount = new Map();
 
-    for (let i = 0; i < this.props.layers.length; i++) {
-      const origLayer = this.props.layers[i];
-      const previousLayer = this.props.layers[i-1];
+    for (let i = 0; i < layers.length; i++) {
+      const origLayer = layers[i];
+      const previousLayer = layers[i-1];
       layerIdCount.set(origLayer.id,
         layerIdCount.has(origLayer.id) ? layerIdCount.get(origLayer.id) + 1 : 0
       );
@@ -192,7 +192,39 @@ class LayerListContainerInternal extends React.Component<LayerListContainerInter
     return propsChanged;
   }
 
+  /**
+   * Preserves group state through surviving layer IDs when group indices change.
+   * If deletion joins groups, the result stays expanded when either group was.
+   */
+  private preserveLayerGroupState(previousLayers: LayerSpecification[]) {
+    if (previousLayers === this.props.layers) return;
+
+    const collapsedByLayer = new Map<string, boolean>();
+    let idx = 0;
+    for (const layers of this.groupedLayers(previousLayers)) {
+      const collapsed = this.isCollapsed(layerPrefix(layers[0].id), idx);
+      for (const layer of layers) {
+        collapsedByLayer.set(layer.id, collapsed);
+      }
+      idx += layers.length;
+    }
+
+    const collapsedGroups: {[key: string]: boolean} = {};
+    idx = 0;
+    for (const layers of this.groupedLayers()) {
+      const lookupKey = [layerPrefix(layers[0].id), idx].join("-");
+      collapsedGroups[lookupKey] = layers.every(layer => collapsedByLayer.get(layer.id) !== false);
+      idx += layers.length;
+    }
+
+    if (!lodash.isEqual(collapsedGroups, this.state.collapsedGroups)) {
+      this.setState({ collapsedGroups });
+    }
+  }
+
   componentDidUpdate (prevProps: LayerListContainerProps) {
+    this.preserveLayerGroupState(prevProps.layers);
+
     if (prevProps.selectedLayerIndex !== this.props.selectedLayerIndex) {
       const selectedItemNode = this.selectedItemRef.current;
       if (selectedItemNode && selectedItemNode.node) {