fix #2508 MultiSelect Dropdown out of screen bounds

frontend/js/components/VSelect.vue

@@ -21,6 +21,8 @@
               :requiredValue="required"
               :maxHeight="maxHeight"
               :disabled="disabled"
+              :calculate-position="withPopper"
+              append-to-body
               @input="updateValue"
               @search="getOptions"
           >
@@ -37,8 +39,22 @@
   </div>
 </template>
 
+<style>
+  .vs__dropdown-menu {
+    transition: none;
+  }
+
+  .vs__dropdown-menu[data-popper-placement='top'] {
+    border-radius: 4px 4px 0 0;
+    border-top-style: solid;
+    border-bottom-style: none;
+    box-shadow: 0 -3px 6px rgba(0, 0, 0, 0.15);
+  }
+</style>
+
 <script>
   import debounce from 'lodash/debounce'
+  import { createPopper } from '@popperjs/core'
 
   // check full options of the vueSelect here : http://sagalbot.github.io/vue-select/
   import extendedVSelect from '@/components/VSelect/ExtendedVSelect.vue'
@@ -135,7 +151,8 @@
       return {
         value: this.selected,
         currentOptions: this.options,
-        ajaxUrl: this.endpoint
+        ajaxUrl: this.endpoint,
+        placement: 'bottom',
       }
     },
     watch: {
@@ -254,7 +271,34 @@
           // error callback
           loading(false)
         })
-      }, 500)
+      }, 500),
+      withPopper(dropdownList, component, { width }) {
+        // position top/bottom taken from https://vue-select.org/guide/positioning.html#popper-js-integration
+        dropdownList.style.width = width
+        const popper = createPopper(component.$refs.toggle, dropdownList, {
+          placement: this.placement,
+          modifiers: [
+            {
+              name: 'offset',
+              options: {
+                offset: [0, -1],
+              },
+            },
+            {
+              name: 'toggleClass',
+              enabled: true,
+              phase: 'write',
+              fn({ state }) {
+                component.$el.classList.toggle(
+                  'drop-up',
+                  state.placement === 'top'
+                )
+              },
+            },
+          ],
+        })
+        return () => popper.destroy()
+      },
     }
   }
 </script>

package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@alpinejs/mask": "^3.13.5",
+    "@floating-ui/vue": "^1.1.5",
     "@tiptap/extension-hard-break": "^2.2.1",
     "@tiptap/extension-horizontal-rule": "^2.2.1",
     "@tiptap/extension-link": "^2.2.1",