diff --git a/client/package.json b/client/package.json
index 618b1219969f..07df904d9eea 100644
--- a/client/package.json
+++ b/client/package.json
@@ -104,6 +104,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",
     "winbox": "^0.2.82",
     "xml-beautifier": "^0.5.0"
diff --git a/client/src/components/History/Content/ContentItem.vue b/client/src/components/History/Content/ContentItem.vue
index a4bf4c8c398b..4dbc979dae51 100644
--- a/client/src/components/History/Content/ContentItem.vue
+++ b/client/src/components/History/Content/ContentItem.vue
@@ -84,6 +84,7 @@
             :elements-datatypes="item.elements_datatypes" />
         <StatelessTags
             v-if="!tagsDisabled || hasTags"
+            class="px-2 pb-2"
             :value="tags"
             :disabled="tagsDisabled"
             :clickable="filterable"
@@ -91,7 +92,7 @@
             @input="onTags"
             @tag-click="onTagClick" />
         <!-- collections are not expandable, so we only need the DatasetDetails component here -->
-        <b-collapse :visible="expandDataset">
+        <b-collapse :visible="expandDataset" class="px-2 pb-2">
             <DatasetDetails
                 v-if="expandDataset && item.id"
                 :id="item.id"
diff --git a/client/src/components/History/Content/Dataset/DatasetDetails.vue b/client/src/components/History/Content/Dataset/DatasetDetails.vue
index f5966c0ecbab..f033be2cd066 100644
--- a/client/src/components/History/Content/Dataset/DatasetDetails.vue
+++ b/client/src/components/History/Content/Dataset/DatasetDetails.vue
@@ -42,7 +42,7 @@ function toggleHighlights() {
 <template>
     <div>
         <div v-if="result && !isLoading" class="dataset">
-            <div class="p-2 details not-loading">
+            <div class="details not-loading">
                 <div class="summary">
                     <div v-if="stateText" class="mb-1">{{ stateText }}</div>
                     <div v-else-if="result.misc_blurb" class="blurb">
diff --git a/client/src/components/TagsMultiselect/HeadlessMultiselect.test.ts b/client/src/components/TagsMultiselect/HeadlessMultiselect.test.ts
new file mode 100644
index 000000000000..ca97b4615bae
--- /dev/null
+++ b/client/src/components/TagsMultiselect/HeadlessMultiselect.test.ts
@@ -0,0 +1,268 @@
+import { mount } from "@vue/test-utils";
+import { getLocalVue } from "tests/jest/helpers";
+import { nextTick } from "vue";
+
+import HeadlessMultiselect from "./HeadlessMultiselect.vue";
+
+describe("HeadlessMultiselect", () => {
+    // this function is not implemented in jsdom
+    // mocking it to avoid false errors
+    Element.prototype.scrollIntoView = jest.fn();
+
+    const localVue = getLocalVue();
+
+    type Props = InstanceType<typeof HeadlessMultiselect>["$props"];
+    const mountWithProps = (props: Props) => {
+        return mount(HeadlessMultiselect as any, {
+            propsData: props,
+            localVue,
+            attachTo: document.body,
+        });
+    };
+
+    const sampleOptions = ["#named", "#named_2", "#named_3", "abc", "def", "ghi"];
+
+    const selectors = {
+        openButton: ".toggle-button",
+        option: ".headless-multiselect__option",
+        highlighted: ".headless-multiselect__option.highlighted",
+        input: "fieldset input",
+        invalid: ".headless-multiselect__option.invalid",
+    } as const;
+
+    async function keyPress(wrapper: ReturnType<typeof mountWithProps>, key: string) {
+        wrapper.trigger("keydown", {
+            key,
+            code: key,
+        });
+        await nextTick();
+        wrapper.trigger("keyup", {
+            key,
+            code: key,
+        });
+        await nextTick();
+    }
+
+    async function open(wrapper: ReturnType<typeof mountWithProps>) {
+        wrapper.find(selectors.openButton).trigger("click");
+        await nextTick();
+        return wrapper.find(selectors.input);
+    }
+
+    async function close(wrapper: ReturnType<typeof mountWithProps>) {
+        await keyPress(wrapper.find(selectors.input), "Escape");
+    }
+
+    describe("while toggling the popup", () => {
+        it("shows and hides options", async () => {
+            const wrapper = mountWithProps({
+                options: sampleOptions,
+                selected: [] as string[],
+            });
+
+            let options;
+
+            await open(wrapper);
+            options = wrapper.findAll(selectors.option);
+            expect(options.length).toBe(sampleOptions.length);
+
+            await close(wrapper);
+            options = wrapper.findAll(selectors.option);
+            expect(options.length).toBe(0);
+        });
+
+        it("retains focus", async () => {
+            const wrapper = mountWithProps({
+                options: sampleOptions,
+                selected: [] as string[],
+            });
+
+            const input = await open(wrapper);
+            expect(input.element).toBe(document.activeElement);
+
+            await close(wrapper);
+            const button = wrapper.find(selectors.openButton);
+            expect(button.element).toBe(document.activeElement);
+        });
+    });
+
+    describe("while inputting text", () => {
+        it("filters options", async () => {
+            const wrapper = mountWithProps({
+                options: sampleOptions,
+                selected: [] as string[],
+            });
+
+            let options;
+
+            const input = await open(wrapper);
+
+            await input.setValue("a");
+            options = wrapper.findAll(selectors.option);
+            expect(options.length).toBe(5);
+
+            await input.setValue("na");
+            options = wrapper.findAll(selectors.option);
+            expect(options.length).toBe(4);
+
+            await input.setValue("");
+            options = wrapper.findAll(selectors.option);
+            expect(options.length).toBe(6);
+        });
+
+        it("shows the search value on top", async () => {
+            const wrapper = mountWithProps({
+                options: sampleOptions,
+                selected: [] as string[],
+            });
+
+            const input = await open(wrapper);
+
+            await input.setValue("bc");
+            const options = wrapper.findAll(selectors.option);
+
+            expect(options.at(0).find("span").text()).toBe("bc");
+            expect(options.at(1).find("span").text()).toBe("abc");
+        });
+
+        it("allows for switching the highlighted value", async () => {
+            const wrapper = mountWithProps({
+                options: sampleOptions,
+                selected: [] as string[],
+            });
+
+            let highlighted;
+
+            const input = await open(wrapper);
+
+            highlighted = wrapper.find(selectors.highlighted);
+            expect(highlighted.find("span").text()).toBe("#named");
+
+            await keyPress(input, "ArrowDown");
+            highlighted = wrapper.find(selectors.highlighted);
+            expect(highlighted.find("span").text()).toBe("#named_2");
+
+            await keyPress(input, "ArrowDown");
+            highlighted = wrapper.find(selectors.highlighted);
+            expect(highlighted.find("span").text()).toBe("#named_3");
+
+            await keyPress(input, "ArrowUp");
+            highlighted = wrapper.find(selectors.highlighted);
+            expect(highlighted.find("span").text()).toBe("#named_2");
+        });
+
+        it("resets the highlighted option on input", async () => {
+            const wrapper = mountWithProps({
+                options: sampleOptions,
+                selected: [] as string[],
+            });
+
+            let highlighted;
+
+            const input = await open(wrapper);
+
+            await keyPress(input, "ArrowDown");
+            highlighted = wrapper.find(selectors.highlighted);
+            expect(highlighted.find("span").text()).toBe("#named_2");
+
+            await input.setValue("a");
+
+            highlighted = wrapper.find(selectors.highlighted);
+            expect(highlighted.find("span").text()).toBe("a");
+        });
+
+        it("shows if the input value is valid", async () => {
+            const wrapper = mountWithProps({
+                options: sampleOptions,
+                selected: [] as string[],
+                validator: (value: string) => value !== "invalid",
+            });
+
+            const input = await open(wrapper);
+            await input.setValue("valid");
+            expect(() => wrapper.get(selectors.invalid)).toThrow();
+
+            await input.setValue("invalid");
+            expect(() => wrapper.get(selectors.invalid)).not.toThrow();
+        });
+    });
+
+    describe("when selecting options", () => {
+        it("selects options via keyboard", async () => {
+            const wrapper = mountWithProps({
+                options: sampleOptions,
+                selected: [] as string[],
+            });
+
+            const input = await open(wrapper);
+
+            await keyPress(input, "Enter");
+            expect(wrapper.emitted()["input"]?.[0]?.[0]).toEqual(["#named"]);
+
+            await keyPress(input, "ArrowDown");
+            await keyPress(input, "Enter");
+            expect(wrapper.emitted()["input"]?.[1]?.[0]).toEqual(["#named_2"]);
+        });
+
+        it("deselects options via keyboard", async () => {
+            const wrapper = mountWithProps({
+                options: sampleOptions,
+                selected: ["#named", "#named_2", "#named_3"],
+            });
+
+            const input = await open(wrapper);
+
+            await keyPress(input, "Enter");
+            expect(wrapper.emitted()["input"]?.[0]?.[0]).toEqual(["#named_2", "#named_3"]);
+
+            await keyPress(input, "ArrowDown");
+            await keyPress(input, "Enter");
+            expect(wrapper.emitted()["input"]?.[1]?.[0]).toEqual(["#named", "#named_3"]);
+        });
+
+        it("allows for adding new options", async () => {
+            const wrapper = mountWithProps({
+                options: sampleOptions,
+                selected: [] as string[],
+            });
+
+            const input = await open(wrapper);
+            await input.setValue("123");
+            await keyPress(input, "Enter");
+
+            expect(wrapper.emitted()["addOption"]?.[0]?.[0]).toBe("123");
+        });
+
+        it("selects options with mouse", async () => {
+            const wrapper = mountWithProps({
+                options: sampleOptions,
+                selected: [] as string[],
+            });
+
+            await open(wrapper);
+            const options = wrapper.findAll(selectors.option);
+
+            await options.at(0).trigger("click");
+            expect(wrapper.emitted()["input"]?.[0]?.[0]).toEqual(["#named"]);
+
+            await options.at(1).trigger("click");
+            expect(wrapper.emitted()["input"]?.[1]?.[0]).toEqual(["#named_2"]);
+        });
+
+        it("deselects options with mouse", async () => {
+            const wrapper = mountWithProps({
+                options: sampleOptions,
+                selected: ["#named", "#named_2", "#named_3"],
+            });
+
+            await open(wrapper);
+            const options = wrapper.findAll(selectors.option);
+
+            await options.at(0).trigger("click");
+            expect(wrapper.emitted()["input"]?.[0]?.[0]).toEqual(["#named_2", "#named_3"]);
+
+            await options.at(1).trigger("click");
+            expect(wrapper.emitted()["input"]?.[1]?.[0]).toEqual(["#named", "#named_3"]);
+        });
+    });
+});
diff --git a/client/src/components/TagsMultiselect/HeadlessMultiselect.vue b/client/src/components/TagsMultiselect/HeadlessMultiselect.vue
new file mode 100644
index 000000000000..8a3fc5dd5fb3
--- /dev/null
+++ b/client/src/components/TagsMultiselect/HeadlessMultiselect.vue
@@ -0,0 +1,457 @@
+<script setup lang="ts">
+/**
+ * This component is only the select element of a multiselect.
+ * It does not display selected options.
+ * It is a building block for building a custom Multiselect,
+ * not a fully featured Multiselect alternative
+ */
+
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faCheck, faChevronUp, faPlus, faTags, faTimes } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { useElementBounding } from "@vueuse/core";
+import { computed, nextTick, ref, watch } from "vue";
+// @ts-ignore missing types
+import Vue2Teleport from "vue2-teleport";
+
+import { useUid } from "@/composables/utils/uid";
+
+library.add(faCheck, faChevronUp, faPlus, faTags, faTimes);
+
+const props = withDefaults(
+    defineProps<{
+        options: Array<string>;
+        selected: Array<string>;
+        maxShownOptions?: number;
+        placeholder?: string;
+        id?: string;
+        /** adjusts the visual appearance of the search value */
+        validator?: (option: string) => boolean;
+    }>(),
+    {
+        maxShownOptions: 50,
+        placeholder: "type to search",
+        id: () => useUid("headless-multiselect-").value,
+        validator: () => () => true,
+    }
+);
+
+const emit = defineEmits<{
+    /** emitted when the selected options are changed */
+    (e: "input", selected: string[]): void;
+    /** emitted when a new option is selected, which wasn't part of the options prop */
+    (e: "addOption", newOption: string): void;
+}>();
+
+const inputField = ref<HTMLInputElement | null>(null);
+const openButton = ref<HTMLButtonElement | null>(null);
+
+/** controls the open state of the select popup */
+const isOpen = ref(false);
+
+/** open popup and focus search field */
+async function open() {
+    isOpen.value = true;
+    await nextTick();
+    inputField.value?.focus();
+}
+
+/** close popup and focus open button */
+async function close(refocus = true) {
+    isOpen.value = false;
+
+    if (refocus) {
+        await nextTick();
+        openButton.value?.focus();
+    }
+
+    searchValue.value = "";
+}
+
+/** the text in the input field */
+const searchValue = ref("");
+const trimmedSearchValue = computed(() => searchValue.value.trim());
+const optionsAsSet = computed(() => new Set(props.options));
+const searchValueEmpty = computed(() => trimmedSearchValue.value === "");
+const searchValueValid = computed(() => searchValueEmpty.value || props.validator(trimmedSearchValue.value));
+
+/** options which partially match the search value */
+const filteredOptions = computed(() => {
+    if (searchValueEmpty.value) {
+        return props.options;
+    } else {
+        return props.options.filter((option) => option.includes(trimmedSearchValue.value));
+    }
+});
+
+/** options trimmed to `maxShownOptions` and reordered so the search value appears first */
+const trimmedOptions = computed(() => {
+    const optionsSliced = filteredOptions.value.slice(0, props.maxShownOptions);
+
+    // remove search value to put it in front
+    const optionsSet = new Set(optionsSliced);
+    optionsSet.delete(trimmedSearchValue.value);
+    const optionsTrimmed = Array.from(optionsSet);
+
+    if (!searchValueEmpty.value) {
+        optionsTrimmed.unshift(trimmedSearchValue.value);
+    }
+
+    return optionsTrimmed;
+});
+
+/** the option which will be added when the `Enter` key is pressed */
+const highlightedOption = ref(0);
+
+watch(
+    () => trimmedSearchValue.value,
+    () => {
+        highlightedOption.value = 0;
+    }
+);
+
+function onOptionHover(index: number) {
+    highlightedOption.value = index;
+}
+
+/** allows for selecting from the autocomplete list while focusing the input field */
+function onInputUp() {
+    if (highlightedOption.value > 0) {
+        highlightedOption.value -= 1;
+    }
+
+    getOptionWithId(highlightedOption.value)?.scrollIntoView({ block: "center" });
+}
+
+/** allows for selecting from the autocomplete list while focusing the input field */
+function onInputDown() {
+    if (highlightedOption.value < trimmedOptions.value.length - 1) {
+        highlightedOption.value += 1;
+    }
+
+    getOptionWithId(highlightedOption.value)?.scrollIntoView({ block: "center" });
+}
+
+/** finds the html element for the option with given id */
+function getOptionWithId(id: number) {
+    return document.querySelector(`#${props.id}-option-${id}`) as HTMLButtonElement | null;
+}
+
+/**
+ * Emits an input event with the new selected options,
+ * or emits an addOption event, if the selected option
+ * was not part of the provided options
+ */
+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));
+}
+
+/** handles the Enter key on the input element */
+function onInputEnter() {
+    const option = trimmedOptions.value[highlightedOption.value];
+
+    if (option) {
+        onOptionSelected(option);
+        searchValue.value = "";
+    }
+}
+
+/** handles keyboard navigation when the popup is focused */
+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();
+    } else if (event.key === "Escape") {
+        close();
+    }
+}
+
+/**
+ * Closes popup when focus leaves this element
+ * Because this component uses a Teleport, uses a custom `data-parent-id` attribute
+ * to determine if the element is a child of this component
+ */
+function onBlur(e: FocusEvent) {
+    const newTarget = e.relatedTarget;
+
+    // close without refocusing open button
+    if (!(newTarget instanceof HTMLElement)) {
+        close(false);
+    } else if (newTarget.getAttribute("data-parent-id") !== props.id) {
+        close(false);
+    }
+}
+
+/** emulates 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);
+
+/** finds and returns the next focusable element right after this component */
+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;
+}
+
+/**
+ * Emulates continuous tab behavior.
+ * This is required because part of the component is teleported to the app layer,
+ * so this component is not continuous in the DOM
+ */
+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);
+/** used to position the pop-up */
+const bounds = useElementBounding(root);
+
+watch(
+    () => [props.options, props.selected],
+    async () => {
+        await nextTick();
+        bounds.update();
+    }
+);
+</script>
+
+<template>
+    <div ref="root" class="headless-multiselect">
+        <fieldset v-if="isOpen" @blur.capture="onBlur">
+            <input
+                :id="`${props.id}-input`"
+                ref="inputField"
+                v-model="searchValue"
+                aria-autocomplete="list"
+                :aria-label="props.placeholder"
+                role="searchbox"
+                aria-haspopup="listbox"
+                type="text"
+                :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"
+                @keydown.escape="close(true)" />
+            <button
+                ref="closeButton"
+                :data-parent-id="props.id"
+                title="close"
+                @click="close(true)"
+                @keydown.tab="onCloseButtonTab">
+                <FontAwesomeIcon icon="fa-chevron-up" />
+            </button>
+        </fieldset>
+        <button v-else ref="openButton" class="toggle-button" @click="open">
+            {{ props.placeholder }}
+            <FontAwesomeIcon icon="fa-tags" />
+        </button>
+
+        <Vue2Teleport v-if="isOpen" 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="highlightedOption === i">
+                            <FontAwesomeIcon
+                                class="headless-multiselect__needs-highlight"
+                                icon="fa-times"
+                                fixed-width />
+                            <span class="sr-only">remove tag</span>
+                        </template>
+                        <FontAwesomeIcon v-else icon="fa-check" fixed-width />
+                    </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;
+
+            &:focus,
+            &:focus-visible {
+                outline: none;
+                border: none;
+            }
+        }
+
+        button {
+            background: none;
+            border: none;
+            padding: 0;
+            width: 2rem;
+        }
+    }
+
+    .toggle-button {
+        font-size: $font-size-base;
+        color: $text-color;
+        text-decoration: none;
+        padding: 0 0.25rem;
+        background: none;
+        cursor: text;
+        text-align: left;
+        margin: 0;
+        border: none;
+        width: 100%;
+        height: 1.75rem;
+    }
+}
+
+.headless-multiselect__options {
+    position: fixed;
+    z-index: 10000;
+    overflow-y: scroll;
+
+    top: 0;
+    left: 0;
+    transform: translate(var(--left), calc(var(--top) + var(--height)));
+
+    width: var(--width);
+    max-height: min(300px, calc(100% - var(--top) - var(--height) - 12px));
+
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 0 6px 0 rgba(3, 0, 34, 0.048), 0 0 4px 0 rgba(3, 0, 34, 0.185);
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+
+    .headless-multiselect__option {
+        padding: 0.4rem 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.test.js b/client/src/components/TagsMultiselect/StatelessTags.test.js
index 09b0226b61b2..7869166cb34b 100644
--- a/client/src/components/TagsMultiselect/StatelessTags.test.js
+++ b/client/src/components/TagsMultiselect/StatelessTags.test.js
@@ -8,6 +8,7 @@ import { useUserTagsStore } from "@/stores/userTagsStore";
 import StatelessTags from "./StatelessTags";
 
 const autocompleteTags = ["#named_user_tag", "abc", "my_tag"];
+const toggleButton = ".toggle-button";
 
 const localVue = getLocalVue();
 
@@ -33,6 +34,12 @@ useToast.mockReturnValue({
     warning: warningMock,
 });
 
+const selectors = {
+    multiselect: ".headless-multiselect",
+    options: ".headless-multiselect__option",
+    input: "fieldset input",
+};
+
 describe("StatelessTags", () => {
     it("shows tags", () => {
         const wrapper = mountWithProps({
@@ -66,12 +73,14 @@ describe("StatelessTags", () => {
             disabled: false,
         });
 
-        const multiselect = wrapper.find(".multiselect");
+        wrapper.find(toggleButton).trigger("click");
+        await wrapper.vm.$nextTick();
+
+        const multiselect = wrapper.find(selectors.multiselect);
 
-        multiselect.find("button").trigger("click");
         await wrapper.vm.$nextTick();
+        const options = multiselect.findAll(selectors.options);
 
-        const options = multiselect.findAll(".multiselect-option");
         const visibleOptions = options.filter((option) => option.isVisible());
 
         expect(visibleOptions.length).toBe(autocompleteTags.length);
@@ -86,13 +95,12 @@ describe("StatelessTags", () => {
             disabled: false,
         });
 
-        const multiselect = wrapper.find(".multiselect");
-
-        multiselect.find("button").trigger("click");
+        wrapper.find(toggleButton).trigger("click");
         await wrapper.vm.$nextTick();
-        await multiselect.find("input").setValue("new_tag");
+        const multiselect = wrapper.find(selectors.multiselect);
+        await multiselect.find(selectors.input).setValue("new_tag");
         await wrapper.vm.$nextTick();
-        multiselect.find(".multiselect-option").trigger("click");
+        multiselect.find(selectors.options).trigger("click");
         await wrapper.vm.$nextTick();
 
         expect(addLocalTagMock.mock.calls.length).toBe(1);
@@ -104,14 +112,13 @@ describe("StatelessTags", () => {
             disabled: false,
         });
 
-        const multiselect = wrapper.find(".multiselect");
-
-        multiselect.find("button").trigger("click");
+        wrapper.find(toggleButton).trigger("click");
         await wrapper.vm.$nextTick();
-        await multiselect.find("input").setValue(":illegal_tag");
+        const multiselect = wrapper.find(selectors.multiselect);
+        await multiselect.find(selectors.input).setValue(":illegal_tag");
         await wrapper.vm.$nextTick();
 
-        const option = multiselect.find(".multiselect-option");
+        const option = multiselect.find(selectors.options);
         expect(option.classes()).toContain("invalid");
 
         option.trigger("click");
diff --git a/client/src/components/TagsMultiselect/StatelessTags.vue b/client/src/components/TagsMultiselect/StatelessTags.vue
index 71a944340753..3bd10cf7de69 100644
--- a/client/src/components/TagsMultiselect/StatelessTags.vue
+++ b/client/src/components/TagsMultiselect/StatelessTags.vue
@@ -1,16 +1,13 @@
 <script setup lang="ts">
-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 type { Ref } from "vue";
+import { BButton } from "bootstrap-vue";
+import { storeToRefs } from "pinia";
 import { computed, 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 {
@@ -20,7 +17,6 @@ interface StatelessTagsProps {
     useToggleLink?: boolean;
     maxVisibleTags?: number;
     placeholder?: string;
-    noPadding?: boolean;
 }
 
 const props = withDefaults(defineProps<StatelessTagsProps>(), {
@@ -37,16 +33,15 @@ const emit = defineEmits<{
     (e: "tag-click", tag: string): void;
 }>();
 
-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,15 +59,6 @@ function onDelete(tag: string) {
     emit("input", val);
 }
 
-const { editing, ariaExpanded, onOpen, onClose } = useMultiselect();
-
-const multiselectElement: Ref<Multiselect | null> = ref(null);
-
-function openMultiselect() {
-    //@ts-ignore bad library types
-    multiselectElement.value?.activate();
-}
-
 const tags = computed(() => props.value.map((tag) => tag.replace(/^name:/, "#")));
 
 const toggledOpen = ref(false);
@@ -96,12 +82,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) {
@@ -110,67 +92,29 @@ function onTagClicked(tag: string) {
 </script>
 
 <template>
-    <div class="stateless-tags" :class="{ 'px-1': !props.noPadding }">
-        <Multiselect
-            v-if="!disabled"
-            ref="multiselectElement"
-            open-direction="bottom"
-            :placeholder="props.placeholder"
-            :value="tags"
-            :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 }">
+    <div class="stateless-tags">
+        <div v-if="!disabled" class="tags-edit">
+            <div class="interactive-tags">
                 <Tag
-                    :option="option"
-                    :search="search"
+                    v-for="tag in tags"
+                    :key="tag"
+                    :option="tag"
                     :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>
-                <b-button v-if="!editing" class="toggle-button" variant="link" tabindex="-1" @click="openMultiselect">
-                    {{ props.placeholder }}
-                    <FontAwesomeIcon icon="fa-tags" />
-                </b-button>
-            </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>
+            </div>
 
-                        <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>
+            <HeadlessMultiselect
+                :options="userTags"
+                :selected="tags"
+                :placeholder="props.placeholder"
+                :validator="isValid"
+                @addOption="onAddTag"
+                @input="onInput" />
+        </div>
 
-        <div v-else :class="{ 'pl-1': !props.noPadding, 'pb-2': !props.noPadding }">
+        <div v-else>
             <div class="d-inline">
                 <Tag
                     v-for="tag in trimmedTags"
@@ -179,14 +123,14 @@ function onTagClicked(tag: string) {
                     :editable="false"
                     :clickable="props.clickable"
                     @click="onTagClicked"></Tag>
-                <b-button
+                <BButton
                     v-if="slicedTags.length > 0 && !toggledOpen"
                     :id="toggleButtonId"
                     variant="link"
                     class="toggle-link"
                     @click="() => (toggledOpen = true)">
                     {{ slicedTags.length }} more...
-                </b-button>
+                </BButton>
 
                 <b-tooltip
                     v-if="slicedTags.length > 0 && !toggledOpen"
@@ -213,8 +157,6 @@ function onTagClicked(tag: string) {
 </style>
 
 <style lang="scss" scoped>
-@import "scss/theme/blue.scss";
-
 .stateless-tags {
     .toggle-link {
         padding: 0;
@@ -225,131 +167,5 @@ function onTagClicked(tag: string) {
             border: none;
         }
     }
-
-    &:deep(.multiselect) {
-        min-height: unset;
-        display: flex;
-        flex-direction: column-reverse;
-
-        .multiselect__select {
-            top: unset;
-            bottom: 0;
-            padding: 0 0.25rem;
-            z-index: 1;
-            height: $font-size-base * 2;
-
-            &::before {
-                border-color: $text-color transparent transparent;
-            }
-        }
-
-        .multiselect__placeholder {
-            display: none;
-        }
-
-        .multiselect__tags-wrap {
-            margin-bottom: 0.5rem;
-        }
-
-        .multiselect__tags {
-            padding: 0 0.25rem;
-            background: none;
-            font-size: $font-size-base;
-            border: none;
-            min-height: 0;
-        }
-
-        .multiselect__content-wrapper {
-            top: 100%;
-            z-index: 800;
-            width: calc(100% - 4px);
-            left: 2px;
-
-            box-shadow: 0 0 6px 0 rgba(3, 0, 34, 0.048), 0 0 4px 0 rgba(3, 0, 34, 0.185);
-        }
-
-        &.multiselect--above .multiselect__content-wrapper {
-            top: unset;
-        }
-
-        .multiselect__input,
-        .toggle-button {
-            font-size: $font-size-base;
-            color: $text-color;
-            text-decoration: none;
-            padding: 0;
-            background: none;
-            cursor: text;
-            text-align: left;
-            margin: 0;
-            border: none;
-        }
-
-        .multiselect__input {
-            padding-left: 0.25rem;
-        }
-
-        .toggle-button {
-            padding-left: 0.5rem;
-        }
-
-        // built in option class
-        .multiselect__option {
-            min-height: unset;
-            padding: 0;
-
-            &::after {
-                display: none;
-            }
-
-            // custom option wrapper
-            .multiselect-option {
-                font-size: $font-size-base;
-                padding: 0.5rem;
-                display: inline-block;
-                width: 100%;
-                height: 100%;
-
-                .info {
-                    display: none;
-                }
-
-                &.invalid {
-                    color: $brand-light;
-                    background-color: $brand-warning;
-                }
-            }
-        }
-
-        .multiselect__option--selected {
-            .multiselect-option {
-                color: $brand-primary;
-                background-color: $brand-secondary;
-
-                .info:not(.highlighted) {
-                    display: inline-block;
-                }
-            }
-        }
-
-        .multiselect__option--highlight {
-            &::after {
-                display: none;
-            }
-
-            .multiselect-option {
-                background: $brand-primary;
-                color: $brand-light;
-
-                .info.highlighted {
-                    display: inline-block;
-                }
-
-                .info:not(.highlighted) {
-                    display: none;
-                }
-            }
-        }
-    }
 }
 </style>
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/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
index 8f996711fdec..ab1125e3848b 100644
--- a/client/src/utils/navigation/navigation.yml
+++ b/client/src/utils/navigation/navigation.yml
@@ -237,7 +237,7 @@ history_panel:
       toggle: '${_} .toggle-link'
       display: '${_} .tag span'
       input: '${_} input'
-      tag_area: '${_} .multiselect__tags'
+      tag_area: '${_} .interactive-tags'
       tag_close_btn: '${_} .tag-delete-button'
 
   multi_operations:
@@ -262,8 +262,8 @@ history_panel:
       title_input: '.dataset-collection-panel .controls .title input'
       subtitle: '.dataset-collection-panel .controls .title .subtitle'
       elements_warning: '.dataset-collection-panel .controls .elements-warning'
-      tag_area_button: '.details .stateless-tags .multiselect button'
-      tag_area_input: '.details .stateless-tags .multiselect input'
+      tag_area_button: '.details .stateless-tags .toggle-button'
+      tag_area_input: '.details .stateless-tags .headless-multiselect input'
       list_items: '.dataset-collection-panel .listing .content-item'
       back_to_history: svg[data-description="back to history"]
 
@@ -279,8 +279,8 @@ history_panel:
     empty_message: '.empty-message'
     size: '.history-size'
     tag_area: '.details .stateless-tags'
-    tag_area_button: '.details .stateless-tags .multiselect button'
-    tag_area_input: '.details .stateless-tags .multiselect input'
+    tag_area_button: '.details .stateless-tags .toggle-button'
+    tag_area_input: '.details .stateless-tags .headless-multiselect input'
     tag_close_btn: '.tags-display .tag-delete-button'
     tags: '.tag span'
 
diff --git a/client/yarn.lock b/client/yarn.lock
index 2ba9cb89af1b..087b32814f97 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -11651,6 +11651,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/lib/galaxy/selenium/navigates_galaxy.py b/lib/galaxy/selenium/navigates_galaxy.py
index 9377cee49e55..eb3d0a3e8731 100644
--- a/lib/galaxy/selenium/navigates_galaxy.py
+++ b/lib/galaxy/selenium/navigates_galaxy.py
@@ -1510,7 +1510,7 @@ def workflow_sharing_click_publish(self):
     def tagging_add(self, tags, auto_closes=True, parent_selector=""):
         for i, tag in enumerate(tags):
             if auto_closes or i == 0:
-                tag_area_selector = f"{parent_selector}.multiselect input[type='text']"
+                tag_area_selector = f"{parent_selector}.headless-multiselect input[type='text']"
                 tag_area = self.wait_for_selector_clickable(tag_area_selector)
                 tag_area.click()
 
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'"
   },