diff --git a/packages/stencil-library/src/components/dnn-autocomplete/dnn-autocomplete.tsx b/packages/stencil-library/src/components/dnn-autocomplete/dnn-autocomplete.tsx
index f8a0c2514..d05bb4297 100644
--- a/packages/stencil-library/src/components/dnn-autocomplete/dnn-autocomplete.tsx
+++ b/packages/stencil-library/src/components/dnn-autocomplete/dnn-autocomplete.tsx
@@ -110,10 +110,7 @@ export class DnnAutocomplete {
 
   @Watch("value")
   handleValueChange(newValue: string) {
-    this.displayValue = newValue;
-
-    // Find the index of the selected item
-    this.selectedIndex = this.suggestions.findIndex(s => s.value === newValue);
+    this.selectItemFromValue(newValue);
   }
   
   /** attacth the internals for form validation */
@@ -128,6 +125,12 @@ export class DnnAutocomplete {
       this.focused = false;
     }
   }
+
+  componentDidLoad() {
+    if (this.value != ""){
+      this.selectItemFromValue(this.value);
+    }
+  }
   
   componentDidRender(){
     if (this.focused && this.suggestions.length > 0 && !this.positionInitialized){
@@ -164,6 +167,11 @@ export class DnnAutocomplete {
     this.searchQueryChanged.emit(value);
   }
 
+  private selectItemFromValue(value: string) {
+    this.selectedIndex = this.suggestions.findIndex(s => s.value === value);
+    this.displayValue = this.selectedIndex != -1 ? this.suggestions[this.selectedIndex].label : value;
+  }
+
   private handleInvalid(): void {
     this.valid = false;
     if (this.customValidityMessage == undefined) {