From bd2a77a0f38e4f82fe0a8f437b8d038ae7188dfa Mon Sep 17 00:00:00 2001
From: 0neGal <mail@0negal.com>
Date: Fri, 20 Dec 2024 22:19:57 +0100
Subject: properly open <select>'s with navigation functions

---
 src/app/js/navigate.js | 41 ++++++++++++++++++++++++++++++++++++++++-
 src/app/js/settings.js |  7 +++++++
 src/modules/ipc.js     |  7 +++++++
 3 files changed, 54 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/app/js/navigate.js b/src/app/js/navigate.js
index 8cf2584..908a432 100644
--- a/src/app/js/navigate.js
+++ b/src/app/js/navigate.js
@@ -10,6 +10,17 @@ let navigate = {
 // according to what is currently the `.active-selection`, if none is
 // found, it'll instead be hidden
 navigate.selection = (new_selection) => {
+	// if we're not allowed to unselect an element, then make sure that
+	// element is still unselected, and then clear
+	// `navigate.dont_unselect`
+	if (navigate.dont_unselect
+		&& navigate.dont_unselect != new_selection) {
+
+		navigate.dont_unselect.classList.add("active-selection");
+		navigate.dont_unselect = false;
+		return;
+	}
+
 	if (new_selection) {
 		let selected = document.querySelectorAll(".active-selection");
 
@@ -505,9 +516,32 @@ navigate.select = () => {
 			return;
 		}
 
+		// correctly open a `<select>`
+		//
+		// they require special handling, as unless the Enter key is
+		// pressed, then the menu won't open, and instead the element is
+		// focused, which isn't great
+		//
+		// so we make the main process send a fake Enter key press
+		if (active.closest("select")) {
+			active = active.closest("select");
+
+			// make sure `<select>` is focused
+			active.focus();
+			active.click();
+
+			// make sure this element doesn't get unselected
+			navigate.dont_unselect = active;
+
+			// send fake Enter key to open selection menu
+			ipcRenderer.send("send-enter-key");
+
+			return;
+		}
+
 		// click and focus `active`
-		active.click();
 		active.focus();
+		active.click();
 	}, 150)
 }
 
@@ -854,6 +888,11 @@ events.on("popup-changed", (e) => {
 		return;
 	}
 
+	// ignore if `active_el` is a `<select>`
+	if (active_el.closest("select")) {
+		return;
+	}
+
 	// add `active_el` to `last_popup_selections` if we opened a popup
 	if (e.new_state) {
 		last_popup_selections.push({
diff --git a/src/app/js/settings.js b/src/app/js/settings.js
index b5ef773..56bfc5f 100644
--- a/src/app/js/settings.js
+++ b/src/app/js/settings.js
@@ -264,6 +264,13 @@ settings.popup.load = () => {
 		}
 	}
 
+	let selects = document.querySelectorAll("#options select");
+	for (let el of selects) {
+		el.addEventListener("change", () => {
+			el.blur();
+		})
+	}
+
 	// create Fuse based on options from `get_search_arr()`
 	settings_fuse = new Fuse(get_search_arr(), {
 		keys: ["text"],
diff --git a/src/modules/ipc.js b/src/modules/ipc.js
index 55737b7..57820b5 100644
--- a/src/modules/ipc.js
+++ b/src/modules/ipc.js
@@ -30,3 +30,10 @@ ipcMain.on("relaunch", () => {
 
 	app.exit(0);
 })
+
+ipcMain.on("send-enter-key", (e, coords) => {
+	e.sender.sendInputEvent({
+		type: "char",
+		keyCode: "enter"
+	})
+})
-- 
cgit v1.2.3