Add more data to the dev seeds

.formatter.exs

@@ -1,5 +1,5 @@
 [
   import_deps: [:ecto, :phoenix],
-  inputs: ["*.{ex,exs}", "priv/*/seeds.exs", "{config,lib,test}/**/*.{ex,exs}"],
+  inputs: ["*.{ex,exs}", "priv/*/seeds*.exs", "{config,lib,test}/**/*.{ex,exs}"],
   subdirectories: ["priv/*/migrations"]
 ]

assets/eslint.config.js

@@ -1,5 +1,5 @@
 import tsEslint from 'typescript-eslint';
-import vitestPlugin from 'eslint-plugin-vitest';
+import vitestPlugin from '@vitest/eslint-plugin';
 import globals from 'globals';
 
 export default tsEslint.config(

assets/js/autocomplete/__tests__/context.ts

@@ -22,7 +22,7 @@ import { GetTagSuggestionsResponse, TagSuggestion } from 'autocomplete/client';
  * `jsdom`, so it's expected that you define a single test per file so that
  * `vitest` runs every test in an isolated process, where no cleanup is needed.
  *
- * I wish `vitest` actually did that by default, because cleanup logic and test
+ * I wish `vitest` actually did that by default, because cleanup logic and
  * in-process test isolation is just boilerplate that we could avoid at this
  * scale at least.
  */
@@ -146,7 +146,7 @@ export class TestContext {
     await vi.runAllTimersAsync();
   }
 
-  async keyDown(code: string, params?: { ctrlKey?: boolean }) {
+  async keyDown(code: string, params?: { ctrlKey?: boolean; key?: string }) {
     fireEvent.keyDown(this.input, { code, ...(params ?? {}) });
     await vi.runAllTimersAsync();
   }

assets/js/autocomplete/__tests__/keyboard.spec.ts

@@ -1,114 +1,146 @@
-import { init } from './context';
-
-it('supports navigation via keyboard', async () => {
-  const ctx = await init();
-
-  await ctx.setInput('f');
-
-  await ctx.keyDown('ArrowDown');
-
-  ctx.expectUi().toMatchInlineSnapshot(`
-    {
-      "input": "forest<>",
-      "suggestions": [
-        "👉 forest  3",
-        "force field  1",
-        "fog  1",
-        "flower  1",
-      ],
-    }
-  `);
-
-  await ctx.keyDown('ArrowDown');
-
-  ctx.expectUi().toMatchInlineSnapshot(`
-    {
-      "input": "force field<>",
-      "suggestions": [
-        "forest  3",
-        "👉 force field  1",
-        "fog  1",
-        "flower  1",
-      ],
-    }
-  `);
-
-  await ctx.keyDown('ArrowDown', { ctrlKey: true });
-
-  ctx.expectUi().toMatchInlineSnapshot(`
-    {
-      "input": "flower<>",
-      "suggestions": [
-        "forest  3",
-        "force field  1",
-        "fog  1",
-        "👉 flower  1",
-      ],
-    }
-  `);
-
-  await ctx.keyDown('ArrowUp', { ctrlKey: true });
-
-  ctx.expectUi().toMatchInlineSnapshot(`
-    {
-      "input": "forest<>",
-      "suggestions": [
-        "👉 forest  3",
-        "force field  1",
-        "fog  1",
-        "flower  1",
-      ],
-    }
-  `);
-
-  await ctx.keyDown('Enter');
-
-  ctx.expectUi().toMatchInlineSnapshot(`
-    {
-      "input": "forest<>",
-      "suggestions": [],
-    }
-  `);
-
-  await ctx.setInput('forest, t<>, safe');
-
-  ctx.expectUi().toMatchInlineSnapshot(`
-    {
-      "input": "forest, t<>, safe",
-      "suggestions": [
-        "artist:test  1",
-      ],
-    }
-  `);
-
-  await ctx.keyDown('ArrowDown');
-
-  ctx.expectUi().toMatchInlineSnapshot(`
-    {
-      "input": "forest, artist:test<>, safe",
-      "suggestions": [
-        "👉 artist:test  1",
-      ],
-    }
-  `);
-
-  await ctx.keyDown('Escape');
-
-  ctx.expectUi().toMatchInlineSnapshot(`
-    {
-      "input": "forest, artist:test<>, safe",
-      "suggestions": [],
-    }
-  `);
-
-  await ctx.setInput('forest, t<>, safe');
-  await ctx.keyDown('ArrowDown');
-  await ctx.keyDown('Enter');
-
-  ctx.expectUi().toMatchInlineSnapshot(`
-    {
-      "input": "forest, artist:test<>, safe",
-      "suggestions": [],
-    }
-  `);
+import { init, TestContext } from './context';
+
+describe('Autocomplete keyboard navigation', () => {
+  let ctx: TestContext;
+
+  beforeAll(async () => {
+    ctx = await init();
+  });
+
+  it('supports navigation via keyboard', async () => {
+    await ctx.setInput('f');
+
+    await ctx.keyDown('ArrowDown');
+
+    ctx.expectUi().toMatchInlineSnapshot(`
+      {
+        "input": "forest<>",
+        "suggestions": [
+          "👉 forest  3",
+          "force field  1",
+          "fog  1",
+          "flower  1",
+        ],
+      }
+    `);
+
+    await ctx.keyDown('ArrowDown');
+
+    ctx.expectUi().toMatchInlineSnapshot(`
+      {
+        "input": "force field<>",
+        "suggestions": [
+          "forest  3",
+          "👉 force field  1",
+          "fog  1",
+          "flower  1",
+        ],
+      }
+    `);
+
+    await ctx.keyDown('ArrowDown', { ctrlKey: true });
+
+    ctx.expectUi().toMatchInlineSnapshot(`
+      {
+        "input": "flower<>",
+        "suggestions": [
+          "forest  3",
+          "force field  1",
+          "fog  1",
+          "👉 flower  1",
+        ],
+      }
+    `);
+
+    await ctx.keyDown('ArrowUp', { ctrlKey: true });
+
+    ctx.expectUi().toMatchInlineSnapshot(`
+      {
+        "input": "forest<>",
+        "suggestions": [
+          "👉 forest  3",
+          "force field  1",
+          "fog  1",
+          "flower  1",
+        ],
+      }
+    `);
+
+    await ctx.keyDown('Enter');
+
+    ctx.expectUi().toMatchInlineSnapshot(`
+      {
+        "input": "forest<>",
+        "suggestions": [],
+      }
+    `);
+
+    await ctx.setInput('forest, t<>, safe');
+
+    ctx.expectUi().toMatchInlineSnapshot(`
+      {
+        "input": "forest, t<>, safe",
+        "suggestions": [
+          "artist:test  1",
+        ],
+      }
+    `);
+
+    await ctx.keyDown('ArrowDown');
+
+    ctx.expectUi().toMatchInlineSnapshot(`
+      {
+        "input": "forest, artist:test<>, safe",
+        "suggestions": [
+          "👉 artist:test  1",
+        ],
+      }
+    `);
+
+    await ctx.keyDown('Escape');
+
+    ctx.expectUi().toMatchInlineSnapshot(`
+      {
+        "input": "forest, artist:test<>, safe",
+        "suggestions": [],
+      }
+    `);
+
+    await ctx.setInput('forest, t<>, safe');
+    await ctx.keyDown('ArrowDown');
+    await ctx.keyDown('Enter');
+
+    ctx.expectUi().toMatchInlineSnapshot(`
+      {
+        "input": "forest, artist:test<>, safe",
+        "suggestions": [],
+      }
+    `);
+  });
+
+  it('should handle Enter key presses with empty code property', async () => {
+    await ctx.setInput('f');
+
+    ctx.expectUi().toMatchInlineSnapshot(`
+      {
+        "input": "f<>",
+        "suggestions": [
+          "forest  3",
+          "force field  1",
+          "fog  1",
+          "flower  1",
+        ],
+      }
+    `);
+
+    await ctx.keyDown('ArrowDown');
+    await ctx.keyDown('', { key: 'Enter' });
+
+    ctx.expectUi().toMatchInlineSnapshot(`
+      {
+        "input": "forest<>",
+        "suggestions": [],
+      }
+    `);
+  });
 });

assets/js/autocomplete/index.ts

@@ -2,12 +2,12 @@ import { LocalAutocompleter } from '../utils/local-autocompleter';
 import * as history from './history';
 import { AutocompletableInput, TextInputElement } from './input';
 import {
-  SuggestionsPopupComponent,
-  Suggestions,
-  TagSuggestionComponent,
-  Suggestion,
   HistorySuggestionComponent,
   ItemSelectedEvent,
+  Suggestion,
+  Suggestions,
+  SuggestionsPopupComponent,
+  TagSuggestionComponent,
 } from '../utils/suggestions-view';
 import { prefixMatchParts } from '../utils/suggestions-model';
 import { $$ } from '../utils/dom';
@@ -243,13 +243,21 @@ class Autocomplete {
     if (!this.isActive() || this.input.element !== event.target) {
       return;
     }
-    if ((event.key === ',' || event.code === 'Enter') && this.input.type === 'single-tag') {
+
+    let keyCode = event.code;
+
+    // Chrome & Firefox on Android devices return empty code when "Enter" is pressed.
+    if (!keyCode && event.key === 'Enter') {
+      keyCode = event.key;
+    }
+
+    if ((event.key === ',' || keyCode === 'Enter') && this.input.type === 'single-tag') {
       // Comma/Enter mean the end of input for the current tag in single-tag mode.
       this.hidePopup(`The user accepted the existing input via key: '${event.key}', code: '${event.code}'`);
       return;
     }
 
-    switch (event.code) {
+    switch (keyCode) {
       case 'Enter': {
         const { selectedSuggestion } = this.popup;
         if (!selectedSuggestion) {