diff --git a/packages/components/src/components/dropdown-select/dropdown-select.tsx b/packages/components/src/components/dropdown-select/dropdown-select.tsx
index f7ccc3468a..a76cef35ae 100644
--- a/packages/components/src/components/dropdown-select/dropdown-select.tsx
+++ b/packages/components/src/components/dropdown-select/dropdown-select.tsx
@@ -399,6 +399,14 @@ export class DropdownSelect {
       readOptions(this.hostElement).find(({ value }) => value === this.value) ||
       ({} as any)
     ).ItemElement;
+    const hasEmptyValueElement =
+      (
+        readOptions(this.hostElement).find(
+          ({ value }) => value === this.value
+        ) || ({} as any)
+      ).value === ''
+        ? true
+        : false;
     const helperTextId = `helper-message-${generateUniqueId()}`;
     const ariaDescribedByAttr = { 'aria-describedBy': helperTextId };
 
@@ -434,7 +442,9 @@ export class DropdownSelect {
               {...(this.helperText ? ariaDescribedByAttr : {})}
               {...(this.invalid ? { 'aria-invalid': 'true' } : {})}
             >
-              <span part="combobox-value">{ValueElement}</span>
+              <span part="combobox-value">
+                {hasEmptyValueElement ? '' : ValueElement}
+              </span>
             </div>
             <div part="listbox-pad" ref={(el) => (this.listboxPadEl = el)}>
               <div part="listbox-scroll-container">