@codemirror/autocomplete 6.18.4 → 6.18.5

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 6.18.5 (2025-02-11)
+
+### Bug fixes
+
+Fix an issue where clicking on the scrollbar for the completion list could move focus out of the editor.
+
 ## 6.18.4 (2024-12-17)
 
 ### Bug fixes

package/README.md

@@ -16,3 +16,28 @@ We aim to be an inclusive, welcoming community. To make that explicit,
 we have a [code of
 conduct](http://contributor-covenant.org/version/1/1/0/) that applies
 to communication around the project.
+
+## Usage
+
+```javascript
+import {EditorView} from "@codemirror/view"
+import {autocompletion} from "@codemirror/autocomplete"
+import {jsonLanguage} from "@codemirror/lang-json"
+
+const view = new EditorView({
+  parent: document.body,
+  extensions: [
+    jsonLanguage,
+    autocompletion(),
+    jsonLanguage.data.of({
+      autocomplete: ["id", "name", "address"]
+    })
+  ]
+})
+```
+
+This configuration will just complete the given words anywhere in JSON
+context. Most language modules come with more refined autocompletion
+built-in, but you can also write your own custom autocompletion
+[sources](https://codemirror.net/docs/ref/#autocomplete.CompletionSource)
+and associate them with your language this way.

package/dist/index.cjs

@@ -652,8 +652,8 @@ class CompletionTooltip {
         let selRect = sel.getBoundingClientRect();
         let space = this.space;
         if (!space) {
-            let win = this.dom.ownerDocument.defaultView || window;
-            space = { left: 0, top: 0, right: win.innerWidth, bottom: win.innerHeight };
+            let docElt = this.dom.ownerDocument.documentElement;
+            space = { left: 0, top: 0, right: docElt.clientWidth, bottom: docElt.clientHeight };
         }
         if (selRect.top > Math.min(space.bottom, listRect.bottom) - 10 ||
             selRect.bottom < Math.max(space.top, listRect.top) + 10)
@@ -678,6 +678,11 @@ class CompletionTooltip {
         ul.setAttribute("role", "listbox");
         ul.setAttribute("aria-expanded", "true");
         ul.setAttribute("aria-label", this.view.state.phrase("Completions"));
+        ul.addEventListener("mousedown", e => {
+            // Prevent focus change when clicking the scrollbar
+            if (e.target == ul)
+                e.preventDefault();
+        });
         let curSection = null;
         for (let i = range.from; i < range.to; i++) {
             let { completion, match } = options[i], { section } = completion;

package/dist/index.js

@@ -650,8 +650,8 @@ class CompletionTooltip {
         let selRect = sel.getBoundingClientRect();
         let space = this.space;
         if (!space) {
-            let win = this.dom.ownerDocument.defaultView || window;
-            space = { left: 0, top: 0, right: win.innerWidth, bottom: win.innerHeight };
+            let docElt = this.dom.ownerDocument.documentElement;
+            space = { left: 0, top: 0, right: docElt.clientWidth, bottom: docElt.clientHeight };
         }
         if (selRect.top > Math.min(space.bottom, listRect.bottom) - 10 ||
             selRect.bottom < Math.max(space.top, listRect.top) + 10)
@@ -676,6 +676,11 @@ class CompletionTooltip {
         ul.setAttribute("role", "listbox");
         ul.setAttribute("aria-expanded", "true");
         ul.setAttribute("aria-label", this.view.state.phrase("Completions"));
+        ul.addEventListener("mousedown", e => {
+            // Prevent focus change when clicking the scrollbar
+            if (e.target == ul)
+                e.preventDefault();
+        });
         let curSection = null;
         for (let i = range.from; i < range.to; i++) {
             let { completion, match } = options[i], { section } = completion;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codemirror/autocomplete",
-  "version": "6.18.4",
+  "version": "6.18.5",
   "description": "Autocompletion for the CodeMirror code editor",
   "scripts": {
     "test": "cm-runtests",