From bd9dc920deb3bc1a27d3046293cba38c4c0f16bd Mon Sep 17 00:00:00 2001
From: Pedro Amorim <pedro.amorim@openfifth.co.uk>
Date: Wed, 1 Oct 2025 08:40:34 +0000
Subject: [PATCH] Bug 37762: VueJS framework: Allow styling v-select dropdown

Signed-off-by: Jason Robb <jrobb@sekls.org>
Signed-off-by: Lisette Scheer <lisette@bywatersolutions.com>
Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
---
 .../prog/js/vue/components/FormElement.vue         | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/FormElement.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/FormElement.vue
index 566e309d0d..6c42e1526c 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/FormElement.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/FormElement.vue
@@ -276,6 +276,15 @@ export default {
                 return disabledAttr || false;
             }
         });
+        const getVselectStyle = computed(() => {
+            if (props.attr.vselectStyle) {
+                return props.attr.vselectStyle;
+            } else if (props.vselectStyle) {
+                return props.vselectStyle;
+            }
+            return { dropdownMaxHeight: "350px", dropdownMinWidth: "160px" }; //v-select defaults
+        });
+
         const fieldInputError = ref(false);
         const checkForInputError = () => {
             if (props.attr.formErrorHandler) {
@@ -293,6 +302,7 @@ export default {
             getElementId,
             requiredComponent,
             selectOptions,
+            getVselectStyle,
             disabled,
             fieldInputError,
             checkForInputError,
@@ -328,4 +338,8 @@ input[type="number"] {
 .filters > input[type="radio"] {
     min-width: 0 !important;
 }
+:deep() {
+    --vs-dropdown-max-height: v-bind(getVselectStyle.dropdownMaxHeight);
+    --vs-dropdown-min-width: v-bind(getVselectStyle.dropdownMinWidth);
+}
 </style>