From 293f8c3d8108f05fb10924512fca8c0c716d0898 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Thu, 18 Jan 2024 16:01:38 +0100
Subject: [PATCH] replace multiselect with custom component

---
 client/package.json                           |   1 +
 .../History/Content/ContentItem.vue           |   1 +
 .../TagsMultiselect/HeadlessMultiselect.vue   | 371 ++++++++++++++++++
 .../TagsMultiselect/StatelessTags.vue         | 113 ++----
 client/src/stores/userTagsStore.ts            |   2 +-
 client/yarn.lock                              |   5 +
 package.json                                  |   1 -
 7 files changed, 411 insertions(+), 83 deletions(-)
 create mode 100644 client/src/components/TagsMultiselect/HeadlessMultiselect.vue

diff --git a/client/package.json b/client/package.json
index d3d06ff51b73..a3a45a7fc868 100644
--- a/client/package.json
+++ b/client/package.json
@@ -105,6 +105,7 @@
     "vue-router": "^3.6.5",
     "vue-rx": "^6.2.0",
     "vue-virtual-scroll-list": "^2.3.5",
+    "vue2-teleport": "^1.0.1",
     "vuedraggable": "^2.24.3",
     "vuex": "^3.6.2",
     "vuex-cache": "^3.4.0",
diff --git a/client/src/components/History/Content/ContentItem.vue b/client/src/components/History/Content/ContentItem.vue
index aeae2c6bff83..ddc2b2491a71 100644
--- a/client/src/components/History/Content/ContentItem.vue
+++ b/client/src/components/History/Content/ContentItem.vue
@@ -304,6 +304,7 @@ export default {
 
 .content-item {
     cursor: default;
+    container-type: inline-size;
 
     .name {
         word-break: break-all;
diff --git a/client/src/components/TagsMultiselect/HeadlessMultiselect.vue b/client/src/components/TagsMultiselect/HeadlessMultiselect.vue
new file mode 100644
index 000000000000..da8652f42fbe
--- /dev/null
+++ b/client/src/components/TagsMultiselect/HeadlessMultiselect.vue
@@ -0,0 +1,371 @@
+<script setup lang="ts">
+/**
+ * This component does not control it's own open/closed state!
+ * It expects it's parent component to do so.
+ * It is a building block for building a custom Multiselect,
+ * not a fully featured Multiselect alternative
+ */
+
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faChevronUp } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { useElementBounding } from "@vueuse/core";
+import { computed, nextTick, onMounted, ref, watch } from "vue";
+// @ts-ignore missing types
+import Vue2Teleport from "vue2-teleport";
+
+import { useUid } from "@/composables/utils/uid";
+
+library.add(faChevronUp);
+
+const props = withDefaults(
+    defineProps<{
+        options: Array<string>;
+        selected: Array<string>;
+        maxShownOptions?: number;
+        placeholder?: string;
+        id?: string;
+        validator?: (option: string) => boolean;
+    }>(),
+    {
+        maxShownOptions: 50,
+        placeholder: "type to search",
+        id: () => useUid("headless-multiselect-").value,
+        validator: () => () => true,
+    }
+);
+
+const emit = defineEmits<{
+    (e: "close"): void;
+    (e: "input", selected: string[]): void;
+    (e: "addOption", newOption: string): void;
+}>();
+
+const inputField = ref<HTMLInputElement | null>(null);
+
+onMounted(async () => {
+    await nextTick();
+    inputField.value?.focus();
+});
+
+const searchValue = ref("");
+const trimmedSearchValue = computed(() => searchValue.value.trim());
+const optionsAsSet = computed(() => new Set(props.options));
+const searchValueEmpty = computed(() => trimmedSearchValue.value === "");
+const searchValueInOptions = computed(() => optionsAsSet.value.has(trimmedSearchValue.value));
+const searchValueValid = computed(() => searchValueEmpty.value || props.validator(trimmedSearchValue.value));
+
+const filteredOptions = computed(() => {
+    if (searchValueEmpty.value) {
+        return props.options;
+    } else {
+        return props.options.filter((option) => option.includes(trimmedSearchValue.value));
+    }
+});
+
+const trimmedOptions = computed(() => {
+    if (searchValueEmpty.value || searchValueInOptions.value) {
+        return filteredOptions.value.slice(0, props.maxShownOptions);
+    } else {
+        const trimmed = filteredOptions.value.slice(0, props.maxShownOptions - 1);
+        trimmed.unshift(trimmedSearchValue.value);
+        return trimmed;
+    }
+});
+
+const highlightedOption = ref(0);
+
+watch(
+    () => trimmedSearchValue.value,
+    () => {
+        highlightedOption.value = 0;
+    }
+);
+
+function onOptionHover(index: number) {
+    highlightedOption.value = index;
+}
+
+function onInputUp() {
+    if (highlightedOption.value > 0) {
+        highlightedOption.value -= 1;
+    }
+
+    getOptionWithId(highlightedOption.value)?.scrollIntoView({ block: "center" });
+}
+
+function onInputDown() {
+    if (highlightedOption.value < trimmedOptions.value.length) {
+        highlightedOption.value += 1;
+    }
+
+    getOptionWithId(highlightedOption.value)?.scrollIntoView({ block: "center" });
+}
+
+function getOptionWithId(id: number) {
+    return document.querySelector(`#${props.id}-option-${id}`) as HTMLButtonElement | null;
+}
+
+function onOptionSelected(option: string) {
+    if (!optionsAsSet.value.has(option)) {
+        emit("addOption", option);
+        return;
+    }
+
+    const set = new Set(props.selected);
+
+    if (set.has(option)) {
+        set.delete(option);
+    } else {
+        set.add(option);
+    }
+
+    emit("input", Array.from(set));
+}
+
+function onInputEnter() {
+    const option = trimmedOptions.value[highlightedOption.value];
+
+    if (option) {
+        onOptionSelected(option);
+        searchValue.value = "";
+    }
+}
+
+// allow for keyboard navigation
+function onOptionKey(event: KeyboardEvent, index: number) {
+    if (event.key === "ArrowUp") {
+        if (index < 1) {
+            inputField.value?.focus();
+        } else {
+            getOptionWithId(index - 1)?.focus();
+        }
+    } else if (event.key === "ArrowDown") {
+        getOptionWithId(index + 1)?.focus();
+    }
+}
+
+function onBlur(e: FocusEvent) {
+    const newTarget = e.relatedTarget;
+
+    if (!(newTarget instanceof HTMLElement)) {
+        emit("close");
+    } else if (newTarget.getAttribute("data-parent-id") !== props.id) {
+        emit("close");
+    }
+}
+
+// emulate tab behavior, because options list is teleported to the app layer
+function onCloseButtonTab(event: KeyboardEvent) {
+    if (!event.shiftKey) {
+        getOptionWithId(0)?.focus();
+        event.preventDefault();
+    }
+}
+
+const closeButton = ref<HTMLButtonElement | null>(null);
+
+function getNextFocusableElement() {
+    if (!closeButton.value) {
+        return;
+    }
+
+    const focusableElementSelector =
+        "a:not([disabled]), button:not([disabled]), input[type=text]:not([disabled]), [tabindex]:not([disabled]):not([tabindex='-1'])";
+    const focusableElements = document.querySelectorAll(focusableElementSelector);
+    const closeButtonIndex = Array.from(focusableElements).indexOf(closeButton.value);
+    return focusableElements.item(closeButtonIndex + 1) as HTMLElement | null;
+}
+
+// since our popup is teleported to the app layer, we need to emulate
+// tab behavior at the start and end of the list.
+function onOptionTab(event: KeyboardEvent, index: number) {
+    if (index === 0 && event.shiftKey) {
+        closeButton.value?.focus();
+        event.preventDefault();
+    } else if (index === trimmedOptions.value.length - 1) {
+        getNextFocusableElement()?.focus();
+        event.preventDefault();
+    }
+}
+
+const root = ref<HTMLDivElement | null>(null);
+const bounds = useElementBounding(root);
+</script>
+
+<template>
+    <div ref="root" class="headless-multiselect" @blur.capture="onBlur">
+        <fieldset>
+            <input
+                :id="`${props.id}-input`"
+                ref="inputField"
+                v-model="searchValue"
+                aria-autocomplete="list"
+                :aria-label="props.placeholder"
+                role="searchbox"
+                aria-haspopup="listbox"
+                :aria-invalid="props.validator(trimmedSearchValue)"
+                :aria-owns="`${props.id}-options`"
+                :aria-activedescendant="`${props.id}-options`"
+                :data-parent-id="props.id"
+                :placeholder="props.placeholder"
+                @keydown.up="onInputUp"
+                @keydown.down="onInputDown"
+                @keydown.enter="onInputEnter" />
+            <button
+                ref="closeButton"
+                :data-parent-id="props.id"
+                title="close"
+                @click="emit('close')"
+                @keydown.tab="onCloseButtonTab">
+                <FontAwesomeIcon icon="fa-chevron-up" />
+            </button>
+        </fieldset>
+
+        <Vue2Teleport to="#app">
+            <div
+                :id="`${props.id}-options`"
+                aria-expanded="true"
+                role="listbox"
+                class="headless-multiselect__options"
+                :style="{
+                    '--top': `${bounds.top.value}px`,
+                    '--left': `${bounds.left.value}px`,
+                    '--width': `${bounds.width.value}px`,
+                    '--height': `${bounds.height.value}px`,
+                }"
+                :data-parent-id="id"
+                @keydown.up.down.prevent
+                @blur.capture="onBlur">
+                <button
+                    v-for="(option, i) in trimmedOptions"
+                    :id="`${props.id}-option-${i}`"
+                    :key="option"
+                    :data-parent-id="props.id"
+                    class="headless-multiselect__option"
+                    role="option"
+                    :aria-selected="props.selected.includes(option)"
+                    :class="{
+                        invalid: i === 0 && !searchValueValid,
+                        highlighted: highlightedOption === i,
+                    }"
+                    @click="() => onOptionSelected(option)"
+                    @keydown="(e) => onOptionKey(e, i)"
+                    @mouseover="() => onOptionHover(i)"
+                    @focusin="() => onOptionHover(i)"
+                    @keydown.tab="(e) => onOptionTab(e, i)">
+                    <span>
+                        {{ option }}
+                    </span>
+
+                    <span v-if="props.selected.includes(option)" class="headless-multiselect__info">
+                        <template v-if="trimmedSearchValue === option || highlightedOption === i">
+                            <FontAwesomeIcon
+                                class="headless-multiselect__needs-highlight"
+                                icon="fa-times"
+                                fixed-width />
+                            <span class="sr-only">remove tag</span>
+                        </template>
+                        <template v-else>
+                            <FontAwesomeIcon icon="fa-check" fixed-width />
+                        </template>
+                    </span>
+                    <span v-else class="headless-multiselect__info">
+                        <FontAwesomeIcon class="headless-multiselect__needs-highlight" icon="fa-plus" fixed-width />
+                        <span class="sr-only">add tag</span>
+                    </span>
+                </button>
+            </div>
+        </Vue2Teleport>
+    </div>
+</template>
+
+<style scoped lang="scss">
+@import "scss/theme/blue.scss";
+
+.headless-multiselect {
+    fieldset {
+        display: flex;
+        flex-direction: row;
+        height: 1.75rem;
+        align-items: center;
+    }
+
+    input {
+        text-decoration: none;
+        background: none;
+        border: none;
+        padding-left: 0.25rem;
+        flex-grow: 1;
+        margin: 0;
+        border: none;
+    }
+
+    button {
+        background: none;
+        border: none;
+        padding: 0;
+        width: 2rem;
+    }
+}
+
+.headless-multiselect__options {
+    position: fixed;
+    z-index: 10000;
+    overflow-y: scroll;
+
+    top: calc(var(--top) + var(--height));
+    left: var(--left);
+
+    width: var(--width);
+    height: min(400px, calc(100% - var(--top) - var(--height) - 12px));
+
+    display: flex;
+    flex-direction: column;
+
+    .headless-multiselect__option {
+        padding: 0.5rem;
+        display: inline-block;
+        text-align: start;
+        background-color: $white;
+        color: $brand-primary;
+        border: none;
+        border-radius: 0;
+        font-weight: bold;
+        transition: none;
+
+        &:focus,
+        &:focus-visible {
+            border: none;
+            outline: none;
+            box-shadow: none;
+        }
+
+        &.invalid {
+            color: $brand-light;
+            background-color: $brand-warning;
+        }
+
+        .headless-multiselect__info {
+            float: right;
+        }
+
+        .headless-multiselect__needs-highlight {
+            visibility: hidden;
+        }
+
+        &.highlighted {
+            background-color: $brand-primary;
+            color: $white;
+
+            .headless-multiselect__needs-highlight {
+                visibility: unset;
+            }
+        }
+
+        &[aria-selected].highlighted {
+            background-color: $brand-danger;
+        }
+    }
+}
+</style>
diff --git a/client/src/components/TagsMultiselect/StatelessTags.vue b/client/src/components/TagsMultiselect/StatelessTags.vue
index 0e1419e9258a..61bb6f5ebe18 100644
--- a/client/src/components/TagsMultiselect/StatelessTags.vue
+++ b/client/src/components/TagsMultiselect/StatelessTags.vue
@@ -3,15 +3,16 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 import { faCheck, faPlus, faTags, faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton } from "bootstrap-vue";
+import { storeToRefs } from "pinia";
 import type { Ref } from "vue";
 import { computed, nextTick, ref } from "vue";
 import Multiselect from "vue-multiselect";
 
 import { useToast } from "@/composables/toast";
-import { useMultiselect } from "@/composables/useMultiselect";
 import { useUid } from "@/composables/utils/uid";
 import { useUserTagsStore } from "@/stores/userTagsStore";
 
+import HeadlessMultiselect from "./HeadlessMultiselect.vue";
 import Tag from "./Tag.vue";
 
 interface StatelessTagsProps {
@@ -39,14 +40,15 @@ const emit = defineEmits<{
 
 library.add(faTags, faCheck, faTimes, faPlus);
 
-const { userTags, addLocalTag } = useUserTagsStore();
+const userTagsStore = useUserTagsStore();
+const { userTags } = storeToRefs(userTagsStore);
 const { warning } = useToast();
 
 function onAddTag(tag: string) {
     const newTag = tag.trim();
 
     if (isValid(newTag)) {
-        addLocalTag(newTag);
+        userTagsStore.addLocalTag(newTag);
         emit("input", [...props.value, newTag]);
     } else {
         warning(`"${newTag}" is not a valid tag.`, "Invalid Tag");
@@ -64,7 +66,7 @@ function onDelete(tag: string) {
     emit("input", val);
 }
 
-const { editing, ariaExpanded, onOpen, onClose } = useMultiselect();
+const editing = ref(false);
 
 const multiselectElement: Ref<Multiselect | null> = ref(null);
 
@@ -97,12 +99,8 @@ const slicedTags = computed(() => {
 
 const invalidTagRegex = /([.:\s][.:\s])|(^[.:])|([.:]$)|(^[\s]*$)/;
 
-function isValid(tag: string | { label: string }) {
-    if (typeof tag === "string") {
-        return !tag.match(invalidTagRegex);
-    } else {
-        return !tag.label.match(invalidTagRegex);
-    }
+function isValid(tag: string) {
+    return !tag.match(invalidTagRegex);
 }
 
 function onTagClicked(tag: string) {
@@ -112,78 +110,31 @@ function onTagClicked(tag: string) {
 
 <template>
     <div class="stateless-tags">
-        <div v-if="!disabled">
-            <div v-if="!editing" class="tags-edit">
-                <div class="interactive-tags">
-                    <Tag
-                        v-for="tag in tags"
-                        :key="tag"
-                        :option="tag"
-                        :editable="true"
-                        :clickable="props.clickable"
-                        @deleted="onDelete"
-                        @click="onTagClicked"></Tag>
-                </div>
-                <button class="toggle-button" tabindex="-1" @click="openMultiselect">
-                    {{ props.placeholder }}
-                    <FontAwesomeIcon icon="fa-tags" />
-                </button>
+        <div v-if="!disabled" class="tags-edit">
+            <div class="interactive-tags">
+                <Tag
+                    v-for="tag in tags"
+                    :key="tag"
+                    :option="tag"
+                    :editable="true"
+                    :clickable="props.clickable"
+                    @deleted="onDelete"
+                    @click="onTagClicked"></Tag>
             </div>
-            <Multiselect
-                v-else
-                ref="multiselectElement"
-                open-direction="bottom"
-                :placeholder="props.placeholder"
-                :value="tags"
+
+            <HeadlessMultiselect
+                v-if="editing"
                 :options="userTags"
-                :multiple="true"
-                :taggable="true"
-                :close-on-select="false"
-                :aria-expanded="ariaExpanded"
-                @tag="onAddTag"
-                @input="onInput"
-                @open="onOpen"
-                @close="onClose">
-                <template v-slot:tag="{ option, search }">
-                    <Tag
-                        :option="option"
-                        :search="search"
-                        :editable="true"
-                        :clickable="props.clickable"
-                        @deleted="onDelete"
-                        @click="onTagClicked"></Tag>
-                </template>
-
-                <template v-slot:noOptions>
-                    <span class="multiselect-option">Type to add new tag</span>
-                </template>
-
-                <template v-slot:caret>
-                    <!-- render nothing -->
-                </template>
-
-                <template v-slot:option="{ option }">
-                    <span class="multiselect-option" :class="{ invalid: !isValid(option) }">
-                        <span>{{ option.label ?? option }}</span>
-                        <span v-if="tags.includes(option)" class="float-right">
-                            <span class="info">
-                                <FontAwesomeIcon class="check-icon" icon="fa-check" fixed-width />
-                            </span>
-
-                            <span class="info highlighted">
-                                <FontAwesomeIcon class="times-icon" icon="fa-times" fixed-width />
-                                <span class="sr-only">remove tag</span>
-                            </span>
-                        </span>
-                        <span v-else class="float-right">
-                            <span class="info highlighted">
-                                <FontAwesomeIcon class="plus-icon" icon="fa-plus" fixed-width />
-                                <span class="sr-only">add tag</span>
-                            </span>
-                        </span>
-                    </span>
-                </template>
-            </Multiselect>
+                :selected="tags"
+                :placeholder="props.placeholder"
+                :validator="isValid"
+                @close="editing = false"
+                @addOption="onAddTag"
+                @input="onInput" />
+            <button v-else class="toggle-button" @click="openMultiselect">
+                {{ props.placeholder }}
+                <FontAwesomeIcon icon="fa-tags" />
+            </button>
         </div>
 
         <div v-else>
@@ -242,7 +193,6 @@ function onTagClicked(tag: string) {
         }
     }
 
-    &:deep(.multiselect) .multiselect__input,
     .toggle-button {
         font-size: $font-size-base;
         color: $text-color;
@@ -254,6 +204,7 @@ function onTagClicked(tag: string) {
         margin: 0;
         border: none;
         width: 100%;
+        height: 1.75rem;
     }
 
     &:deep(.multiselect) {
diff --git a/client/src/stores/userTagsStore.ts b/client/src/stores/userTagsStore.ts
index 47f717ddea0c..f2bb4047df58 100644
--- a/client/src/stores/userTagsStore.ts
+++ b/client/src/stores/userTagsStore.ts
@@ -23,5 +23,5 @@ export const useUserTagsStore = defineStore("userTagsStore", () => {
         localTags.value.push(tag);
     };
 
-    return { userTags, addLocalTag };
+    return { localTags, userTags, addLocalTag };
 });
diff --git a/client/yarn.lock b/client/yarn.lock
index 3081e69cb3cd..022d497b96ce 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -11675,6 +11675,11 @@ vue-virtual-scroll-list@^2.3.5:
   resolved "https://registry.yarnpkg.com/vue-virtual-scroll-list/-/vue-virtual-scroll-list-2.3.5.tgz#b589ac6245faf857c35090f854e59d653e90626c"
   integrity sha512-YFK6u5yltqtAOfTBcij/KGAS2SoZvzbNIAf9qTULauPObEp53xj22tDuohrrM2vNkgoD5kejXICIUBt2Q4ZDqQ==
 
+vue2-teleport@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/vue2-teleport/-/vue2-teleport-1.0.1.tgz#1b7f9f69c1223f522cf6cd81c39b8d6019e1cf66"
+  integrity sha512-hbY/Q0x8qXGFxo6h4KU4YYesUcN+uUjliqqC0PoNSgpcbS2QRb3qXi+7XMTgLYs0a8i7o1H6Mu43UV4Vbgkhgw==
+
 vue@2.7.14, vue@^2.6.10, vue@^2.7.14:
   version "2.7.14"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.7.14.tgz#3743dcd248fd3a34d421ae456b864a0246bafb17"
diff --git a/package.json b/package.json
index 8f48deaef7e5..a32e81c9d212 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,6 @@
   "version": "23.1.0",
   "description": ".. figure:: https://galaxyproject.org/images/galaxy-logos/galaxy_project_logo.jpg    :alt: Galaxy Logo",
   "main": "index.js",
-  "devDependencies": {},
   "scripts": {
     "stage": "cpy './node_modules/@galaxyproject/galaxy-client/dist/*' './static/dist'"
   },