fix: fix issue with widget not selecting place

The issue with the widget not selecting a place was due to the event listener on blur. The blur event was happening before the "combobox-commit" event which is the one that sets the place. A fix for this was to add event listener to the `mousedown` event instead of the `click` event in the combobox code. That was solved with a patch using `patch-package`. Also mentioned in this issue: github/combobox-nav#54 Also fixed an issue that showed "undefined" if selected place did not have a locality.
AtB-AS · Jan 4, 2024 · 60cea0e · 60cea0e
1 parent f7ae304
commit 60cea0e
Show file tree

Hide file tree

Showing 13 changed files with 584 additions and 410 deletions.
diff --git a/package.json b/package.json
@@ -18,7 +18,8 @@
     "generate": "graphql-codegen",
     "prestart": "yarn generate",
     "predev": "yarn generate",
-    "generate-widget-version": "sh ./scripts/build-widget.sh"
+    "generate-widget-version": "sh ./scripts/build-widget.sh",
+    "postinstall": "patch-package"
   },
   "dependencies": {
     "@apollo/client": "^3.8.8",
@@ -81,6 +82,8 @@
     "graphql-tag": "^2.12.6",
     "happy-dom": "^12.10.3",
     "next-router-mock": "^0.9.10",
+    "patch-package": "^8.0.0",
+    "postinstall-postinstall": "^2.1.0",
     "prettier": "^3.1.1",
     "rimraf": "^5.0.1",
     "typescript": "5.3.3",

diff --git a/patches/@github+combobox-nav+2.3.0.patch b/patches/@github+combobox-nav+2.3.0.patch
@@ -0,0 +1,22 @@
+diff --git a/node_modules/@github/combobox-nav/dist/index.js b/node_modules/@github/combobox-nav/dist/index.js
+index d86de71..3956688 100644
+--- a/node_modules/@github/combobox-nav/dist/index.js
++++ b/node_modules/@github/combobox-nav/dist/index.js
+@@ -34,7 +34,7 @@ export default class Combobox {
+         this.input.addEventListener('compositionend', this.compositionEventHandler);
+         this.input.addEventListener('input', this.inputHandler);
+         this.input.addEventListener('keydown', this.keyboardEventHandler);
+-        this.list.addEventListener('click', commitWithElement);
++        this.list.addEventListener('mousedown', commitWithElement);
+         this.indicateDefaultOption();
+     }
+     stop() {
+@@ -44,7 +44,7 @@ export default class Combobox {
+         this.input.removeEventListener('compositionend', this.compositionEventHandler);
+         this.input.removeEventListener('input', this.inputHandler);
+         this.input.removeEventListener('keydown', this.keyboardEventHandler);
+-        this.list.removeEventListener('click', commitWithElement);
++        this.list.removeEventListener('mousedown', commitWithElement);
+     }
+     indicateDefaultOption() {
+         var _a;
diff --git a/public/widget/GYJwhgtkA/2.6.0/planner-web.mjs b/public/widget/GYJwhgtkA/2.6.0/planner-web.mjs
diff --git a/public/widget/GYJwhgtkA/2.6.0/planner-web.umd.js b/public/widget/GYJwhgtkA/2.6.0/planner-web.umd.js
diff --git a/public/widget/HYMw1kA/2.6.0/planner-web.mjs b/public/widget/HYMw1kA/2.6.0/planner-web.mjs
diff --git a/public/widget/HYMw1kA/2.6.0/planner-web.umd.js b/public/widget/HYMw1kA/2.6.0/planner-web.umd.js
diff --git a/public/widget/IYFwRkA/2.6.0/planner-web.mjs b/public/widget/IYFwRkA/2.6.0/planner-web.mjs
diff --git a/public/widget/IYFwRkA/2.6.0/planner-web.umd.js b/public/widget/IYFwRkA/2.6.0/planner-web.umd.js
diff --git a/src/page-modules/widget/available-widgets/GYJwhgtkA/manifest.json b/src/page-modules/widget/available-widgets/GYJwhgtkA/manifest.json
@@ -1,7 +1,7 @@
 {
   "latest": {
     "version": "2.6.0",
-    "created": "2023-12-21T11:45:28.198Z",
+    "created": "2023-12-13T10:54:28.898Z",
     "urls": {
       "umd": "/widget/GYJwhgtkA/2.6.0/planner-web.umd.js",
       "esm": "/widget/GYJwhgtkA/2.6.0/planner-web.mjs",
@@ -11,7 +11,7 @@
   "all": [
     {
       "version": "2.6.0",
-      "created": "2023-12-21T11:45:28.198Z",
+      "created": "2023-12-13T10:54:28.898Z",
       "urls": {
         "umd": "/widget/GYJwhgtkA/2.6.0/planner-web.umd.js",
         "esm": "/widget/GYJwhgtkA/2.6.0/planner-web.mjs",
@@ -20,7 +20,7 @@
     },
     {
       "version": "2.2.2",
-      "created": "2023-12-21T11:45:28.198Z",
+      "created": "2023-12-13T10:54:28.898Z",
       "urls": {
         "umd": "/widget/GYJwhgtkA/2.2.2/planner-web.umd.js",
         "esm": "/widget/GYJwhgtkA/2.2.2/planner-web.mjs",
@@ -29,7 +29,7 @@
     },
     {
       "version": "2.1.0",
-      "created": "2023-12-21T11:45:28.198Z",
+      "created": "2023-12-13T10:54:28.898Z",
       "urls": {
         "umd": "/widget/GYJwhgtkA/2.1.0/planner-web.umd.js",
         "esm": "/widget/GYJwhgtkA/2.1.0/planner-web.mjs",
@@ -38,7 +38,7 @@
     },
     {
       "version": "2.0.0",
-      "created": "2023-12-21T11:45:28.198Z",
+      "created": "2023-12-13T10:54:28.898Z",
       "urls": {
         "umd": "/widget/GYJwhgtkA/2.0.0/planner-web.umd.js",
         "esm": "/widget/GYJwhgtkA/2.0.0/planner-web.mjs",
@@ -47,7 +47,7 @@
     },
     {
       "version": "1.0.0",
-      "created": "2023-12-21T11:45:28.198Z",
+      "created": "2023-12-13T10:54:28.898Z",
       "urls": {
         "umd": "/widget/GYJwhgtkA/1.0.0/planner-web.umd.js",
         "esm": "/widget/GYJwhgtkA/1.0.0/planner-web.mjs",
@@ -56,7 +56,7 @@
     },
     {
       "version": "0.2.0",
-      "created": "2023-12-21T11:45:28.198Z",
+      "created": "2023-12-13T10:54:28.898Z",
       "urls": {
         "umd": "/widget/GYJwhgtkA/0.2.0/planner-web.umd.js",
         "esm": "/widget/GYJwhgtkA/0.2.0/planner-web.mjs",

diff --git a/src/page-modules/widget/available-widgets/HYMw1kA/manifest.json b/src/page-modules/widget/available-widgets/HYMw1kA/manifest.json
@@ -1,7 +1,7 @@
 {
   "latest": {
     "version": "2.6.0",
-    "created": "2023-12-21T11:45:28.200Z",
+    "created": "2023-12-13T10:54:28.899Z",
     "urls": {
       "umd": "/widget/HYMw1kA/2.6.0/planner-web.umd.js",
       "esm": "/widget/HYMw1kA/2.6.0/planner-web.mjs",
@@ -11,7 +11,7 @@
   "all": [
     {
       "version": "2.6.0",
-      "created": "2023-12-21T11:45:28.200Z",
+      "created": "2023-12-13T10:54:28.899Z",
       "urls": {
         "umd": "/widget/HYMw1kA/2.6.0/planner-web.umd.js",
         "esm": "/widget/HYMw1kA/2.6.0/planner-web.mjs",
@@ -20,7 +20,7 @@
     },
     {
       "version": "2.2.2",
-      "created": "2023-12-21T11:45:28.200Z",
+      "created": "2023-12-13T10:54:28.899Z",
       "urls": {
         "umd": "/widget/HYMw1kA/2.2.2/planner-web.umd.js",
         "esm": "/widget/HYMw1kA/2.2.2/planner-web.mjs",
@@ -29,7 +29,7 @@
     },
     {
       "version": "2.1.0",
-      "created": "2023-12-21T11:45:28.200Z",
+      "created": "2023-12-13T10:54:28.899Z",
       "urls": {
         "umd": "/widget/HYMw1kA/2.1.0/planner-web.umd.js",
         "esm": "/widget/HYMw1kA/2.1.0/planner-web.mjs",
@@ -38,7 +38,7 @@
     },
     {
       "version": "2.0.0",
-      "created": "2023-12-21T11:45:28.200Z",
+      "created": "2023-12-13T10:54:28.899Z",
       "urls": {
         "umd": "/widget/HYMw1kA/2.0.0/planner-web.umd.js",
         "esm": "/widget/HYMw1kA/2.0.0/planner-web.mjs",
@@ -47,7 +47,7 @@
     },
     {
       "version": "1.0.0",
-      "created": "2023-12-21T11:45:28.200Z",
+      "created": "2023-12-13T10:54:28.899Z",
       "urls": {
         "umd": "/widget/HYMw1kA/1.0.0/planner-web.umd.js",
         "esm": "/widget/HYMw1kA/1.0.0/planner-web.mjs",
@@ -56,7 +56,7 @@
     },
     {
       "version": "0.2.0",
-      "created": "2023-12-21T11:45:28.200Z",
+      "created": "2023-12-13T10:54:28.899Z",
       "urls": {
         "umd": "/widget/HYMw1kA/0.2.0/planner-web.umd.js",
         "esm": "/widget/HYMw1kA/0.2.0/planner-web.mjs",

diff --git a/src/page-modules/widget/available-widgets/IYFwRkA/manifest.json b/src/page-modules/widget/available-widgets/IYFwRkA/manifest.json
@@ -1,7 +1,7 @@
 {
   "latest": {
     "version": "2.6.0",
-    "created": "2023-12-21T11:45:28.202Z",
+    "created": "2023-12-13T10:54:28.899Z",
     "urls": {
       "umd": "/widget/IYFwRkA/2.6.0/planner-web.umd.js",
       "esm": "/widget/IYFwRkA/2.6.0/planner-web.mjs",
@@ -11,7 +11,7 @@
   "all": [
     {
       "version": "2.6.0",
-      "created": "2023-12-21T11:45:28.202Z",
+      "created": "2023-12-13T10:54:28.899Z",
       "urls": {
         "umd": "/widget/IYFwRkA/2.6.0/planner-web.umd.js",
         "esm": "/widget/IYFwRkA/2.6.0/planner-web.mjs",
@@ -20,7 +20,7 @@
     },
     {
       "version": "2.2.2",
-      "created": "2023-12-21T11:45:28.202Z",
+      "created": "2023-12-13T10:54:28.899Z",
       "urls": {
         "umd": "/widget/IYFwRkA/2.2.2/planner-web.umd.js",
         "esm": "/widget/IYFwRkA/2.2.2/planner-web.mjs",
@@ -29,7 +29,7 @@
     },
     {
       "version": "2.1.0",
-      "created": "2023-12-21T11:45:28.202Z",
+      "created": "2023-12-13T10:54:28.899Z",
       "urls": {
         "umd": "/widget/IYFwRkA/2.1.0/planner-web.umd.js",
         "esm": "/widget/IYFwRkA/2.1.0/planner-web.mjs",
@@ -38,7 +38,7 @@
     },
     {
       "version": "2.0.0",
-      "created": "2023-12-21T11:45:28.202Z",
+      "created": "2023-12-13T10:54:28.899Z",
       "urls": {
         "umd": "/widget/IYFwRkA/2.0.0/planner-web.umd.js",
         "esm": "/widget/IYFwRkA/2.0.0/planner-web.mjs",
@@ -47,7 +47,7 @@
     },
     {
       "version": "1.0.0",
-      "created": "2023-12-21T11:45:28.202Z",
+      "created": "2023-12-13T10:54:28.899Z",
       "urls": {
         "umd": "/widget/IYFwRkA/1.0.0/planner-web.umd.js",
         "esm": "/widget/IYFwRkA/1.0.0/planner-web.mjs",
@@ -56,7 +56,7 @@
     },
     {
       "version": "0.2.0",
-      "created": "2023-12-21T11:45:28.202Z",
+      "created": "2023-12-13T10:54:28.899Z",
       "urls": {
         "umd": "/widget/IYFwRkA/0.2.0/planner-web.umd.js",
         "esm": "/widget/IYFwRkA/0.2.0/planner-web.mjs",

diff --git a/src/widget/widget.ts b/src/widget/widget.ts
@@ -387,11 +387,7 @@ function createOutput({ URL_BASE }: SettingConstants, texts: Texts) {
         fetcher(e.target as HTMLInputElement),
       );
       input.addEventListener('focus', () => toggleList(true));
-      input.addEventListener(
-        'blur',
-        // Blur after properly selecting
-        debounce(() => toggleList(false), 100),
-      );
+      input.addEventListener('blur', () => toggleList(false));
       document.addEventListener('click', (e) => {
         if (!hasParent(e.target as HTMLElement, this)) {
           toggleList(false);
@@ -403,7 +399,15 @@ function createOutput({ URL_BASE }: SettingConstants, texts: Texts) {
           'data-feature-id',
         );
         const item = itemId ? self.getItem(itemId) : undefined;
-        input.value = item ? `${item.name}, ${item.locality}` : input.value;
+        let newValue = input.value;
+        if (item) {
+          newValue = `${item.name}`;
+
+          if (item.locality) {
+            newValue += `, ${item.locality}`;
+          }
+        }
+        input.value = newValue;
         document.dispatchEvent(
           new CustomEvent('search-selected', {
             bubbles: true,