From d068af6b0a150c26dd5133d361446165b2b39ca6 Mon Sep 17 00:00:00 2001
From: Marghen <berlanda.marco@gmail.com>
Date: Fri, 14 Nov 2025 12:56:50 +0100
Subject: [PATCH 1/2] feat: fix CvDropdown overflow flashing when expanding

---
 src/components/CvDropdown/CvDropdown.vue | 33 ++++++++++++++++++++----
 1 file changed, 28 insertions(+), 5 deletions(-)

diff --git a/src/components/CvDropdown/CvDropdown.vue b/src/components/CvDropdown/CvDropdown.vue
index 61cbd81db..3bc717baf 100644
--- a/src/components/CvDropdown/CvDropdown.vue
+++ b/src/components/CvDropdown/CvDropdown.vue
@@ -36,7 +36,7 @@
           `${carbonPrefix}--label`,
           { [`${carbonPrefix}--label--disabled`]: disabled },
         ]"
-        >{{ label }}</label
+      >{{ label }}</label
       >
 
       <div
@@ -110,14 +110,17 @@
           ref="dropList"
           :aria-hidden="!open ? 'true' : 'false'"
           :aria-labelledby="`${uid}-label`"
-          :class="`${carbonPrefix}--list-box__menu`"
+          :class="[
+            `${carbonPrefix}--list-box__menu`,
+            { 'cv-dropdown__menu--transition-done': transitionDone },
+          ]"
           role="menu"
           tabindex="-1"
         >
           <slot>
             <cv-dropdown-item v-for="item in items" :key="item" :value="item">{{
-              item
-            }}</cv-dropdown-item>
+                item
+              }}</cv-dropdown-item>
           </slot>
         </ul>
       </div>
@@ -268,6 +271,7 @@ provide('dropdown-caption', dataCaption);
 const itemsList = ref([]);
 provide('dropdown-items', itemsList);
 const open = ref(false);
+const transitionDone = ref(false);
 const data = reactive({
   isHelper: false,
   isInvalid: undefined,
@@ -301,6 +305,15 @@ watch(dataValue, () => {
 });
 watch(open, () => {
   focusItem.value = '';
+  if (open.value) {
+    // Wait for the transition to complete before allowing overflow
+    transitionDone.value = false;
+    setTimeout(() => {
+      transitionDone.value = true;
+    }, 200); // Increase delay to ensure animation completes
+  } else {
+    transitionDone.value = false;
+  }
 });
 const ariaLabeledBy = computed(() => {
   if (props.label) {
@@ -401,7 +414,7 @@ function onClick(ev) {
     while (
       !target.classList.contains(`${carbonPrefix}--dropdown-link`) &&
       dropList.value?.contains(target)
-    ) {
+      ) {
       target = target.parentNode; // try next one up
     }
 
@@ -412,3 +425,13 @@ function onClick(ev) {
   }
 }
 </script>
+
+<style lang="scss">
+.bx--list-box .bx--list-box__menu {
+  overflow-y: hidden !important;
+}
+
+.bx--list-box--expanded .bx--list-box__menu.cv-dropdown__menu--transition-done {
+  overflow-y: auto !important;
+}
+</style>

From efd8a76c6b519a5328b361e4e7bed6bf1f5ae01b Mon Sep 17 00:00:00 2001
From: Marghen <berlanda.marco@gmail.com>
Date: Fri, 14 Nov 2025 13:28:37 +0100
Subject: [PATCH 2/2] fix: fix linting errors

---
 src/components/CvDropdown/CvDropdown.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/CvDropdown/CvDropdown.vue b/src/components/CvDropdown/CvDropdown.vue
index 3bc717baf..015e62026 100644
--- a/src/components/CvDropdown/CvDropdown.vue
+++ b/src/components/CvDropdown/CvDropdown.vue
@@ -36,8 +36,9 @@
           `${carbonPrefix}--label`,
           { [`${carbonPrefix}--label--disabled`]: disabled },
         ]"
-      >{{ label }}</label
       >
+        {{ label }}
+      </label>
 
       <div
         ref="listBox"
@@ -119,8 +120,8 @@
         >
           <slot>
             <cv-dropdown-item v-for="item in items" :key="item" :value="item">{{
-                item
-              }}</cv-dropdown-item>
+              item
+            }}</cv-dropdown-item>
           </slot>
         </ul>
       </div>
@@ -414,7 +415,7 @@ function onClick(ev) {
     while (
       !target.classList.contains(`${carbonPrefix}--dropdown-link`) &&
       dropList.value?.contains(target)
-      ) {
+    ) {
       target = target.parentNode; // try next one up
     }