From b38f8c5ee36c2a482de7973a698ba4ea4927e7ae Mon Sep 17 00:00:00 2001
From: Sebastian Zoglowek <55794780+zoglo@users.noreply.github.com>
Date: Tue, 24 Feb 2026 10:40:28 +0100
Subject: [PATCH] Add decoupled styles for dropdowns

---
 src/styles/choices.scss | 32 ++++++++++++++++++++------------
 1 file changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/styles/choices.scss b/src/styles/choices.scss
index ebb7313f..442a82cd 100644
--- a/src/styles/choices.scss
+++ b/src/styles/choices.scss
@@ -65,6 +65,14 @@ $choices-placeholder-opacity: 0.5 !default;
     overflow: visible;
   }
 
+  // Only apply the normal positioning for dropdowns that are not detached from the choices-selector
+  &.is-flipped {
+    .#{$choices-selector}__list {
+      top: auto;
+      bottom: 100%;
+    }
+  }
+
   &.is-disabled {
     :is(.#{$choices-selector}__inner, .#{$choices-selector}__input) {
       background-color: var(--choices-bg-color-disabled, #{$choices-bg-color-disabled});
@@ -90,14 +98,6 @@ $choices-placeholder-opacity: 0.5 !default;
   .#{$choices-selector}__inner {
     padding-bottom: var(--choices-inner-one-padding, #{$choices-inner-one-padding});
   }
-  .#{$choices-selector}__input {
-    display: block;
-    width: var(--choices-width, #{$choices-width});
-    padding: var(--choices-dropdown-item-padding, #{$choices-dropdown-item-padding});
-    border-bottom: var(--choices-base-border, #{$choices-base-border}) var(--choices-keyline-color, #{$choices-keyline-color});
-    background-color: var(--choices-bg-color-dropdown, #{$choices-bg-color-dropdown});
-    margin: 0;
-  }
   .#{$choices-selector}__button {
     background-image: var(--choices-icon-cross-inverse, #{$choices-icon-cross-inverse});
     padding: 0;
@@ -157,6 +157,17 @@ $choices-placeholder-opacity: 0.5 !default;
   }
 }
 
+.#{$choices-selector}__dropdown--single {
+  .#{$choices-selector}__input {
+    display: block;
+    width: var(--choices-width, #{$choices-width});
+    padding: var(--choices-dropdown-item-padding, #{$choices-dropdown-item-padding});
+    border-bottom: var(--choices-base-border, #{$choices-base-border}) var(--choices-keyline-color, #{$choices-keyline-color});
+    background-color: var(--choices-bg-color-dropdown, #{$choices-bg-color-dropdown});
+    margin: 0;
+  }
+}
+
 .#{$choices-selector}:is([data-type*='select-multiple'], [data-type*='text']) {
   .#{$choices-selector}__inner {
     cursor: text;
@@ -205,7 +216,6 @@ $choices-placeholder-opacity: 0.5 !default;
     border-color: var(--choices-invalid-color, #{$choices-invalid-color});
   }
 
-  /** ToDo: rewrite to be applied to the dropdown */
   .is-flipped.is-open & {
     border-radius: 0 0 var(--choices-border-radius, #{$choices-border-radius}) var(--choices-border-radius, #{$choices-border-radius});
   }
@@ -296,11 +306,9 @@ $choices-placeholder-opacity: 0.5 !default;
   }
 
   &.is-flipped {
-    top: auto;
-    bottom: 100%;
     margin-top: 0;
     margin-bottom: -1px;
-    border-radius: 0.25rem 0.25rem 0 0;
+    border-radius: var(--choices-border-radius, #{$choices-border-radius}) var(--choices-border-radius, #{$choices-border-radius}) 0 0;
   }
   .#{$choices-selector}__list {
     position: relative;