From d49ed381852b8fda332f93771a34db11f8548de9 Mon Sep 17 00:00:00 2001
From: Hornwitser <code@hornwitser.no>
Date: Fri, 27 Jun 2025 18:20:24 +0200
Subject: [PATCH] Add custom select component

The selection of locations, events, roles, shifts and users using the
native <select> element makes for awkward and difficult interactions.
Add an alternative select control that fixes the issues with the poor
handling and navigation of the control when having many options.

The custom select component can handle the selection of either one or
many entity from a ClientMap of entiteis with a name. Typing into the
text box searches the entities by name, arrow keys can navigate and
enter confirms the chosen entity by toggling it's presence in the
selection.
---
 components/SelectDropdown.vue     | 244 ++++++++++++++++++++++++++++++
 components/SelectMultiEntity.vue  |  64 ++++++++
 components/SelectSingleEntity.vue |  55 +++++++
 3 files changed, 363 insertions(+)
 create mode 100644 components/SelectDropdown.vue
 create mode 100644 components/SelectMultiEntity.vue
 create mode 100644 components/SelectSingleEntity.vue

diff --git a/components/SelectDropdown.vue b/components/SelectDropdown.vue
new file mode 100644
index 0000000..fb67d24
--- /dev/null
+++ b/components/SelectDropdown.vue
@@ -0,0 +1,244 @@
+<template>
+	<div class="input">
+		<input
+			type="text"
+			v-model="inputText"
+			ref="input"
+			@keydown.up="keyUp"
+			@keydown.down="keyDown"
+			@keydown.enter="toggleActive"
+			@keydown.backspace="keyBackspace"
+		>
+		<button
+			@click="manualToggle()"
+			@keydown.up="keyUp"
+			@keydown.down="keyDown"
+			@keydown.enter.space="dropdownKey"
+		>
+			v
+		</button>
+		<div
+			v-if="showDropdown"
+			class="dropdown"
+		>
+			<ul class="options">
+				<li
+					v-for="entity of matchingEntities"
+					:class="{ active: activeId === entity.id, selected: selectedIds.has(entity.id) }"
+					@click="activeId = entity.id; toggleActive($event)"
+					tabindex="-1"
+				>
+					{{ entity.name }}
+				</li>
+				<li v-if="matchingEntities.length === 0">
+					no results
+				</li>
+			</ul>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import type { ApiEntity } from '~/shared/types/api';
+import type { Id } from '~/shared/types/common';
+import type { ClientEntity } from '~/utils/client-entity';
+
+const selectedIds = defineModel<Set<Id>>({ required: true });
+const activeId = ref<Id>();
+const props = defineProps<{
+	entities: ClientMap<ClientEntity<ApiEntity> & { name?: string }>,
+	multi: boolean,
+}>();
+
+// Reset manualToggle if the focus leaves this component and doesn't come back.
+const focusTimer = ref<ReturnType<typeof setTimeout>>();
+function focusout() {
+	focusTimer.value = setTimeout(() => {
+		manualState.value = "closed";
+	}, 0);
+}
+function focusin() {
+	clearTimeout(focusTimer.value);
+}
+function esc() {
+	manualState.value = undefined;
+}
+function windowBlur() {
+	clearTimeout(focusTimer.value);
+}
+onMounted(() => {
+	window.addEventListener("blur", windowBlur);
+});
+onUnmounted(() => {
+	window.removeEventListener("blur", windowBlur);
+});
+
+defineExpose({
+	activeId,
+	focusin,
+	focusout,
+	esc,
+});
+
+const inputText = ref("");
+const manualState = ref<"open" | "closed">();
+const showDropdown = computed(() => {
+	if (manualState.value) {
+		return manualState.value === "open";
+	}
+	return Boolean(inputText.value)
+});
+
+function manualToggle() {
+	if (showDropdown.value) {
+		manualState.value = "closed";
+		activeId.value = undefined;
+	} else {
+		manualState.value = "open";
+	}
+}
+
+function dropdownKey(event: KeyboardEvent) {
+	if (showDropdown.value) {
+		toggleActive(event);
+	}
+}
+
+function ensureActive(match: "first" | "last") {
+	const active = props.entities.get(activeId.value!);
+	if (!active || !active.name || !fuzzyMatch(inputText.value, active.name)) {
+		// Set active id to the first match in the chosen direction
+		const entities = match === "first" ? matchingEntities.value : [...matchingEntities.value].reverse();
+		for (const entity of entities) {
+			if (entity.name && fuzzyMatch(inputText.value, entity.name)) {
+				activeId.value = entity.id;
+				return;
+			}
+		}
+		// No matches
+		activeId.value = undefined;
+	}
+}
+watch(inputText, () => {
+	if (manualState.value === "closed") {
+		manualState.value = undefined;
+	}
+	if (!inputText.value) {
+		return;
+	}
+	ensureActive("first");
+})
+function keyUp(event: KeyboardEvent) {
+	if (activeId.value === undefined) {
+		ensureActive("last");
+		event.preventDefault();
+		return;
+	}
+	const index = matchingEntities.value.findIndex(entity => entity.id === activeId.value);
+	if (index !== -1 && index !== 0) {
+		activeId.value = matchingEntities.value[index - 1].id;
+		event.preventDefault();
+	}
+}
+function keyDown(event: KeyboardEvent) {
+	if (activeId.value === undefined) {
+		ensureActive("first");
+		event.preventDefault();
+		return;
+	}
+	const index = matchingEntities.value.findIndex(entity => entity.id === activeId.value);
+	if (index !== -1 && index !== matchingEntities.value.length) {
+		activeId.value = matchingEntities.value[index + 1].id;
+		event.preventDefault();
+	}
+}
+const inputElement = useTemplateRef("input");
+function keyBackspace(event: KeyboardEvent) {
+	if (
+		inputElement.value?.selectionStart === 0
+		&& inputElement.value?.selectionEnd === 0
+	) {
+		const lastId = [...selectedIds.value].slice(-1)[0];
+		if (lastId === undefined) {
+			return;
+		}
+		if (props.multi) {
+			selectedIds.value.delete(lastId);
+		} else {
+			selectedIds.value = new Set();
+		}
+		const entity = props.entities.get(lastId);
+		inputText.value = `${entity?.name ?? lastId}${inputText.value ? " " : ""}${inputText.value}`;
+	}
+}
+function toggleActive(event: MouseEvent | KeyboardEvent) {
+	if (activeId.value !== undefined) {
+		if (props.multi) {
+			if (selectedIds.value.has(activeId.value)) {
+				selectedIds.value.delete(activeId.value);
+			} else {
+				selectedIds.value.add(activeId.value);
+			}
+		} else {
+			selectedIds.value = new Set([activeId.value]);
+		}
+		if (!props.multi || !event.ctrlKey) {
+			manualState.value = undefined;
+			activeId.value = undefined;
+			inputText.value = "";
+		}
+		event.preventDefault();
+	}
+}
+
+const fuzzyMatch = useFuzzyMatch();
+const stringSort = useStringSort();
+const matchingEntities = computed(() => {
+	let entities = [...props.entities.values()];
+	if (inputText.value) {
+		entities = entities.filter(entity => entity.name && fuzzyMatch(inputText.value, entity.name));
+	}
+	return entities.sort((a, b) => stringSort(a.name ?? "", b.name ?? ""));
+});
+</script>
+
+<style scoped>
+.input {
+	display: flex;
+	flex-grow: 1;
+}
+
+input {
+	width: 2rem;
+	flex-grow: 1;
+}
+.dropdown {
+	position: absolute;
+	z-index: 1;
+	background: Canvas;
+	color: CanvasText;
+	left: 0;
+	right: 0;
+	top: 100%;
+	max-height: 50lvh;
+	overflow-y: auto;
+}
+.options {
+	list-style: none;
+	padding-inline-start: 0;
+}
+.options li:focus,
+.options .active {
+	color: Canvas;
+	background-color: CanvasText;
+}
+.options .selected {
+	color: color-mix(in oklab, CanvasText, orange 30%);
+	background-color: color-mix(in oklab, Canvas, orange 30%);
+}
+.options li:focus.selected,
+.options .active.selected {
+	color: color-mix(in oklab, Canvas, orange 30%);
+	background-color: color-mix(in oklab, CanvasText, orange 30%);
+}
+</style>
diff --git a/components/SelectMultiEntity.vue b/components/SelectMultiEntity.vue
new file mode 100644
index 0000000..38ebbe8
--- /dev/null
+++ b/components/SelectMultiEntity.vue
@@ -0,0 +1,64 @@
+<template>
+	<div
+		class="select"
+		@focusin="dropdownComponent?.focusin()"
+		@focusout="dropdownComponent?.focusout()"
+		@keyup.esc="dropdownComponent?.esc()"
+	>
+		<div class="selected">
+			<div
+				v-for="id of selectedIds"
+				:key="id"
+				class="item"
+			>
+				{{ entities.get(id)?.name ?? id }}
+				<button
+					@click="selectedIds.delete(id)"
+				>x</button>
+			</div>
+		</div>
+		<SelectDropdown
+			ref="dropdown"
+			v-model="selectedIds"
+			:multi="true"
+			:entities
+		/>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import type { ApiEntity } from '~/shared/types/api';
+import type { Id } from '~/shared/types/common';
+import type { ClientEntity } from '~/utils/client-entity';
+
+const selectedIds = defineModel<Set<Id>>({ required: true });
+defineProps<{
+	entities: ClientMap<ClientEntity<ApiEntity> & { name?: string }>,
+}>();
+
+const dropdownComponent = useTemplateRef("dropdown");
+</script>
+
+<style scoped>
+.select {
+	display: flex;
+	flex-wrap: wrap;
+	position: relative;
+}
+.selected {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.2rem;
+}
+.item {
+	background-color: color-mix(in srgb, Canvas, CanvasText 10%);
+	border-radius: 0.3rem;
+	padding-inline: 0.2rem;
+	padding-block: 0.1rem;
+	margin-inline-end: 0.2rem;
+	white-space: pre-wrap;
+}
+.item button {
+	line-height: 0.7;
+}
+</style>
diff --git a/components/SelectSingleEntity.vue b/components/SelectSingleEntity.vue
new file mode 100644
index 0000000..3d4ed29
--- /dev/null
+++ b/components/SelectSingleEntity.vue
@@ -0,0 +1,55 @@
+<template>
+	<div
+		class="select"
+		@focusin="dropdownComponent?.focusin()"
+		@focusout="dropdownComponent?.focusout()"
+		@keyup.esc="dropdownComponent?.esc()"
+	>
+		<div
+			v-if="selectedId !== undefined"
+			:title="entities.get(selectedId)?.name ?? String(selectedId)"
+			class="item"
+		>
+			{{ entities.get(selectedId)?.name ?? selectedId }}
+		</div>
+		<SelectDropdown
+			ref="dropdown"
+			:modelValue="new Set(selectedId !== undefined ? [selectedId] : [])"
+			@update:modelValue="selectedId = $event.size ? [...$event][0] : undefined"
+			:multi="false"
+			:entities
+		/>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import type { ApiEntity } from '~/shared/types/api';
+import type { Id } from '~/shared/types/common';
+import type { ClientEntity } from '~/utils/client-entity';
+
+const selectedId = defineModel<Id | undefined>();
+defineProps<{
+	entities: ClientMap<ClientEntity<ApiEntity> & { name?: string }>,
+}>();
+
+const dropdownComponent = useTemplateRef("dropdown");
+</script>
+
+<style scoped>
+.select {
+	display: flex;
+	flex-wrap: wrap;
+	position: relative;
+}
+.item {
+	background-color: color-mix(in srgb, Canvas, CanvasText 10%);
+	border-radius: 0.3rem;
+	padding-inline: 0.2rem;
+	padding-block: 0.1rem;
+	margin-inline-end: 0.2rem;
+	white-space: pre-wrap;
+}
+.item button {
+	line-height: 0.7;
+}
+</style>