diff --git a/projects/common-form-elements/src/lib/dynamic-dropdown/dynamic-dropdown.component.html b/projects/common-form-elements/src/lib/dynamic-dropdown/dynamic-dropdown.component.html
index 8105b7ef6630de20185256db6298478dfb459048..985401b596c978f76c62317ce22ceb4dc3629af2 100644
--- a/projects/common-form-elements/src/lib/dynamic-dropdown/dynamic-dropdown.component.html
+++ b/projects/common-form-elements/src/lib/dynamic-dropdown/dynamic-dropdown.component.html
@@ -6,15 +6,15 @@
           <input [(ngModel)]="searchInput" (keyup)="filterItem()" (click)="showAllList()" class="searchbox-input" type="text" [hidden]="!isSearchable" autocomplete="off">
           <label *ngIf="!showSelectdItem && isSearchable && !hidePlaceholder" for="searchbox-input" class="float-label">{{placeholder}}</label>
           <label *ngIf="!showSelectdItem && !isSearchable" for="searchbox-input" class="not-searchable-label">{{placeholder}}</label>
-          <label *ngIf="showSelectdItem && isSearchable && formControlRef.value?.length" for="searchbox-input" class="float-label">{{showSelectdItem}}</label>
-          <label *ngIf="showSelectdItem && !isSearchable && formControlRef.value?.length" for="searchbox-input" class="not-searchable-label">{{showSelectdItem}}</label>
+          <label *ngIf="showSelectdItem && isSearchable && formControlRef.value?.length" for="searchbox-input" class="float-label">{{showSelectdItem.name || showSelectdItem}}</label>
+          <label *ngIf="showSelectdItem && !isSearchable" for="searchbox-input" class="not-searchable-label">{{showSelectdItem.name || showSelectdItem}}</label>
           <label *ngIf="field.default && !showSelectdItem" for="searchbox-input" class="not-searchable-label">{{field.default}}</label>
       </div>
       <sb-icon-dropdown class="dropdown-icon"></sb-icon-dropdown>
       <div [hidden]="!showDropdown">
       <ul id="dd-dropdown" class="dd-dropdown-ul">
         <ng-container *ngIf="field.range && isOptionsArrayMap(field.range) && !field.association">
-          <li class="dd-dropdown-li optionsArrayMap" *ngFor="let option of field.range" (click)="addSelected(option)" [value]="getOptionValueForRange(option, 'map')">{{option}}</li>
+          <li class="dd-dropdown-li optionsArrayMap" *ngFor="let option of field.range" (click)="addSelected(option); onSubmit();" [value]="getOptionValueForRange(option, 'map')">{{option.name || option}}</li>
         </ng-container>
         <ng-container *ngIf="field.range && isOptionsArray(field.range) && !isOptionsArrayMap(field.range) && !field.association">
           <li class="dd-dropdown-li optionsArray" *ngFor="let option of field.range" (click)="addSelected(option)" [value]="getOptionValueForRange(option, 'array')">{{option.name || option}}</li>
diff --git a/projects/common-form-elements/src/lib/dynamic-dropdown/dynamic-dropdown.component.ts b/projects/common-form-elements/src/lib/dynamic-dropdown/dynamic-dropdown.component.ts
index eccb0be0f434012f9a24b80bca44efe02d2499df..0c82989687f96558683f8bdc13791dc7ed0279c2 100644
--- a/projects/common-form-elements/src/lib/dynamic-dropdown/dynamic-dropdown.component.ts
+++ b/projects/common-form-elements/src/lib/dynamic-dropdown/dynamic-dropdown.component.ts
@@ -42,6 +42,7 @@ export class DynamicDropdownComponent implements OnInit, OnChanges, OnDestroy {
   public hidePlaceholder:boolean = false;
   private dispose$ = new Subject<undefined>();
   public editable:boolean;
+  public tempValue:any;
 
   options$?: Observable<FieldConfigOption<any>[]>;
   contextValueChangesSubscription?: Subscription;
@@ -80,6 +81,10 @@ export class DynamicDropdownComponent implements OnInit, OnChanges, OnDestroy {
       this.editable = this.field.editable;
     }
 
+    if (!_.isEmpty(this.field.output)) {
+      this.formControlRef.output = this.field.output;
+    }
+
     // if (this.context) {
       // this.contextValueChangesSubscription = this.context.valueChanges.pipe(
       //   tap(() => {
@@ -100,6 +105,7 @@ export class DynamicDropdownComponent implements OnInit, OnChanges, OnDestroy {
     }
 
     if (!_.isEmpty(this.depends)) {
+     this.resetTempValue();
      this.contextValueChangesSubscription =  merge(..._.map(this.depends, depend => depend.valueChanges)).pipe(
       tap((value: any) => {
         this.latestParentValue = value;
@@ -153,6 +159,8 @@ export class DynamicDropdownComponent implements OnInit, OnChanges, OnDestroy {
     this.showDropdown = false;
     this.searchInput='';
 
+    this.setTempValue(selectedItem);
+
     if (this.field && this.field.range) {
       this.field.range.forEach(element => {
         let rangeResult = ValueComparator.valueComparator(element, this.field.default);
@@ -313,6 +321,7 @@ export class DynamicDropdownComponent implements OnInit, OnChanges, OnDestroy {
 
     if (!this.searchInput) {
       this.field.range = this.options;
+      this.setTempValue(this.formControlRef.value);
     } else {
       this.field.range = this.field.range.filter(val => {
           // Search the option and return match result
@@ -322,4 +331,20 @@ export class DynamicDropdownComponent implements OnInit, OnChanges, OnDestroy {
       });
     }
   }
+  onSubmit(){
+    const finalValue = this.tempValue;
+    this.formControlRef.patchValue(finalValue);
+    this.formControlRef.markAsDirty();
+  }
+
+  private setTempValue(value: any) {
+    if (value) {
+        this.tempValue = value.name || value;
+      }
+  }
+
+  resetTempValue() {
+    this.tempValue = null;
+    this.default = [];
+  }
 }