fix: fix issue with widget not selecting place (#196)

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.

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",
@@ -82,6 +83,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",

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;

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,