fix: cv-dropdown v-model does not clear caption when set to empty

carbon-design-system · Mar 30, 2024 · b01cf04 · b01cf04
1 parent dd069f4
commit b01cf04
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 0 deletions.
diff --git a/src/components/CvDropdown/CvDropdown.stories.mdx b/src/components/CvDropdown/CvDropdown.stories.mdx
@@ -129,14 +129,20 @@ const vmodelTemplate = `
     <cv-dropdown-item value="mysterious">The Armorer</cv-dropdown-item>
     <cv-dropdown-item value="bounty-hunter">Greef Karga</cv-dropdown-item>
  </cv-dropdown>
+ <div style="margin-top:2rem; background-color: #888888;  padding:1rem">
  <div>V-Model value: {{ myValue }}</div>
   <select v-model="myValue">
     <option value="mando">Mandalorian</option>
     <option value="nite-owl">Bo-Katan</option>
     <option value="baby-yoda">Grogu</option>
     <option value="mysterious">Armorer</option>
     <option value="bounty-hunter">Karga</option>
+    <option value="none">None</option>
   </select>
+  <div>
+  <button @click="myValue = undefined">Clear value</button>
+  </div>
+  </div>
 </div>
 `;
 const skeletonTemplate = `

diff --git a/src/components/CvDropdown/CvDropdown.vue b/src/components/CvDropdown/CvDropdown.vue
@@ -282,6 +282,7 @@ watch(
   () => props.modelValue,
   () => {
     dataValue.value = props.modelValue;
+    dataCaption.value = undefined;
   }
 );
 watch(dataValue, () => {