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

package/CHANGELOG.md

@@ -18,6 +18,7 @@
 - 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
+- Ajout de variables CSS pour configurer l'aspect de divers boutons
 
 **Fixes**
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saooti/octopus-sdk",
-  "version": "41.12.0-beta",
+  "version": "41.12.0-beta2",
   "private": false,
   "description": "Javascript SDK for using octopus",
   "author": "Saooti",

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

@@ -1,5 +1,5 @@
 import { computed, getCurrentInstance, nextTick, ref } from 'vue';
-import { onClickOutside } from '@vueuse/core';
+import { type MaybeElementRef, onClickOutside } from '@vueuse/core';
 import { useI18n } from 'vue-i18n';
 
 export interface OctopusDropdownProps<T> {
@@ -13,7 +13,12 @@ export interface OctopusDropdownProps<T> {
 export function useOctopusDropdown<T>(
     props: OctopusDropdownProps<T>,
     emitSearch: (query: string) => void,
-    idPrefix: string = 'octopus-dropdown'
+    idPrefix: string = 'octopus-dropdown',
+    // Extra elements to exclude from the click-outside check.
+    // Needed when the dropdown is teleported outside containerRef (e.g. to body):
+    // without this, clicking inside the teleported dropdown triggers closeDropdown
+    // because it is no longer a DOM descendant of containerRef.
+    ignore?: MaybeElementRef[]
 ) {
     const { t } = useI18n();
     const instance = getCurrentInstance();
@@ -78,7 +83,7 @@ export function useOctopusDropdown<T>(
         }
     }
 
-    onClickOutside(containerRef, closeDropdown);
+    onClickOutside(containerRef, closeDropdown, ignore?.length ? { ignore } : undefined);
 
     return {
         searchQuery,

package/src/components/display/podcasts/PodcastPlayButton.vue

@@ -359,15 +359,15 @@ async function play(isVideo: boolean): Promise<void> {
     left: 0;
     font-size: 1rem;
     color: white;
-    background-color: var(--octopus-primary-less-transparent);
-    border-radius: var(--octopus-border-radius);
+    background-color: var(--octopus-btn-play-bg);
+    border-radius: var(--octopus-btn-play-radius);
 
     @media (width <= 960px) {
       font-size: 0.8rem;
     }
 
     button{
-      color: white;
+      color: var(--octopus-btn-play-fg);
       background-color: transparent;
       border: 0;
       display: flex;

package/src/components/form/OctopusMultiselect.vue

@@ -58,33 +58,40 @@
             {{ allLabelsText }}
         </div>
 
-        <div v-if="isOpen" class="octopus-multiselect-dropdown">
-            <ClassicCheckbox
-                :text-init="allSelected"
-                :label="selectAllText ?? t('All')"
-                :is-disabled="isDisabled"
-                @update:text-init="toggleAll"
-            />
-
-            <div class="octopus-multiselect-options">
+        <Teleport to=".octopus-app">
+            <div
+                v-if="isOpen"
+                ref="dropdownRef"
+                class="octopus-multiselect-dropdown"
+                :style="dropdownStyle"
+            >
                 <ClassicCheckbox
-                    v-for="(option, index) in displayedOptions"
-                    :key="index"
-                    :text-init="isSelected(option)"
-                    :label="getLabel(option)"
+                    :text-init="allSelected"
+                    :label="selectAllText ?? t('All')"
                     :is-disabled="isDisabled"
-                    @update:text-init="toggleOption(option)"
+                    @update:text-init="toggleAll"
                 />
-                <span v-if="displayedOptions.length === 0" class="text-indic px-2">
-                    {{ t('No elements found. Consider changing the search query.') }}
-                </span>
+
+                <div class="octopus-multiselect-options">
+                    <ClassicCheckbox
+                        v-for="(option, index) in displayedOptions"
+                        :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">
+                        {{ t('No elements found. Consider changing the search query.') }}
+                    </span>
+                </div>
             </div>
-        </div>
+        </Teleport>
     </div>
 </template>
 
 <script setup lang="ts" generic="T">
-import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
+import { type CSSProperties, computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import ChevronDownIcon from 'vue-material-design-icons/ChevronDown.vue';
 import ClassicCheckbox from './ClassicCheckbox.vue';
@@ -123,6 +130,10 @@ const emit = defineEmits<{
 
 const { t } = useI18n();
 
+// Ref on the teleported dropdown div — passed as ignored element to useOctopusDropdown
+// so clicks inside the dropdown don't trigger the click-outside handler.
+const dropdownRef = ref<HTMLElement | null>(null);
+
 const {
     searchQuery,
     isOpen,
@@ -136,9 +147,23 @@ const {
     openDropdown,
     toggleDropdown,
     handleInput,
-} = useOctopusDropdown(props, (query) => emit('search', query), 'multiselect');
+} = useOctopusDropdown(props, (query) => emit('search', query), 'multiselect', [dropdownRef]);
 
 const selectionRef = ref<HTMLElement | null>(null);
+
+// Position of the teleported dropdown (position: fixed, anchored below the trigger field)
+const dropdownStyle = ref<CSSProperties>({});
+
+function updateDropdownPosition(): void {
+    if (!containerRef.value) { return; }
+    const rect = containerRef.value.getBoundingClientRect();
+    dropdownStyle.value = {
+        position: 'fixed',
+        top: `${rect.bottom + 2}px`,
+        left: `${rect.left}px`,
+        width: `${rect.width}px`,
+    };
+}
 const visibleCount = ref(2);
 
 const allSelected = computed(() => {
@@ -247,16 +272,23 @@ onMounted(() => {
         resizeObserver.observe(selectionRef.value);
     }
     updateVisibleCount();
+    // Keep the teleported dropdown aligned when the page scrolls or the viewport resizes
+    window.addEventListener('scroll', updateDropdownPosition, true);
+    window.addEventListener('resize', updateDropdownPosition);
 });
 
 onUnmounted(() => {
     resizeObserver?.disconnect();
+    window.removeEventListener('scroll', updateDropdownPosition, true);
+    window.removeEventListener('resize', updateDropdownPosition);
 });
 
 watch(() => props.selected, updateVisibleCount);
 
 watch(isOpen, (val) => {
-    if (!val) {
+    if (val) {
+        nextTick(updateDropdownPosition);
+    } else {
         nextTick(updateVisibleCount);
     }
 });
@@ -345,31 +377,30 @@ watch(isOpen, (val) => {
         align-items: center;
     }
 
-    .octopus-multiselect-dropdown {
-        position: absolute;
-        top: calc(100% + 2px);
-        left: 0;
-        right: 0;
-        z-index: 100;
-        background: white;
-        border: 1px solid var(--octopus-border-default);
-        border-radius: var(--octopus-border-radius);
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-        padding: 0.25rem 0;
+}
 
-        > .octopus-form-item {
-            padding: 0.25rem 0.5rem;
-            border-bottom: 1px solid var(--octopus-secondary);
-        }
+// Dropdown is teleported to body — scoped rules must be top-level so that [data-v-xxxx]
+// is matched directly on the element rather than via a descendant-of-.octopus-multiselect selector.
+.octopus-multiselect-dropdown {
+    z-index: 100;
+    background: white;
+    border: 1px solid var(--octopus-border-default);
+    border-radius: var(--octopus-border-radius);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    padding: 0.25rem 0;
+
+    > .octopus-form-item {
+        padding: 0.25rem 0.5rem;
+        border-bottom: 1px solid var(--octopus-secondary);
     }
+}
 
-    .octopus-multiselect-options {
-        max-height: 14rem;
-        overflow-y: auto;
+.octopus-multiselect-options {
+    max-height: 14rem;
+    overflow-y: auto;
 
-        .octopus-form-item {
-            padding: 0.25rem 0.5rem;
-        }
+    .octopus-form-item {
+        padding: 0.25rem 0.5rem;
     }
 }
 </style>

package/src/components/form/OctopusSelect.vue

@@ -42,27 +42,34 @@
             </button>
         </div>
 
-        <div v-if="isOpen" class="octopus-select-dropdown">
-            <div class="octopus-select-options">
-                <button
-                    v-for="(option, index) in displayedOptions"
-                    :key="index"
-                    class="octopus-select-option"
-                    :class="{ selected: isSelected(option) }"
-                    @click="selectOption(option)"
-                >
-                    {{ getLabel(option) }}
-                </button>
-                <span v-if="displayedOptions.length === 0" class="text-indic px-2">
-                    {{ t('No elements found. Consider changing the search query.') }}
-                </span>
+        <Teleport to=".octopus-app">
+            <div
+                v-if="isOpen"
+                ref="dropdownRef"
+                class="octopus-select-dropdown"
+                :style="dropdownStyle"
+            >
+                <div class="octopus-select-options">
+                    <button
+                        v-for="(option, index) in displayedOptions"
+                        :key="index"
+                        class="octopus-select-option"
+                        :class="{ selected: isSelected(option) }"
+                        @click="selectOption(option)"
+                    >
+                        {{ getLabel(option) }}
+                    </button>
+                    <span v-if="displayedOptions.length === 0" class="text-indic px-2">
+                        {{ t('No elements found. Consider changing the search query.') }}
+                    </span>
+                </div>
             </div>
-        </div>
+        </Teleport>
     </div>
 </template>
 
 <script setup lang="ts" generic="T">
-import { computed, toRaw } from 'vue';
+import { type CSSProperties, computed, nextTick, onMounted, onUnmounted, ref, toRaw, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import ChevronDownIcon from 'vue-material-design-icons/ChevronDown.vue';
 import { useOctopusDropdown } from '../composable/form/useOctopusDropdown';
@@ -104,6 +111,10 @@ const emit = defineEmits<{
 
 const { t } = useI18n();
 
+// Ref on the teleported dropdown div — passed as ignored element to useOctopusDropdown
+// so clicks inside the dropdown don't trigger the click-outside handler.
+const dropdownRef = ref<HTMLElement | null>(null);
+
 const {
     searchQuery,
     isOpen,
@@ -117,7 +128,38 @@ const {
     closeDropdown,
     toggleDropdown,
     handleInput,
-} = useOctopusDropdown(props, (query) => emit('search', query), 'select');
+} = useOctopusDropdown(props, (query) => emit('search', query), 'select', [dropdownRef]);
+
+// Position of the teleported dropdown (position: fixed, anchored below the trigger field)
+const dropdownStyle = ref<CSSProperties>({});
+
+function updateDropdownPosition(): void {
+    if (!containerRef.value) { return; }
+    const rect = containerRef.value.getBoundingClientRect();
+    dropdownStyle.value = {
+        position: 'fixed',
+        top: `${rect.bottom + 2}px`,
+        left: `${rect.left}px`,
+        width: `${rect.width}px`,
+    };
+}
+
+watch(isOpen, (val) => {
+    if (val) {
+        nextTick(updateDropdownPosition);
+    }
+});
+
+onMounted(() => {
+    // Keep the teleported dropdown aligned when the page scrolls or the viewport resizes
+    window.addEventListener('scroll', updateDropdownPosition, true);
+    window.addEventListener('resize', updateDropdownPosition);
+});
+
+onUnmounted(() => {
+    window.removeEventListener('scroll', updateDropdownPosition, true);
+    window.removeEventListener('resize', updateDropdownPosition);
+});
 
 const selectedLabel = computed(() =>
     props.value !== undefined ? getLabel(props.value) : undefined
@@ -197,41 +239,40 @@ function selectOption(option: T): void {
         align-items: center;
     }
 
-    .octopus-select-dropdown {
-        position: absolute;
-        top: calc(100% + 2px);
-        left: 0;
-        right: 0;
-        z-index: 100;
-        background: white;
-        border: 1px solid var(--octopus-border-default);
-        border-radius: var(--octopus-border-radius);
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-        padding: 0.25rem 0;
-    }
+}
 
-    .octopus-select-options {
-        max-height: 14rem;
-        overflow-y: auto;
-    }
+// Dropdown is teleported to body — scoped rules must be top-level so that [data-v-xxxx]
+// is matched directly on the element rather than via a descendant-of-.octopus-select selector.
+.octopus-select-dropdown {
+    z-index: 100;
+    background: white;
+    border: 1px solid var(--octopus-border-default);
+    border-radius: var(--octopus-border-radius);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    padding: 0.25rem 0;
+}
 
-    .octopus-select-option {
-        display: block;
-        width: 100%;
-        text-align: left;
-        padding: 0.25rem 0.5rem;
-        border: none;
-        background: transparent;
-        cursor: pointer;
+.octopus-select-options {
+    max-height: 14rem;
+    overflow-y: auto;
+}
 
-        &:hover {
-            background: var(--octopus-secondary-lighter);
-        }
+.octopus-select-option {
+    display: block;
+    width: 100%;
+    text-align: left;
+    padding: 0.25rem 0.5rem;
+    border: none;
+    background: transparent;
+    cursor: pointer;
 
-        &.selected {
-            font-weight: 600;
-            color: var(--octopus-primary);
-        }
+    &:hover {
+        background: var(--octopus-secondary-lighter);
+    }
+
+    &.selected {
+        font-weight: 600;
+        color: var(--octopus-primary);
     }
 }
 </style>

package/src/components/misc/modal/ClassicModal.vue

@@ -110,6 +110,8 @@ function closePopup(): void {
 
   @media (width <= 500px) {
     width: 95vw;
+    margin-left: 2.5vw;
+    margin-right: 2.5vw;
   }
 
  .octopus-modal-body {

package/src/components/misc/player/elements/PlayerPlayButton.vue

@@ -7,7 +7,7 @@
       'play-button-box': !isBigButton,
       'play-big-button-box': isBigButton,
     }"
-    class="btn text-light bg-primary"
+    class="btn text-light"
     @click="switchPausePlay"
   >
     <PlayIcon v-if="displayIsPaused" :size="isBigButton ? 60 : 30" />
@@ -107,23 +107,27 @@ function switchPausePlay(): void {
 }
 </script>
 
-<style lang="scss">
+<style scoped lang="scss">
 @use "../../../../style/playButton";
-.octopus-app {
-  .play-button-box:not(.small-font) {
-    font-size: 1rem !important;
-  }
-  .play-big-button-box {
-    height: 5rem;
-    width: 5rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin: 0 0.5rem;
-    border-radius: 50% !important;
-    font-size: 2.5rem !important;
-    flex-shrink: 0;
-    cursor: pointer;
-  }
+
+.btn {
+  color: var(--octopus-player-btn-fg);
+  background-color: var(--octopus-player-btn-bg);
+}
+
+.play-button-box:not(.small-font) {
+  font-size: 1rem !important;
+}
+.play-big-button-box {
+  height: 5rem;
+  width: 5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 0.5rem;
+  border-radius: 50% !important;
+  font-size: 2.5rem !important;
+  flex-shrink: 0;
+  cursor: pointer;
 }
 </style>

package/src/stores/ParamSdkStore.ts

@@ -48,6 +48,7 @@ export interface ParamStore {
     /** Show time with the dates on podcasts */
     showTimeWithDates?: boolean;
     buttonPlus?: boolean;
+    /** Show the "Radio & Live" tab in the navigation; driven by additionalConfiguration from the backend */
     isLiveTab?: boolean;
     isCaptchaTest?: boolean;
     podcastItem?: number;

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

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

package/src/stores/class/rubrique/rubrique.ts

@@ -3,7 +3,7 @@ export interface Rubrique {
   name: string;
   podcastCount?: number;
   rubriquageId?: number;
-  rubriqueId?: number;
+  rubriqueId: number;
   score?: number;
   organisationPrivacy?: string;
 }

package/src/style/_variables.scss

@@ -43,6 +43,13 @@
     // ClassicDataTable
     --table-line-height: 48px;
 
+    // Buttons
+    --octopus-btn-primary-bg: var(--octopus-primary);
+    --octopus-btn-primary-fg: var(--octopus-color-on-primary);
+    --octopus-btn-play-bg: var(--octopus-primary-less-transparent);
+    --octopus-btn-play-fg: white;
+    --octopus-btn-play-radius: var(--octopus-border-radius);
+
     // Player
     // Color for the transcript background
     --octopus-player-transcript-bg-color: oklch(from var(--octopus-player-color) calc(l + 0.1) c h);
@@ -52,6 +59,10 @@
     --octopus-player-progress-color-current: var(--octopus-primary);
     // Color for the progress bar background
     --octopus-player-progress-background-color: var(--octopus-secondary-lighter);
+    // Color of the player's button
+    --octopus-player-btn-bg: var(--octopus-btn-primary-bg);
+    // Color of the player's button
+    --octopus-player-btn-fg: var(--octopus-btn-primary-fg);
 
     // Smartlink
     --octopus-smartlink-title-color: var(--octopus-gray-text);

package/src/style/bootstrap.scss

@@ -153,10 +153,10 @@ input:not([class^="vs__"]), button:not([class^="vs__"]), select:not([class^="vs_
 			display: flex;
 			align-items: center;
 			justify-content: center;
-			background: var(--octopus-primary);
+			background: var(--octopus-btn-primary-bg);
 			border: 1px solid var(--octopus-primary);
 			border-radius: var(--octopus-border-radius) !important;
-			color: var(--octopus-color-on-primary) !important;
+			color: var(--octopus-btn-primary-fg) !important;
 			font-weight: 500;
 
 			&:not(.btn-on-dark):is(:focus, :hover, :active, .active){

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

@@ -1,8 +1,9 @@
 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 { describe, expect, it, vi } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 const options = [
     { id: 1, name: 'Alpha' },
@@ -10,66 +11,89 @@ const options = [
     { id: 3, name: 'Gamma' },
 ];
 
+// The dropdown is teleported to .octopus-app — helper to query it from the document.
+function getDropdown(): Element | null {
+    return document.body.querySelector('.octopus-multiselect-dropdown');
+}
+
 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.
+    let appElement: HTMLElement;
+
+    beforeEach(() => {
+        appElement = document.createElement('div');
+        appElement.className = 'octopus-app';
+        document.body.appendChild(appElement);
+    });
+
+    // Shared wrapper ref so afterEach can properly unmount it.
+    // Proper unmount lets Vue clean up the teleport target before the next test starts.
+    let wrapper: VueWrapper;
+    afterEach(() => {
+        wrapper?.unmount();
+        appElement.remove();
+    });
+
     it('renders label when provided', async () => {
-        const wrapper = await mount(OctopusMultiselect, {
+        wrapper = await mount(OctopusMultiselect, {
             props: { options, optionLabel: 'name', label: 'My label' },
         });
         expect(wrapper.find('label.form-label').text()).toBe('My label');
     });
 
     it('does not render label when not provided', async () => {
-        const wrapper = await mount(OctopusMultiselect, {
+        wrapper = await mount(OctopusMultiselect, {
             props: { options, optionLabel: 'name' },
         });
         expect(wrapper.find('label.form-label').exists()).toBe(false);
     });
 
     it('opens dropdown on input focus', async () => {
-        const wrapper = await mount(OctopusMultiselect, {
+        wrapper = await mount(OctopusMultiselect, {
             props: { options, optionLabel: 'name' },
         });
-        expect(wrapper.find('.octopus-multiselect-dropdown').exists()).toBe(false);
+        expect(getDropdown()).toBeNull();
         await wrapper.find('input').trigger('focus');
-        expect(wrapper.find('.octopus-multiselect-dropdown').exists()).toBe(true);
+        expect(getDropdown()).not.toBeNull();
     });
 
     it('shows "All" checkbox and one checkbox per option when open', async () => {
-        const wrapper = await mount(OctopusMultiselect, {
+        wrapper = await mount(OctopusMultiselect, {
             props: { options, optionLabel: 'name' },
         });
         await wrapper.find('input').trigger('focus');
-        const checkboxes = wrapper.findAll('input[type="checkbox"]');
+        const checkboxes = document.body.querySelectorAll('input[type="checkbox"]');
         // 1 for "All" + 3 for options
         expect(checkboxes).toHaveLength(4);
     });
 
     it('filters options locally by search query', async () => {
-        const wrapper = await mount(OctopusMultiselect, {
+        wrapper = await mount(OctopusMultiselect, {
             props: { options, optionLabel: 'name' },
         });
         await wrapper.find('input').trigger('focus');
         await wrapper.find('input').setValue('al');
         await wrapper.find('input').trigger('input');
-        const checkboxes = wrapper.findAll('input[type="checkbox"]');
+        const checkboxes = document.body.querySelectorAll('input[type="checkbox"]');
         // 1 for "All" + 1 matching "Alpha"
         expect(checkboxes).toHaveLength(2);
     });
 
     it('shows no-results message when filter matches nothing', async () => {
-        const wrapper = await mount(OctopusMultiselect, {
+        wrapper = await mount(OctopusMultiselect, {
             props: { options, optionLabel: 'name' },
         });
         await wrapper.find('input').trigger('focus');
         await wrapper.find('input').setValue('zzz');
         await wrapper.find('input').trigger('input');
-        expect(wrapper.find('.text-indic').exists()).toBe(true);
+        expect(document.body.querySelector('.text-indic')).not.toBeNull();
     });
 
     it('calls onSearch with current query and updates displayed options', async () => {
         const searchResult = [{ id: 4, name: 'Delta' }];
         const onSearch = vi.fn().mockResolvedValue(searchResult);
-        const wrapper = await mount(OctopusMultiselect, {
+        wrapper = await mount(OctopusMultiselect, {
             props: { options, optionLabel: 'name', onSearch },
         });
         await wrapper.find('input').trigger('focus');
@@ -80,48 +104,48 @@ describe('OctopusMultiselect', () => {
     });
 
     it('emits update:selected when toggling a single option', async () => {
-        const wrapper = await mount(OctopusMultiselect, {
+        wrapper = await mount(OctopusMultiselect, {
             props: { options, optionLabel: 'name', selected: [] },
         });
         await wrapper.find('input').trigger('focus');
-        const optionCheckboxes = wrapper.findAll('.octopus-multiselect-options input[type="checkbox"]');
-        await optionCheckboxes[0].trigger('input');
+        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([[options[0]]]);
     });
 
     it('deselects an already-selected option', async () => {
-        const wrapper = await mount(OctopusMultiselect, {
+        wrapper = await mount(OctopusMultiselect, {
             props: { options, optionLabel: 'name', selected: [options[0]] },
         });
         await wrapper.find('input').trigger('focus');
-        const optionCheckboxes = wrapper.findAll('.octopus-multiselect-options input[type="checkbox"]');
-        await optionCheckboxes[0].trigger('input');
+        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('toggleAll selects all displayed options', async () => {
-        const wrapper = await mount(OctopusMultiselect, {
+        wrapper = await mount(OctopusMultiselect, {
             props: { options, optionLabel: 'name', selected: [] },
         });
         await wrapper.find('input').trigger('focus');
-        const allCheckbox = wrapper.find('.octopus-multiselect-dropdown > .octopus-form-item input[type="checkbox"]');
-        await allCheckbox.trigger('input');
+        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 unknown[];
         expect(emitted).toHaveLength(3);
     });
 
     it('toggleAll deselects all displayed options when all are selected', async () => {
-        const wrapper = await mount(OctopusMultiselect, {
+        wrapper = await mount(OctopusMultiselect, {
             props: { options, optionLabel: 'name', selected: [...options] },
         });
         await wrapper.find('input').trigger('focus');
-        const allCheckbox = wrapper.find('.octopus-multiselect-dropdown > .octopus-form-item input[type="checkbox"]');
-        await allCheckbox.trigger('input');
+        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([[]]);
     });
 
     it('shows selected items in the selection display', async () => {
-        const wrapper = await mount(OctopusMultiselect, {
+        wrapper = await mount(OctopusMultiselect, {
             props: { options, optionLabel: 'name', selected: [options[0], options[1]] },
         });
         expect(wrapper.find('.octopus-multiselect-selection-text').text()).toBe('Alpha, Beta');
@@ -129,55 +153,55 @@ describe('OctopusMultiselect', () => {
     });
 
     it('shows overflow count badge when more than visible items are selected', async () => {
-        const wrapper = await mount(OctopusMultiselect, {
+        wrapper = await mount(OctopusMultiselect, {
             props: { options, optionLabel: 'name', selected: [...options] },
         });
         expect(wrapper.find('.octopus-multiselect-selection-count').exists()).toBe(true);
     });
 
     it('disables input when isDisabled is true', async () => {
-        const wrapper = await mount(OctopusMultiselect, {
+        wrapper = await mount(OctopusMultiselect, {
             props: { options, optionLabel: 'name', isDisabled: true },
         });
         expect(wrapper.find('input').attributes('disabled')).toBeDefined();
     });
 
     it('does not open dropdown when disabled', async () => {
-        const wrapper = await mount(OctopusMultiselect, {
+        wrapper = await mount(OctopusMultiselect, {
             props: { options, optionLabel: 'name', isDisabled: true },
         });
         await wrapper.find('input').trigger('focus');
-        expect(wrapper.find('.octopus-multiselect-dropdown').exists()).toBe(false);
+        expect(getDropdown()).toBeNull();
     });
 
     it('uses selectAllText as the "All" checkbox label when provided', async () => {
-        const wrapper = await mount(OctopusMultiselect, {
+        wrapper = await mount(OctopusMultiselect, {
             props: { options, optionLabel: 'name', selectAllText: 'Tout' },
         });
         await wrapper.find('input').trigger('focus');
-        const allCheckboxLabel = wrapper.find('.octopus-multiselect-dropdown > .octopus-form-item label');
-        expect(allCheckboxLabel.text()).toBe('Tout');
+        const allCheckboxLabel = document.body.querySelector('.octopus-multiselect-dropdown > .octopus-form-item label')!;
+        expect(allCheckboxLabel.textContent?.trim()).toBe('Tout');
     });
 
     it('deselects by optionKey even when selected objects are different references', async () => {
         const selected = [{ id: 1, name: 'Alpha' }];
-        const wrapper = await mount(OctopusMultiselect, {
+        wrapper = await mount(OctopusMultiselect, {
             props: { options, optionLabel: 'name', optionKey: 'id', selected },
         });
         await wrapper.find('input').trigger('focus');
-        const optionCheckboxes = wrapper.findAll('.octopus-multiselect-options input[type="checkbox"]');
-        await optionCheckboxes[0].trigger('input');
+        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('toggleAll deselects by optionKey even when selected objects are different references', async () => {
         const selected = options.map((o) => ({ ...o }));
-        const wrapper = await mount(OctopusMultiselect, {
+        wrapper = await mount(OctopusMultiselect, {
             props: { options, optionLabel: 'name', optionKey: 'id', selected },
         });
         await wrapper.find('input').trigger('focus');
-        const allCheckbox = wrapper.find('.octopus-multiselect-dropdown > .octopus-form-item input[type="checkbox"]');
-        await allCheckbox.trigger('input');
+        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([[]]);
     });
 });

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

@@ -1,8 +1,9 @@
 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 { describe, expect, it } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 
 const options = [
     { id: 1, name: 'Alpha' },
@@ -10,123 +11,146 @@ const options = [
     { id: 3, name: 'Gamma' },
 ];
 
+// The dropdown is teleported to .octopus-app — helper to query it from the document.
+function getDropdown(): Element | null {
+    return document.body.querySelector('.octopus-select-dropdown');
+}
+
 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.
+    let appElement: HTMLElement;
+
+    beforeEach(() => {
+        appElement = document.createElement('div');
+        appElement.className = 'octopus-app';
+        document.body.appendChild(appElement);
+    });
+
+    // Shared wrapper ref so afterEach can properly unmount it.
+    // Proper unmount lets Vue clean up the teleport target before the next test starts.
+    let wrapper: VueWrapper;
+    afterEach(() => {
+        wrapper?.unmount();
+        appElement.remove();
+    });
+
     it('renders label when provided', async () => {
-        const wrapper = await mount(OctopusSelect, {
+        wrapper = await mount(OctopusSelect, {
             props: { options, optionLabel: 'name', label: 'My label' },
         });
         expect(wrapper.find('label.form-label').text()).toBe('My label');
     });
 
     it('does not render label when not provided', async () => {
-        const wrapper = await mount(OctopusSelect, {
+        wrapper = await mount(OctopusSelect, {
             props: { options, optionLabel: 'name' },
         });
         expect(wrapper.find('label.form-label').exists()).toBe(false);
     });
 
     it('opens dropdown on input focus', async () => {
-        const wrapper = await mount(OctopusSelect, {
+        wrapper = await mount(OctopusSelect, {
             props: { options, optionLabel: 'name' },
         });
-        expect(wrapper.find('.octopus-select-dropdown').exists()).toBe(false);
+        expect(getDropdown()).toBeNull();
         await wrapper.find('input').trigger('focus');
-        expect(wrapper.find('.octopus-select-dropdown').exists()).toBe(true);
+        expect(getDropdown()).not.toBeNull();
     });
 
     it('shows one button per option when open', async () => {
-        const wrapper = await mount(OctopusSelect, {
+        wrapper = await mount(OctopusSelect, {
             props: { options, optionLabel: 'name' },
         });
         await wrapper.find('input').trigger('focus');
-        const optionButtons = wrapper.findAll('.octopus-select-option');
+        const optionButtons = document.body.querySelectorAll('.octopus-select-option');
         expect(optionButtons).toHaveLength(3);
-        expect(optionButtons[0].text()).toBe('Alpha');
+        expect(optionButtons[0].textContent?.trim()).toBe('Alpha');
     });
 
     it('filters options locally by search query', async () => {
-        const wrapper = await mount(OctopusSelect, {
+        wrapper = await mount(OctopusSelect, {
             props: { options, optionLabel: 'name' },
         });
         await wrapper.find('input').trigger('focus');
         await wrapper.find('input').setValue('al');
         await wrapper.find('input').trigger('input');
-        expect(wrapper.findAll('.octopus-select-option')).toHaveLength(1);
+        expect(document.body.querySelectorAll('.octopus-select-option')).toHaveLength(1);
     });
 
     it('shows no-results message when filter matches nothing', async () => {
-        const wrapper = await mount(OctopusSelect, {
+        wrapper = await mount(OctopusSelect, {
             props: { options, optionLabel: 'name' },
         });
         await wrapper.find('input').trigger('focus');
         await wrapper.find('input').setValue('zzz');
         await wrapper.find('input').trigger('input');
-        expect(wrapper.find('.text-indic').exists()).toBe(true);
+        expect(document.body.querySelector('.text-indic')).not.toBeNull();
     });
 
     it('emits update:value with the clicked option', async () => {
-        const wrapper = await mount(OctopusSelect, {
+        wrapper = await mount(OctopusSelect, {
             props: { options, optionLabel: 'name' },
         });
         await wrapper.find('input').trigger('focus');
-        await wrapper.findAll('.octopus-select-option')[1].trigger('click');
+        await new DOMWrapper(document.body.querySelectorAll('.octopus-select-option')[1]).trigger('click');
         expect(wrapper.emitted('update:value')?.[0]).toEqual([options[1]]);
     });
 
     it('closes dropdown after selecting an option', async () => {
-        const wrapper = await mount(OctopusSelect, {
+        wrapper = await mount(OctopusSelect, {
             props: { options, optionLabel: 'name' },
         });
         await wrapper.find('input').trigger('focus');
-        await wrapper.findAll('.octopus-select-option')[0].trigger('click');
-        expect(wrapper.find('.octopus-select-dropdown').exists()).toBe(false);
+        await new DOMWrapper(document.body.querySelectorAll('.octopus-select-option')[0]).trigger('click');
+        expect(getDropdown()).toBeNull();
     });
 
     it('shows selected item label in the field when closed', async () => {
-        const wrapper = await mount(OctopusSelect, {
+        wrapper = await mount(OctopusSelect, {
             props: { options, optionLabel: 'name', value: options[0] },
         });
         expect(wrapper.find('.octopus-select-value').text()).toBe('Alpha');
     });
 
     it('marks the selected option with the selected class', async () => {
-        const wrapper = await mount(OctopusSelect, {
+        wrapper = await mount(OctopusSelect, {
             props: { options, optionLabel: 'name', value: options[0] },
         });
         await wrapper.find('.octopus-select-field').trigger('click');
-        const optionButtons = wrapper.findAll('.octopus-select-option');
-        expect(optionButtons[0].classes()).toContain('selected');
-        expect(optionButtons[1].classes()).not.toContain('selected');
+        const optionButtons = document.body.querySelectorAll('.octopus-select-option');
+        expect(optionButtons[0].classList).toContain('selected');
+        expect(optionButtons[1].classList).not.toContain('selected');
     });
 
     it('deselects the current option by default (allowDeselect defaults to true)', async () => {
-        const wrapper = await mount(OctopusSelect, {
+        wrapper = await mount(OctopusSelect, {
             props: { options, optionLabel: 'name', optionKey: 'id', value: options[0] },
         });
         await wrapper.find('.octopus-select-field').trigger('click');
-        await wrapper.findAll('.octopus-select-option')[0].trigger('click');
+        await new DOMWrapper(document.body.querySelectorAll('.octopus-select-option')[0]).trigger('click');
         expect(wrapper.emitted('update:value')?.[0]).toEqual([undefined]);
     });
 
     it('does not deselect when allowDeselect is false', async () => {
-        const wrapper = await mount(OctopusSelect, {
+        wrapper = await mount(OctopusSelect, {
             props: { options, optionLabel: 'name', optionKey: 'id', value: options[0], allowDeselect: false as boolean },
         });
         await wrapper.find('.octopus-select-field').trigger('click');
-        await wrapper.findAll('.octopus-select-option')[0].trigger('click');
+        await new DOMWrapper(document.body.querySelectorAll('.octopus-select-option')[0]).trigger('click');
         expect(wrapper.emitted('update:value')?.[0]).toEqual([options[0]]);
     });
 
     it('does not open dropdown when disabled', async () => {
-        const wrapper = await mount(OctopusSelect, {
+        wrapper = await mount(OctopusSelect, {
             props: { options, optionLabel: 'name', isDisabled: true },
         });
         await wrapper.find('input').trigger('focus');
-        expect(wrapper.find('.octopus-select-dropdown').exists()).toBe(false);
+        expect(getDropdown()).toBeNull();
     });
 
     it('disables input when isDisabled is true', async () => {
-        const wrapper = await mount(OctopusSelect, {
+        wrapper = await mount(OctopusSelect, {
             props: { options, optionLabel: 'name', isDisabled: true },
         });
         expect(wrapper.find('input').attributes('disabled')).toBeDefined();
@@ -134,10 +158,11 @@ describe('OctopusSelect', () => {
 
     it('matches by optionKey when checking selection', async () => {
         const value = { id: 1, name: 'Alpha' };
-        const wrapper = await mount(OctopusSelect, {
+        wrapper = await mount(OctopusSelect, {
             props: { options, optionLabel: 'name', optionKey: 'id', value },
         });
         await wrapper.find('.octopus-select-field').trigger('click');
-        expect(wrapper.findAll('.octopus-select-option')[0].classes()).toContain('selected');
+        const optionButtons = document.body.querySelectorAll('.octopus-select-option');
+        expect(optionButtons[0].classList).toContain('selected');
     });
 });