@saooti/octopus-sdk 41.12.0-beta2 → 41.12.0-beta3

package/.claude/scheduled_tasks.lock

@@ -0,0 +1 @@
+{"sessionId":"92d5c13f-8d38-4dc6-a66d-c7256640dc6f","pid":10553,"procStart":"32347","acquiredAt":1783406560303}

package/CHANGELOG.md

@@ -15,6 +15,8 @@
   - Mise en commun de code entre `OctopusSelect` & `OctopusMultiselect`
   - Ajustement de `OctopusMultiselect` pour fonctionner correctement avec des
     objets identiques avec références différentes
+  - Ajout de nouvelles options à `OctopusMultiselect` pour permettre la saisie
+    de données et avoir une meilleure UX en cas de longue liste
 - Ajout de nouvelles classes utilitaires dans le css
 - Ajout de nouvelles options d'apparence pour `ClassicButton`
 - Changement propriété principale de `ClassicButtonGroup` pour plus de cohérence

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "41.12.0-beta2",
+  "version": "41.12.0-beta3",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",
@@ -51,7 +51,7 @@
     "typescript-eslint": "^8.47.0",
     "video.js": "^8.23.6",
     "videojs-quality-selector-hls": "^1.1.1",
-    "vite": "^6.4.1",
+    "vite": "^8.0.16",
     "vite-bundle-visualizer": "^1.2.1",
     "vue-material-design-icons": "^5.3.1",
     "vue-recaptcha": "^2.0.3",
@@ -64,7 +64,7 @@
     "@stylistic/eslint-plugin": "*",
     "@types/sockjs-client": "^1.5.4",
     "@types/webpack-env": "^1.18.8",
-    "@vitejs/plugin-vue": "^5.2.4",
+    "@vitejs/plugin-vue": "^6.0.7",
     "@vue/test-utils": "^2.4.6",
     "eslint": "^9.39.1",
     "eslint-plugin-vue": "10.9.1",

package/src/components/composable/form/useOctopusDropdown.ts

@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 
 export interface OctopusDropdownProps<T> {
     options: T[];
-    optionLabel: keyof T & string;
+    optionLabel?: keyof T & string;
     optionKey?: keyof T;
     isDisabled?: boolean;
     placeholder?: string;
@@ -51,7 +51,10 @@ export function useOctopusDropdown<T>(
     const inputPlaceholder = computed(() => props.placeholder ?? t('Search'));
 
     function getLabel(option: T): string {
-        return option[props.optionLabel] as string;
+        if (props.optionLabel) {
+            return option[props.optionLabel] as string;
+        }
+        return option as unknown as string;
     }
 
     function openDropdown(): void {

package/src/components/form/OctopusMultiselect.vue

@@ -41,6 +41,7 @@
                 :disabled="isDisabled"
                 @focus="openDropdown"
                 @input="handleInput"
+                @keydown.enter="handleCustomValueEnter"
             >
             <button
                 class="btn-transparent octopus-multiselect-chevron"
@@ -74,14 +75,20 @@
 
                 <div class="octopus-multiselect-options">
                     <ClassicCheckbox
-                        v-for="(option, index) in displayedOptions"
+                        v-for="(option, index) in visibleOptions"
                         :key="index"
                         :text-init="isSelected(option)"
                         :label="getLabel(option)"
                         :is-disabled="isDisabled"
                         @update:text-init="toggleOption(option)"
                     />
-                    <span v-if="displayedOptions.length === 0" class="text-indic px-2">
+                    <template v-if="allowCustomValue && searchQuery.trim()">
+                        <hr v-if="visibleOptions.length > 0">
+                        <span class="text-indic px-2">
+                            {{ t('Press Enter to add this value') }}
+                        </span>
+                    </template>
+                    <span v-else-if="visibleOptions.length === 0" class="text-indic px-2">
                         {{ t('No elements found. Consider changing the search query.') }}
                     </span>
                 </div>
@@ -106,8 +113,16 @@ const props = defineProps<{
     options: T[];
     /** Key of each option object to use as the ID */
     optionKey?: keyof T;
-    /** Key of each option object to use as the display label. */
-    optionLabel: keyof T & string;
+    /** Key of each option object to use as the display label. Omit when `options` is a
+     *  plain `string[]` — each string is used as its own label. Note: omitting this for
+     *  an object array is a runtime mistake (not caught at compile time) and will render
+     *  "[object Object]". */
+    optionLabel?: keyof T & string;
+    /** When true, pressing Enter in the search input adds the typed text as a new
+     *  selected value, even if it doesn't match any option. Intended for use when
+     *  options are plain strings (`optionLabel` omitted) — casting arbitrary typed
+     *  text into an object-shaped T would not produce a valid option. */
+    allowCustomValue?: boolean;
     /** Disables the field and all checkboxes when true. */
     isDisabled?: boolean;
     /** Placeholder shown in the input when no items are selected. Defaults to the translated "Search" string. */
@@ -118,6 +133,10 @@ const props = defineProps<{
     noBorder?: boolean;
     /** When true, hovering the closed field with overflow shows a tooltip listing all selected items. */
     expandOnHover?: boolean;
+    /** When true, options selected at the moment the dropdown opens are moved to the
+     *  top of the list. This is a snapshot taken at open time — it does not live-reorder
+     *  while the dropdown stays open, only on the next closed→open transition. */
+    pullSelectedToTop?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -166,11 +185,35 @@ function updateDropdownPosition(): void {
 }
 const visibleCount = ref(2);
 
+// Selection snapshot captured the instant the dropdown opens, used only to freeze the
+// sort order when pullSelectedToTop is set — does not react to later `selected` changes
+// while the dropdown stays open.
+const pinnedSnapshot = ref<T[]>([]);
+
+// Selected values not present in `options` — only populated when allowCustomValue is set,
+// so a custom value typed via handleCustomValueEnter still shows (checked) in the dropdown.
+const customSelectedOptions = computed<T[]>(() => {
+    if (!props.allowCustomValue) { return []; }
+    return (props.selected ?? []).filter((item) => !isInOptions(item));
+});
+
+const visibleOptions = computed<T[]>(() => {
+    const query = searchQuery.value.toLowerCase();
+    const filteredCustom = query
+        ? customSelectedOptions.value.filter((option) => getLabel(option).toLowerCase().includes(query))
+        : customSelectedOptions.value;
+    const combined = [...displayedOptions.value, ...filteredCustom];
+    if (!props.pullSelectedToTop) {
+        return combined;
+    }
+    return [...combined.filter(isPinned), ...combined.filter((option) => !isPinned(option))];
+});
+
 const allSelected = computed(() => {
-    if (displayedOptions.value.length === 0) {
+    if (visibleOptions.value.length === 0) {
         return false;
     }
-    return displayedOptions.value.every((option) => isSelected(option));
+    return visibleOptions.value.every((option) => isSelected(option));
 });
 
 const hasSelected = computed(() => (props.selected?.length ?? 0) > 0);
@@ -195,6 +238,22 @@ function isSelected(option: T): boolean {
     }
 }
 
+function isInOptions(option: T): boolean {
+    if (props.optionKey) {
+        return props.options.some((opt) => opt[props.optionKey] === option[props.optionKey]);
+    } else {
+        return props.options.includes(option);
+    }
+}
+
+function isPinned(option: T): boolean {
+    if (props.optionKey) {
+        return pinnedSnapshot.value.some((s) => s[props.optionKey] === option[props.optionKey]);
+    } else {
+        return pinnedSnapshot.value.includes(option);
+    }
+}
+
 function toggleOption(option: T): void {
     const current = props.selected ?? [];
     if (isSelected(option)) {
@@ -208,16 +267,27 @@ function toggleOption(option: T): void {
     }
 }
 
+function handleCustomValueEnter(): void {
+    if (!props.allowCustomValue) { return; }
+    const value = searchQuery.value.trim();
+    if (!value) { return; }
+    const customOption = value as unknown as T;
+    if (!isSelected(customOption)) {
+        emit('update:selected', [...(props.selected ?? []), customOption]);
+    }
+    searchQuery.value = '';
+}
+
 function toggleAll(val: boolean): void {
     const current = props.selected ?? [];
     if (val) {
-        const toAdd = displayedOptions.value.filter((option: T) => !isSelected(option));
+        const toAdd = visibleOptions.value.filter((option: T) => !isSelected(option));
         emit('update:selected', [...current, ...toAdd]);
     } else {
         const key = props.optionKey;
         emit('update:selected', current.filter((item: T) => key
-            ? !displayedOptions.value.some((opt) => opt[key] === item[key])
-            : !displayedOptions.value.includes(item)
+            ? !visibleOptions.value.some((opt) => opt[key] === item[key])
+            : !visibleOptions.value.includes(item)
         ));
     }
 }
@@ -287,6 +357,7 @@ watch(() => props.selected, updateVisibleCount);
 
 watch(isOpen, (val) => {
     if (val) {
+        pinnedSnapshot.value = [...(props.selected ?? [])];
         nextTick(updateDropdownPosition);
     } else {
         nextTick(updateVisibleCount);
@@ -403,4 +474,10 @@ watch(isOpen, (val) => {
         padding: 0.25rem 0.5rem;
     }
 }
+
+hr {
+    border-top: 1px solid var(--octopus-secondary);
+    border-bottom: none;
+    margin: 0;
+}
 </style>

package/src/components/form/OctopusSelect.vue

@@ -51,7 +51,7 @@
             >
                 <div class="octopus-select-options">
                     <button
-                        v-for="(option, index) in displayedOptions"
+                        v-for="(option, index) in visibleOptions"
                         :key="index"
                         class="octopus-select-option"
                         :class="{ selected: isSelected(option) }"
@@ -59,7 +59,7 @@
                     >
                         {{ getLabel(option) }}
                     </button>
-                    <span v-if="displayedOptions.length === 0" class="text-indic px-2">
+                    <span v-if="visibleOptions.length === 0" class="text-indic px-2">
                         {{ t('No elements found. Consider changing the search query.') }}
                     </span>
                 </div>
@@ -93,6 +93,10 @@ const props = withDefaults(defineProps<{
     noBorder?: boolean;
     /** When true (default), clicking the already-selected option clears the selection. */
     allowDeselect?: boolean;
+    /** When true, the option matching the current value is moved to the top of the list
+     *  the moment the dropdown opens. This is a snapshot taken at open time — it does not
+     *  live-reorder while the dropdown stays open, only on the next closed→open transition. */
+    pullSelectedToTop?: boolean;
 }>(), {
     label: undefined,
     value: undefined,
@@ -144,8 +148,14 @@ function updateDropdownPosition(): void {
     };
 }
 
+// Value snapshot captured the instant the dropdown opens, used only to freeze the
+// sort order when pullSelectedToTop is set — does not react to later `value` changes
+// while the dropdown stays open.
+const pinnedValue = ref<T | undefined>(undefined);
+
 watch(isOpen, (val) => {
     if (val) {
+        pinnedValue.value = props.value;
         nextTick(updateDropdownPosition);
     }
 });
@@ -175,6 +185,23 @@ function isSelected(option: T): boolean {
     return toRaw(props.value as object) === toRaw(option as object);
 }
 
+function isPinned(option: T): boolean {
+    if (pinnedValue.value === undefined) {
+        return false;
+    }
+    if (props.optionKey) {
+        return pinnedValue.value[props.optionKey] === option[props.optionKey];
+    }
+    return toRaw(pinnedValue.value as object) === toRaw(option as object);
+}
+
+const visibleOptions = computed<T[]>(() => {
+    if (!props.pullSelectedToTop) {
+        return displayedOptions.value;
+    }
+    return [...displayedOptions.value.filter(isPinned), ...displayedOptions.value.filter((option) => !isPinned(option))];
+});
+
 function selectOption(option: T): void {
     if (isSelected(option) && props.allowDeselect) {
         emit('update:value', undefined);

package/src/locale/de.json

@@ -31,6 +31,7 @@
   "Emission image": "Bild zur Reihe",
   "Emission name": "Titel der Reihe",
   "No elements found. Consider changing the search query.": "Keine Ergebnisse. Bitte ändern Sie die Suchanfrage.",
+  "Press Enter to add this value": "Drücken Sie Enter, um diesen Wert hinzuzufügen",
   "Podcast is not visible for listeners": "Podcast ist für Hörer verborgen",
   "Validate": "Bestätigen",
   "Invalidate": "Invalidate",

package/src/locale/en.json

@@ -31,6 +31,7 @@
   "Emission image": "Series image",
   "Emission name": "Series title",
   "No elements found. Consider changing the search query.": "No elements found. Consider changing the search query.",
+  "Press Enter to add this value": "Press Enter to add this value",
   "Podcast is not visible for listeners": "Podcast is not visible for listeners",
   "Validate": "Validate",
   "Invalidate": "Invalidate",

package/src/locale/es.json

@@ -31,6 +31,7 @@
   "Emission image": "Imagen del programa",
   "Emission name": "Título del programa",
   "No elements found. Consider changing the search query.": "No hay resultados. Prueba con otros criterios de búsqueda.",
+  "Press Enter to add this value": "Pulsa Intro para añadir este valor",
   "Podcast is not visible for listeners": "El público no puede visualizar este pódcast",
   "Validate": "Validar",
   "Invalidate": "Invalidar",

package/src/locale/fr.json

@@ -37,6 +37,7 @@
   "Emission subtitle": "Sous-titre de l'émission",
   "No elements found. Consider changing the search query.":
     "Aucun élement ne correspond à votre recherche",
+  "Press Enter to add this value": "Appuyez sur Entrée pour ajouter cette valeur",
   "Podcast is not visible for listeners":
     "L'épisode n'est pas disponible pour les auditeurs",
   "Validate": "Valider",

package/src/locale/it.json

@@ -30,6 +30,7 @@
     "Emission image": "Immagine della serie",
     "Emission name": "Titolo della serie",
     "No elements found. Consider changing the search query.": "Non è stato trovato alcun elemento. Prova a cambiare i parametri di ricerca",
+    "Press Enter to add this value": "Premi Invio per aggiungere questo valore",
     "Podcast is not visible for listeners": "Il podcast non è visibile agli ascoltatori",
     "Validate": "Convalidare",
     "Invalidate": "Invalidate",

package/src/locale/sl.json

@@ -31,6 +31,7 @@
   "Emission image": "Slika oddaje",
   "Emission name": "Naslov oddaje",
   "No elements found. Consider changing the search query.": "Ni zadetkov. Spremenite poizvedbo",
+  "Press Enter to add this value": "Pritisnite Enter, da dodate to vrednost",
   "Podcast is not visible for listeners": "Za poslušalce skrit podkast",
   "Validate": "Potrdi",
   "Invalidate": "Invalidate",

package/src/stores/class/general/organisation.ts

@@ -24,12 +24,18 @@ export type OrganisationAttributes = {
   PRIVATE?: string;
   /** Live recordings enabled */
   'live.active'?: boolean;
+  /** Videos enabled */
+  'video.active'?: boolean;
   /**
    * List of rubriquage **names**.
    * The rubriques from these rubriquage are stored in stats and can be queried
    * upon.
    */
   rubriquage4MMIdentifier?: string;
+  /**
+   * Enable individualized stats
+   */
+  nominal_analytic?: string;
 };
 
 export interface Organisation {

package/src/style/_variables.scss

@@ -49,6 +49,8 @@
     --octopus-btn-play-bg: var(--octopus-primary-less-transparent);
     --octopus-btn-play-fg: white;
     --octopus-btn-play-radius: var(--octopus-border-radius);
+    --octopus-btn-social-bg: var(--octopus-secondary);
+    --octopus-btn-social-fg: var(--octopus-primary);
 
     // Player
     // Color for the transcript background

package/src/style/bootstrap.scss

@@ -154,7 +154,7 @@ input:not([class^="vs__"]), button:not([class^="vs__"]), select:not([class^="vs_
 			align-items: center;
 			justify-content: center;
 			background: var(--octopus-btn-primary-bg);
-			border: 1px solid var(--octopus-primary);
+			border: 1px solid var(--octopus-btn-primary-bg);
 			border-radius: var(--octopus-border-radius) !important;
 			color: var(--octopus-btn-primary-fg) !important;
 			font-weight: 500;
@@ -234,7 +234,8 @@ input:not([class^="vs__"]), button:not([class^="vs__"]), select:not([class^="vs_
 		width: 2.5rem !important;
 		height: 2.5rem !important;
 		padding: 0.5rem;
-		color : var(--octopus-primary);
+		color : var(--octopus-btn-social-fg);
+		background-color : var(--octopus-btn-social-bg);
 		flex-shrink: 0;
 		border-radius: 50% !important;
 

package/tests/components/form/OctopusMultiselect.spec.ts

@@ -3,6 +3,7 @@ import '@tests/mocks/i18n';
 import OctopusMultiselect from '@/components/form/OctopusMultiselect.vue';
 import { DOMWrapper, type VueWrapper } from '@vue/test-utils';
 import { mount } from '@tests/utils';
+import { nextTick } from 'vue';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 const options = [
@@ -16,6 +17,20 @@ function getDropdown(): Element | null {
     return document.body.querySelector('.octopus-multiselect-dropdown');
 }
 
+function getOptionLabels(): (string | undefined)[] {
+    return Array.from(document.body.querySelectorAll('.octopus-multiselect-options label'))
+        .map((l) => l.textContent?.trim());
+}
+
+// Simulates a click outside the component to trigger onClickOutside's closeDropdown.
+async function clickOutside(): Promise<void> {
+    const outsideElement = document.createElement('div');
+    document.body.appendChild(outsideElement);
+    outsideElement.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
+    await nextTick();
+    document.body.removeChild(outsideElement);
+}
+
 describe('OctopusMultiselect', () => {
     // The dropdown teleports to .octopus-app, which is normally the app root (see App.vue).
     // It doesn't exist in the test DOM, so it must be created before mount.
@@ -204,4 +219,287 @@ describe('OctopusMultiselect', () => {
         await new DOMWrapper(allCheckbox).trigger('input');
         expect(wrapper.emitted('update:selected')?.[0]).toEqual([[]]);
     });
+
+    describe('pullSelectedToTop', () => {
+        it('does not reorder options when pullSelectedToTop is not set', async () => {
+            wrapper = await mount(OctopusMultiselect, {
+                props: { options, optionLabel: 'name', selected: [options[1]] },
+            });
+            await wrapper.find('input').trigger('focus');
+            expect(getOptionLabels()).toEqual(['Alpha', 'Beta', 'Gamma']);
+        });
+
+        it('moves the selected option to the top when pullSelectedToTop is true', async () => {
+            wrapper = await mount(OctopusMultiselect, {
+                props: { options, optionLabel: 'name', selected: [options[1]], pullSelectedToTop: true },
+            });
+            await wrapper.find('input').trigger('focus');
+            expect(getOptionLabels()).toEqual(['Beta', 'Alpha', 'Gamma']);
+        });
+
+        it('preserves relative order within pinned and unpinned groups', async () => {
+            wrapper = await mount(OctopusMultiselect, {
+                props: { options, optionLabel: 'name', selected: [options[2], options[0]], pullSelectedToTop: true },
+            });
+            await wrapper.find('input').trigger('focus');
+            expect(getOptionLabels()).toEqual(['Alpha', 'Gamma', 'Beta']);
+        });
+
+        it('does not reorder while the dropdown stays open as selection changes', async () => {
+            wrapper = await mount(OctopusMultiselect, {
+                props: { options, optionLabel: 'name', selected: [], pullSelectedToTop: true },
+            });
+            await wrapper.find('input').trigger('focus');
+            const optionCheckboxes = document.body.querySelectorAll('.octopus-multiselect-options input[type="checkbox"]');
+            await new DOMWrapper(optionCheckboxes[2] as Element).trigger('input');
+            await wrapper.setProps({ selected: [options[2]] });
+            expect(getOptionLabels()).toEqual(['Alpha', 'Beta', 'Gamma']);
+        });
+
+        it('re-pins using the latest selection after closing and reopening', async () => {
+            wrapper = await mount(OctopusMultiselect, {
+                props: { options, optionLabel: 'name', selected: [options[2]], pullSelectedToTop: true },
+            });
+            await wrapper.find('input').trigger('focus');
+            await clickOutside();
+            await wrapper.find('input').trigger('focus');
+            expect(getOptionLabels()).toEqual(['Gamma', 'Alpha', 'Beta']);
+        });
+
+        it('pins by optionKey even when selected objects are different references', async () => {
+            const selected = [{ id: 2, name: 'Beta' }];
+            wrapper = await mount(OctopusMultiselect, {
+                props: { options, optionLabel: 'name', optionKey: 'id', selected, pullSelectedToTop: true },
+            });
+            await wrapper.find('input').trigger('focus');
+            expect(getOptionLabels()).toEqual(['Beta', 'Alpha', 'Gamma']);
+        });
+
+        it('still respects the active search filter when pinning', async () => {
+            wrapper = await mount(OctopusMultiselect, {
+                props: { options, optionLabel: 'name', selected: [options[2]], pullSelectedToTop: true },
+            });
+            await wrapper.find('input').trigger('focus');
+            await wrapper.find('input').setValue('be');
+            await wrapper.find('input').trigger('input');
+            expect(getOptionLabels()).toEqual(['Beta']);
+        });
+
+        it('keeps a selected custom value pinned alongside allowCustomValue', async () => {
+            wrapper = await mount(OctopusMultiselect, {
+                props: {
+                    options: ['Alpha', 'Beta', 'Gamma'],
+                    selected: ['Delta'],
+                    allowCustomValue: true,
+                    pullSelectedToTop: true,
+                },
+            });
+            await wrapper.find('input').trigger('focus');
+            expect(getOptionLabels()).toEqual(['Delta', 'Alpha', 'Beta', 'Gamma']);
+        });
+    });
+
+    describe('with string options', () => {
+        const stringOptions = ['Alpha', 'Beta', 'Gamma'];
+
+        it('uses each string as its own label without optionLabel', async () => {
+            wrapper = await mount(OctopusMultiselect, {
+                props: { options: stringOptions },
+            });
+            await wrapper.find('input').trigger('focus');
+            const labels = document.body.querySelectorAll('.octopus-multiselect-options label');
+            expect(Array.from(labels).map((l) => l.textContent?.trim())).toEqual(stringOptions);
+        });
+
+        it('emits update:selected when toggling a string option', async () => {
+            wrapper = await mount(OctopusMultiselect, {
+                props: { options: stringOptions, selected: [] },
+            });
+            await wrapper.find('input').trigger('focus');
+            const optionCheckboxes = document.body.querySelectorAll('.octopus-multiselect-options input[type="checkbox"]');
+            await new DOMWrapper(optionCheckboxes[0] as Element).trigger('input');
+            expect(wrapper.emitted('update:selected')?.[0]).toEqual([['Alpha']]);
+        });
+
+        it('deselects an already-selected string option', async () => {
+            wrapper = await mount(OctopusMultiselect, {
+                props: { options: stringOptions, selected: ['Alpha'] },
+            });
+            await wrapper.find('input').trigger('focus');
+            const optionCheckboxes = document.body.querySelectorAll('.octopus-multiselect-options input[type="checkbox"]');
+            await new DOMWrapper(optionCheckboxes[0] as Element).trigger('input');
+            expect(wrapper.emitted('update:selected')?.[0]).toEqual([[]]);
+        });
+
+        it('filters string options locally by search query', async () => {
+            wrapper = await mount(OctopusMultiselect, {
+                props: { options: stringOptions },
+            });
+            await wrapper.find('input').trigger('focus');
+            await wrapper.find('input').setValue('al');
+            await wrapper.find('input').trigger('input');
+            const checkboxes = document.body.querySelectorAll('.octopus-multiselect-options input[type="checkbox"]');
+            expect(checkboxes).toHaveLength(1);
+        });
+
+        it('toggleAll selects all displayed string options', async () => {
+            wrapper = await mount(OctopusMultiselect, {
+                props: { options: stringOptions, selected: [] },
+            });
+            await wrapper.find('input').trigger('focus');
+            const allCheckbox = document.body.querySelector('.octopus-multiselect-dropdown > .octopus-form-item input[type="checkbox"]')!;
+            await new DOMWrapper(allCheckbox).trigger('input');
+            expect(wrapper.emitted('update:selected')?.[0]).toEqual([stringOptions]);
+        });
+
+        it('shows selected strings in the selection display', async () => {
+            wrapper = await mount(OctopusMultiselect, {
+                props: { options: stringOptions, selected: ['Alpha', 'Beta'] },
+            });
+            expect(wrapper.find('.octopus-multiselect-selection-text').text()).toBe('Alpha, Beta');
+        });
+
+        it('adds typed value as a new selection on Enter when allowCustomValue is true', async () => {
+            wrapper = await mount(OctopusMultiselect, {
+                props: { options: stringOptions, selected: [], allowCustomValue: true },
+            });
+            await wrapper.find('input').trigger('focus');
+            await wrapper.find('input').setValue('Delta');
+            await wrapper.find('input').trigger('keydown.enter');
+            expect(wrapper.emitted('update:selected')?.[0]).toEqual([['Delta']]);
+        });
+
+        it('does not add typed value on Enter when allowCustomValue is not set', async () => {
+            wrapper = await mount(OctopusMultiselect, {
+                props: { options: stringOptions, selected: [] },
+            });
+            await wrapper.find('input').trigger('focus');
+            await wrapper.find('input').setValue('Delta');
+            await wrapper.find('input').trigger('keydown.enter');
+            expect(wrapper.emitted('update:selected')).toBeUndefined();
+        });
+
+        it('does not add an empty or whitespace-only value on Enter', async () => {
+            wrapper = await mount(OctopusMultiselect, {
+                props: { options: stringOptions, selected: [], allowCustomValue: true },
+            });
+            await wrapper.find('input').trigger('focus');
+            await wrapper.find('input').setValue('   ');
+            await wrapper.find('input').trigger('keydown.enter');
+            expect(wrapper.emitted('update:selected')).toBeUndefined();
+        });
+
+        it('does not duplicate an already-selected value on Enter', async () => {
+            wrapper = await mount(OctopusMultiselect, {
+                props: { options: stringOptions, selected: ['Alpha'], allowCustomValue: true },
+            });
+            await wrapper.find('input').trigger('focus');
+            await wrapper.find('input').setValue('Alpha');
+            await wrapper.find('input').trigger('keydown.enter');
+            expect(wrapper.emitted('update:selected')).toBeUndefined();
+        });
+
+        it('clears the search input after adding a custom value on Enter', async () => {
+            wrapper = await mount(OctopusMultiselect, {
+                props: { options: stringOptions, selected: [], allowCustomValue: true },
+            });
+            await wrapper.find('input').trigger('focus');
+            await wrapper.find('input').setValue('Delta');
+            await wrapper.find('input').trigger('keydown.enter');
+            expect((wrapper.find('input').element as HTMLInputElement).value).toBe('');
+        });
+
+        it('shows a previously added custom value as a checked option in the dropdown', async () => {
+            wrapper = await mount(OctopusMultiselect, {
+                props: { options: stringOptions, selected: ['Delta'], allowCustomValue: true },
+            });
+            await wrapper.find('input').trigger('focus');
+            const labels = Array.from(document.body.querySelectorAll('.octopus-multiselect-options label'))
+                .map((l) => l.textContent?.trim());
+            expect(labels).toContain('Delta');
+            const checkboxes = document.body.querySelectorAll('.octopus-multiselect-options input[type="checkbox"]');
+            expect((checkboxes[labels.indexOf('Delta')] as HTMLInputElement).checked).toBe(true);
+        });
+
+        it('shows the checkbox for a value right after it is added via Enter', async () => {
+            wrapper = await mount(OctopusMultiselect, {
+                props: { options: stringOptions, selected: [], allowCustomValue: true },
+            });
+            await wrapper.find('input').trigger('focus');
+            await wrapper.find('input').setValue('Delta');
+            await wrapper.find('input').trigger('keydown.enter');
+            const emittedSelected = wrapper.emitted('update:selected')?.[0]?.[0] as string[];
+            await wrapper.setProps({ selected: emittedSelected });
+            const labels = Array.from(document.body.querySelectorAll('.octopus-multiselect-options label'))
+                .map((l) => l.textContent?.trim());
+            expect(labels).toContain('Delta');
+        });
+
+        it('does not show out-of-options selected values in the dropdown when allowCustomValue is not set', async () => {
+            wrapper = await mount(OctopusMultiselect, {
+                props: { options: stringOptions, selected: ['Delta'] },
+            });
+            await wrapper.find('input').trigger('focus');
+            const labels = Array.from(document.body.querySelectorAll('.octopus-multiselect-options label'))
+                .map((l) => l.textContent?.trim());
+            expect(labels).not.toContain('Delta');
+        });
+
+        it('deselects a custom value when its checkbox in the dropdown is toggled off', async () => {
+            wrapper = await mount(OctopusMultiselect, {
+                props: { options: stringOptions, selected: ['Alpha', 'Delta'], allowCustomValue: true },
+            });
+            await wrapper.find('input').trigger('focus');
+            const checkboxes = document.body.querySelectorAll('.octopus-multiselect-options input[type="checkbox"]');
+            // visibleOptions = [Alpha, Beta, Gamma, Delta] — Delta is the appended custom entry
+            await new DOMWrapper(checkboxes[3] as Element).trigger('input');
+            expect(wrapper.emitted('update:selected')?.[0]).toEqual([['Alpha']]);
+        });
+
+        it('toggleAll includes an already-selected custom value shown in the dropdown', async () => {
+            wrapper = await mount(OctopusMultiselect, {
+                props: { options: stringOptions, selected: ['Delta'], allowCustomValue: true },
+            });
+            await wrapper.find('input').trigger('focus');
+            const allCheckbox = document.body.querySelector('.octopus-multiselect-dropdown > .octopus-form-item input[type="checkbox"]')!;
+            await new DOMWrapper(allCheckbox).trigger('input');
+            const emitted = wrapper.emitted('update:selected')?.[0]?.[0] as string[];
+            expect(emitted).toHaveLength(4);
+            expect(emitted).toEqual(expect.arrayContaining(['Alpha', 'Beta', 'Gamma', 'Delta']));
+        });
+
+        it('shows a hint to press Enter when allowCustomValue is true and text is typed', async () => {
+            wrapper = await mount(OctopusMultiselect, {
+                props: { options: stringOptions, allowCustomValue: true },
+            });
+            await wrapper.find('input').trigger('focus');
+            await wrapper.find('input').setValue('Delta');
+            await wrapper.find('input').trigger('input');
+            const hints = Array.from(document.body.querySelectorAll('.octopus-multiselect-options .text-indic'))
+                .map((el) => el.textContent?.trim());
+            expect(hints).toContain('Press Enter to add this value');
+        });
+
+        it('does not show the Enter hint when allowCustomValue is not set', async () => {
+            wrapper = await mount(OctopusMultiselect, {
+                props: { options: stringOptions },
+            });
+            await wrapper.find('input').trigger('focus');
+            await wrapper.find('input').setValue('Delta');
+            await wrapper.find('input').trigger('input');
+            const hints = Array.from(document.body.querySelectorAll('.octopus-multiselect-options .text-indic'))
+                .map((el) => el.textContent?.trim());
+            expect(hints).not.toContain('Press Enter to add this value');
+        });
+
+        it('does not show the Enter hint when the search input is empty', async () => {
+            wrapper = await mount(OctopusMultiselect, {
+                props: { options: stringOptions, allowCustomValue: true },
+            });
+            await wrapper.find('input').trigger('focus');
+            const hints = Array.from(document.body.querySelectorAll('.octopus-multiselect-options .text-indic'))
+                .map((el) => el.textContent?.trim());
+            expect(hints).not.toContain('Press Enter to add this value');
+        });
+    });
 });

package/tests/components/form/OctopusSelect.spec.ts

@@ -3,6 +3,7 @@ import '@tests/mocks/i18n';
 import OctopusSelect from '@/components/form/OctopusSelect.vue';
 import { DOMWrapper, type VueWrapper } from '@vue/test-utils';
 import { mount } from '@tests/utils';
+import { nextTick } from 'vue';
 import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 
 const options = [
@@ -16,6 +17,20 @@ function getDropdown(): Element | null {
     return document.body.querySelector('.octopus-select-dropdown');
 }
 
+function getOptionLabels(): string[] {
+    return Array.from(document.body.querySelectorAll('.octopus-select-option'))
+        .map((el) => el.textContent?.trim() ?? '');
+}
+
+// Simulates a click outside the component to trigger onClickOutside's closeDropdown.
+async function clickOutside(): Promise<void> {
+    const outsideElement = document.createElement('div');
+    document.body.appendChild(outsideElement);
+    outsideElement.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
+    await nextTick();
+    document.body.removeChild(outsideElement);
+}
+
 describe('OctopusSelect', () => {
     // The dropdown teleports to .octopus-app, which is normally the app root (see App.vue).
     // It doesn't exist in the test DOM, so it must be created before mount.
@@ -165,4 +180,60 @@ describe('OctopusSelect', () => {
         const optionButtons = document.body.querySelectorAll('.octopus-select-option');
         expect(optionButtons[0].classList).toContain('selected');
     });
+
+    describe('pullSelectedToTop', () => {
+        it('does not reorder options when pullSelectedToTop is not set', async () => {
+            wrapper = await mount(OctopusSelect, {
+                props: { options, optionLabel: 'name', value: options[1] },
+            });
+            await wrapper.find('input').trigger('focus');
+            expect(getOptionLabels()).toEqual(['Alpha', 'Beta', 'Gamma']);
+        });
+
+        it('moves the selected option to the top when pullSelectedToTop is true', async () => {
+            wrapper = await mount(OctopusSelect, {
+                props: { options, optionLabel: 'name', value: options[1], pullSelectedToTop: true },
+            });
+            await wrapper.find('input').trigger('focus');
+            expect(getOptionLabels()).toEqual(['Beta', 'Alpha', 'Gamma']);
+        });
+
+        it('does not reorder while the dropdown stays open as the value changes', async () => {
+            wrapper = await mount(OctopusSelect, {
+                props: { options, optionLabel: 'name', pullSelectedToTop: true },
+            });
+            await wrapper.find('input').trigger('focus');
+            await wrapper.setProps({ value: options[2] });
+            expect(getOptionLabels()).toEqual(['Alpha', 'Beta', 'Gamma']);
+        });
+
+        it('re-pins using the latest value after closing and reopening', async () => {
+            wrapper = await mount(OctopusSelect, {
+                props: { options, optionLabel: 'name', value: options[2], pullSelectedToTop: true },
+            });
+            await wrapper.find('input').trigger('focus');
+            await clickOutside();
+            await wrapper.find('input').trigger('focus');
+            expect(getOptionLabels()).toEqual(['Gamma', 'Alpha', 'Beta']);
+        });
+
+        it('pins by optionKey even when the value is a different reference', async () => {
+            const value = { id: 2, name: 'Beta' };
+            wrapper = await mount(OctopusSelect, {
+                props: { options, optionLabel: 'name', optionKey: 'id', value, pullSelectedToTop: true },
+            });
+            await wrapper.find('input').trigger('focus');
+            expect(getOptionLabels()).toEqual(['Beta', 'Alpha', 'Gamma']);
+        });
+
+        it('still respects the active search filter when pinning', async () => {
+            wrapper = await mount(OctopusSelect, {
+                props: { options, optionLabel: 'name', value: options[2], pullSelectedToTop: true },
+            });
+            await wrapper.find('input').trigger('focus');
+            await wrapper.find('input').setValue('be');
+            await wrapper.find('input').trigger('input');
+            expect(getOptionLabels()).toEqual(['Beta']);
+        });
+    });
 });