diff --git a/lib/core/card-view/card-view.module.ts b/lib/core/card-view/card-view.module.ts
index 8dcd4e30b9..e683cf3e38 100644
--- a/lib/core/card-view/card-view.module.ts
+++ b/lib/core/card-view/card-view.module.ts
@@ -17,7 +17,7 @@
 
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
@@ -51,6 +51,7 @@ import { SelectFilterInputComponent } from './components/card-view-selectitem/se
     imports: [
         CommonModule,
         FormsModule,
+        ReactiveFormsModule,
         FlexLayoutModule,
         TranslateModule,
         MatDatepickerModule,
diff --git a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.html b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.html
index 834b0db520..c1f8aabe60 100644
--- a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.html
+++ b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.html
@@ -13,10 +13,8 @@
                    *ngIf="!property.multiline"
                    class="adf-property-value"
                    [placeholder]="property.default"
-                   [(ngModel)]="editedValue"
-                   (blur)="update()"
-                   (keydown.enter)="update()"
-                   [disabled]="!isEditable"
+                   [value]="editedValue"
+                   [formControl]="textInput"
                    (dblclick)="copyToClipboard(property.displayValue)"
                    matTooltipShowDelay="1000"
                    [matTooltip]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"
@@ -29,10 +27,7 @@
                       matAutosizeMaxRows="5"
                       class="adf-property-value"
                       [placeholder]="property.default"
-                      [(ngModel)]="editedValue"
-                      (blur)="update()"
-                      (keydown.enter)="update()"
-                      [disabled]="!isEditable"
+                      [formControl]="textInput"
                       [attr.data-automation-id]="'card-textitem-value-' + property.key"></textarea>
             <button mat-button
                     matSuffix
diff --git a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts
index 6222dc892d..2b59bf5ff9 100644
--- a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts
+++ b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, tick, fakeAsync, async, discardPeriodicTasks } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { CardViewTextItemModel } from '../../models/card-view-textitem.model';
 import { CardViewUpdateService } from '../../services/card-view-update.service';
@@ -25,7 +25,7 @@ import { CoreTestingModule } from '../../../testing/core.testing.module';
 import { CardViewItemFloatValidator, CardViewItemIntValidator, CardViewIntItemModel, CardViewFloatItemModel } from '@alfresco/adf-core';
 import { MatChipsModule } from '@angular/material/chips';
 import { ClipboardService } from '../../../clipboard/clipboard.service';
-import { DebugElement } from '@angular/core';
+import { DebugElement, SimpleChange } from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
 import { CardViewItemValidator } from '../../interfaces/card-view-item-validator.interface';
 
@@ -61,10 +61,10 @@ describe('CardViewTextItemComponent', () => {
                 default: 'FAKE-DEFAULT-KEY',
                 editable: false
             });
+            component.ngOnChanges({ property: new SimpleChange(null, null, true) });
         });
 
         it('should render the label and value', async () => {
-            component.ngOnChanges();
             fixture.detectChanges();
             await fixture.whenStable();
 
@@ -82,10 +82,9 @@ describe('CardViewTextItemComponent', () => {
                 value: { id: 123, displayName: 'User Name' },
                 key: 'namekey'
             });
-            component.ngOnChanges();
+            component.ngOnChanges({ property: new SimpleChange(null, null, true) });
             fixture.detectChanges();
             await fixture.whenStable();
-
             const value = getTextFieldValue(component.property.key);
             expect(value).toBe('User Name');
         });
@@ -99,10 +98,9 @@ describe('CardViewTextItemComponent', () => {
                 editable: false
             });
             component.displayEmpty = true;
-            component.ngOnChanges();
+            component.ngOnChanges({ property: new SimpleChange(null, null, true) });
             fixture.detectChanges();
             await fixture.whenStable();
-
             const value = getTextFieldValue(component.property.key);
             expect(value).toBe('FAKE-DEFAULT-KEY');
         });
@@ -116,10 +114,9 @@ describe('CardViewTextItemComponent', () => {
                 editable: true
             });
             component.editable = true;
-            component.ngOnChanges();
+            component.ngOnChanges({ property: new SimpleChange(null, null, true) });
             fixture.detectChanges();
             await fixture.whenStable();
-
             const value = getTextFieldValue(component.property.key);
             expect(value).toBe('FAKE-DEFAULT-KEY');
         });
@@ -127,18 +124,17 @@ describe('CardViewTextItemComponent', () => {
         it('should render value when editable:true', async () => {
             component.editable = true;
             component.property.editable = true;
-            component.ngOnChanges();
             fixture.detectChanges();
             await fixture.whenStable();
-
             const value = getTextFieldValue(component.property.key);
             expect(value).toBe('Lorem ipsum');
+
         });
 
         it('should render the edit icon in case of editable:true', () => {
             component.editable = true;
             component.property.editable = true;
-            component.ngOnChanges();
+
             fixture.detectChanges();
 
             const editIcon = fixture.debugElement.query(By.css('.adf-textitem-edit-icon'));
@@ -147,10 +143,8 @@ describe('CardViewTextItemComponent', () => {
 
         it('should NOT render the edit icon in case of editable:false', async () => {
             component.editable = false;
-            component.ngOnChanges();
             fixture.detectChanges();
             await fixture.whenStable();
-
             const editIcon = fixture.debugElement.query(By.css('.adf-textitem-edit-icon'));
             expect(editIcon).toBeNull('Edit icon should NOT be shown');
         });
@@ -158,12 +152,12 @@ describe('CardViewTextItemComponent', () => {
         it('should NOT render the picker and toggle in case of editable:true but (general) editable:false', async () => {
             component.editable = false;
             component.property.editable = true;
-            component.ngOnChanges();
+
             fixture.detectChanges();
             await fixture.whenStable();
-
             const editIcon = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-edit-icon-${component.property.key}"]`));
             expect(editIcon).toBeNull('Edit icon should NOT be shown');
+
         });
 
         it('should render chips for multivalue properties when chips are enabled', async () => {
@@ -176,16 +170,17 @@ describe('CardViewTextItemComponent', () => {
                 multivalued: true
             });
             component.useChipsForMultiValueProperty = true;
-            component.ngOnChanges();
+            component.ngOnChanges({ property: new SimpleChange(null, null, true) });
+
             fixture.detectChanges();
             await fixture.whenStable();
-
             const valueChips = fixture.debugElement.queryAll(By.css(`mat-chip`));
             expect(valueChips).not.toBeNull();
             expect(valueChips.length).toBe(3);
             expect(valueChips[0].nativeElement.innerText.trim()).toBe('item1');
             expect(valueChips[1].nativeElement.innerText.trim()).toBe('item2');
             expect(valueChips[2].nativeElement.innerText.trim()).toBe('item3');
+
         });
 
         it('should render string for multivalue properties when chips are disabled', async () => {
@@ -199,10 +194,10 @@ describe('CardViewTextItemComponent', () => {
             });
 
             component.useChipsForMultiValueProperty = false;
-            component.ngOnChanges();
+            component.ngOnChanges({ property: new SimpleChange(null, null, true) });
+
             fixture.detectChanges();
             await fixture.whenStable();
-
             const valueChips = fixture.debugElement.query(By.css(`mat-chip-list`));
             const value = getTextFieldValue(component.property.key);
             expect(value).toBe('item1,item2,item3');
@@ -219,60 +214,64 @@ describe('CardViewTextItemComponent', () => {
                 default: 'FAKE-DEFAULT-KEY',
                 editable: false
             });
+            component.ngOnChanges({ property: new SimpleChange(null, null, true) });
         });
 
-        it('should render the default as value if the value is empty, clickable is false and displayEmpty is true', async () => {
+        it('should render the default as value if the value is empty, clickable is false and displayEmpty is true', (done) => {
             component.property.clickable = false;
             component.displayEmpty = true;
-            component.ngOnChanges();
-            fixture.detectChanges();
-            await fixture.whenStable();
-            fixture.detectChanges();
 
-            const value = getTextFieldValue(component.property.key);
-            expect(value).toBe('FAKE-DEFAULT-KEY');
+            fixture.detectChanges();
+            fixture.whenStable().then(() => {
+                fixture.detectChanges();
+
+                const value = getTextFieldValue(component.property.key);
+                expect(value).toBe('FAKE-DEFAULT-KEY');
+                done();
+            });
         });
 
         it('should render the default as value if the value is empty and clickable true', async () => {
             component.property.clickable = true;
-            component.ngOnChanges();
+
             fixture.detectChanges();
             await fixture.whenStable();
             fixture.detectChanges();
-
             const value = getTextFieldValue(component.property.key);
             expect(value).toBe('FAKE-DEFAULT-KEY');
         });
 
         it('should not render the edit icon in case of clickable true but edit false', async () => {
             component.property.clickable = true;
-            component.ngOnChanges();
+
             fixture.detectChanges();
             await fixture.whenStable();
             fixture.detectChanges();
-
             const value = fixture.debugElement.query(By.css('.adf-textitem-edit-icon'));
             expect(value).toBeNull();
+
         });
 
         it('should not render the clickable icon in case editable set to false', async () => {
             component.property.clickable = true;
             component.property.icon = 'create';
             component.editable = false;
-            component.ngOnChanges();
+
             fixture.detectChanges();
             await fixture.whenStable();
             fixture.detectChanges();
 
             const value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-clickable-icon-${component.property.key}"]`));
             expect(value).toBeNull('icon should NOT be shown');
+
         });
 
         it('should render the defined clickable icon in case of clickable true and editable input set to true', async () => {
             component.property.clickable = true;
             component.property.icon = 'FAKE_ICON';
             component.editable = true;
-            component.ngOnChanges();
+            component.ngOnChanges({ property: new SimpleChange(null, null, true) });
+
             fixture.detectChanges();
             await fixture.whenStable();
             fixture.detectChanges();
@@ -280,12 +279,13 @@ describe('CardViewTextItemComponent', () => {
             const value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-clickable-icon-${component.property.key}"]`));
             expect(value).not.toBeNull();
             expect(value.nativeElement.innerText).toBe('FAKE_ICON');
+
         });
 
         it('should not render clickable icon in case of clickable true and icon undefined', async () => {
             component.property.clickable = true;
             component.editable = true;
-            component.ngOnChanges();
+
             fixture.detectChanges();
             await fixture.whenStable();
             fixture.detectChanges();
@@ -297,13 +297,14 @@ describe('CardViewTextItemComponent', () => {
         it('should not render the edit icon in case of clickable false and icon defined', async () => {
             component.property.clickable = false;
             component.property.icon = 'FAKE_ICON';
-            component.ngOnChanges();
+
             fixture.detectChanges();
             await fixture.whenStable();
             fixture.detectChanges();
 
             const value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-edit-icon-${component.property.icon}"]`));
             expect(value).toBeNull('Edit icon should NOT be shown');
+
         });
 
         it('should call back function when clickable property enabled', async () => {
@@ -312,7 +313,8 @@ describe('CardViewTextItemComponent', () => {
             component.property.icon = 'FAKE_ICON';
             component.property.clickCallBack = callBackSpy;
             component.editable = true;
-            component.ngOnChanges();
+            component.ngOnChanges({});
+
             fixture.detectChanges();
             await fixture.whenStable();
             fixture.detectChanges();
@@ -320,6 +322,7 @@ describe('CardViewTextItemComponent', () => {
             const value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-clickable-icon-${component.property.key}"]`));
             expect(value.nativeElement.innerText).toBe('FAKE_ICON');
             value.nativeElement.click();
+            fixture.detectChanges();
             expect(callBackSpy).toHaveBeenCalled();
         });
 
@@ -330,17 +333,19 @@ describe('CardViewTextItemComponent', () => {
             component.property.clickable = true;
             component.property.icon = 'FAKE_ICON';
             component.editable = false;
-            component.ngOnChanges();
+            component.ngOnChanges({});
+
             fixture.detectChanges();
             await fixture.whenStable();
             fixture.detectChanges();
 
             const value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-toggle-${component.property.key}"]`));
             value.nativeElement.click();
+            fixture.detectChanges();
             expect(cardViewUpdateService.clicked).toHaveBeenCalled();
         });
 
-        it('should update input the value on input updated', async (done) => {
+        it('should update input the value on input updated', fakeAsync((done) => {
             const cardViewUpdateService = TestBed.inject(CardViewUpdateService);
 
             component.property.clickable = true;
@@ -348,26 +353,27 @@ describe('CardViewTextItemComponent', () => {
             component.editable = true;
             component.property.isValid = () => true;
             const expectedText = 'changed text';
-            component.ngOnChanges();
-            fixture.detectChanges();
-            await fixture.whenStable();
+            component.ngOnChanges({});
             fixture.detectChanges();
+            fixture.whenStable().then(() => {
+                fixture.detectChanges();
 
-            const disposableUpdate = cardViewUpdateService.itemUpdated$.subscribe((updateNotification) => {
-                expect(updateNotification.target).toEqual({ ...component.property });
-                expect(updateNotification.changed).toEqual({ textkey: expectedText });
-                disposableUpdate.unsubscribe();
-                done();
+                const disposableUpdate = cardViewUpdateService.itemUpdated$.subscribe((updateNotification) => {
+                    expect(updateNotification.target).toEqual({ ...component.property });
+                    expect(updateNotification.changed).toEqual({ textkey: expectedText });
+
+                    expect(getTextFieldValue(component.property.key)).toEqual(expectedText);
+                    disposableUpdate.unsubscribe();
+                    done();
+                });
+
+                updateTextField(component.property.key, expectedText);
+                tick(1000);
+
+                fixture.detectChanges();
+                discardPeriodicTasks();
             });
-
-            updateTextField(component.property.key, expectedText);
-
-            component.ngOnChanges();
-            fixture.detectChanges();
-
-            expect(getTextFieldValue(component.property.key)).toEqual(expectedText);
-            expect(component.property.value).toBe(expectedText);
-        });
+        }));
 
         it('should copy value to clipboard on double click', async () => {
             const clipboardService = TestBed.inject(ClipboardService);
@@ -377,7 +383,6 @@ describe('CardViewTextItemComponent', () => {
             component.property.icon = 'FAKE_ICON';
             component.editable = false;
             component.copyToClipboardAction = true;
-            component.ngOnChanges();
             fixture.detectChanges();
             await fixture.whenStable();
             fixture.detectChanges();
@@ -388,7 +393,6 @@ describe('CardViewTextItemComponent', () => {
             fixture.detectChanges();
             expect(clipboardService.copyContentToClipboard).toHaveBeenCalledWith('myValueToCopy', 'CORE.METADATA.ACCESSIBILITY.COPY_TO_CLIPBOARD_MESSAGE');
         });
-
     });
 
     describe('Update', () => {
@@ -401,103 +405,138 @@ describe('CardViewTextItemComponent', () => {
                 default: 'FAKE-DEFAULT-KEY',
                 editable: true
             });
+            component.ngOnChanges({ property: new SimpleChange(null, null, true) });
         });
 
-        it('should call the isValid method with the edited value', async () => {
-            component.ngOnChanges();
-            fixture.detectChanges();
-            await fixture.whenStable();
+        it('should call the isValid method with the edited value', fakeAsync((done) => {
             fixture.detectChanges();
+            fixture.whenStable().then(() => {
+                fixture.detectChanges();
 
-            spyOn(component.property, 'isValid');
-            updateTextField(component.property.key, 'updated-value');
-            expect(component.property.isValid).toHaveBeenCalledWith('updated-value');
-        });
+                spyOn(component.property, 'isValid');
+                updateTextField(component.property.key, 'updated-value');
+                tick(600);
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(component.property.isValid).toHaveBeenCalledWith('updated-value');
+                    done();
+                });
+            });
+        }));
 
-        it('should trigger the update event if the editedValue is valid', async () => {
+        it('should trigger the update event if the editedValue is valid', fakeAsync((done) => {
             component.property.isValid = () => true;
-            component.ngOnChanges();
-            fixture.detectChanges();
-            await fixture.whenStable();
-            fixture.detectChanges();
-            const cardViewUpdateService = TestBed.inject(CardViewUpdateService);
-            const property = { ...component.property };
 
-            spyOn(cardViewUpdateService, 'update');
-            updateTextField(component.property.key, 'updated-value');
-            expect(cardViewUpdateService.update).toHaveBeenCalledWith(property, 'updated-value');
-        });
+            fixture.detectChanges();
+            fixture.whenStable().then(() => {
+                fixture.detectChanges();
+                const cardViewUpdateService = TestBed.inject(CardViewUpdateService);
+                const property = { ...component.property };
 
-        it('should NOT trigger the update event if the editedValue is invalid', async () => {
+                spyOn(cardViewUpdateService, 'update');
+                updateTextField(component.property.key, 'updated-value');
+                tick(600);
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(cardViewUpdateService.update).toHaveBeenCalledWith(property, 'updated-value');
+                    done();
+                });
+            });
+        }));
+
+        it('should NOT trigger the update event if the editedValue is invalid', fakeAsync((done) => {
             component.property.isValid = () => false;
-            component.ngOnChanges();
-            fixture.detectChanges();
-            await fixture.whenStable();
-            fixture.detectChanges();
-            const cardViewUpdateService = TestBed.inject(CardViewUpdateService);
 
-            spyOn(cardViewUpdateService, 'update');
-            updateTextField(component.property.key, 'updated-value');
-            expect(cardViewUpdateService.update).not.toHaveBeenCalled();
-        });
+            fixture.detectChanges();
+            fixture.whenStable().then(() => {
+                fixture.detectChanges();
+                const cardViewUpdateService = TestBed.inject(CardViewUpdateService);
 
-        it('should set the errorMessages properly if the editedValue is invalid', async () => {
+                spyOn(cardViewUpdateService, 'update');
+                updateTextField(component.property.key, 'updated-value');
+                tick(600);
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(cardViewUpdateService.update).not.toHaveBeenCalled();
+                    done();
+                });
+            });
+        }));
+
+        it('should set the errorMessages properly if the editedValue is invalid', fakeAsync((done) => {
             const expectedErrorMessages = [{ message: 'Something went wrong' } as CardViewItemValidator];
             component.property.isValid = () => false;
             component.property.getValidationErrors = () => expectedErrorMessages;
 
-            component.ngOnChanges();
             fixture.detectChanges();
-            await fixture.whenStable();
+            fixture.whenStable().then(() => {
 
-            updateTextField(component.property.key, 'updated-value');
-            expect(component.errors).toBe(expectedErrorMessages);
-        });
+                updateTextField(component.property.key, 'updated-value');
+                tick(600);
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    expect(component.errors).toBe(expectedErrorMessages);
+                    done();
+                });
+            });
+        }));
 
-        it('should render the error when the editedValue is invalid', async () => {
+        it('should render the error when the editedValue is invalid', fakeAsync((done) => {
             const expectedErrorMessages = [{ message: 'Something went wrong' } as CardViewItemValidator];
             component.property.isValid = () => false;
             component.property.getValidationErrors = () => expectedErrorMessages;
             component.editable = true;
-            component.ngOnChanges();
+
             fixture.detectChanges();
-            await fixture.whenStable();
+            fixture.whenStable().then(() => {
 
-            updateTextField(component.property.key, 'updated-value');
-            const errorMessage = fixture.debugElement.nativeElement.querySelector('.adf-textitem-editable-error').textContent;
-            expect(errorMessage).toBe('Something went wrong');
-        });
+                updateTextField(component.property.key, 'updated-value');
+                tick(600);
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    const errorMessage = fixture.debugElement.nativeElement.querySelector('.adf-textitem-editable-error').textContent;
+                    expect(errorMessage).toBe('Something went wrong');
+                    done();
+                });
+            });
+        }));
 
-        it('should reset erros when exiting editable mode', async () => {
+        it('should reset erros when exiting editable mode', fakeAsync((done) => {
             let errorMessage: string;
             const expectedErrorMessages = [{ message: 'Something went wrong' } as CardViewItemValidator];
             component.property.isValid = () => false;
             component.property.getValidationErrors = () => expectedErrorMessages;
             component.editable = true;
-            component.ngOnChanges();
-            fixture.detectChanges();
-            await fixture.whenStable();
 
-            updateTextField(component.property.key, 'updated-value');
-
-            component.editable = false;
-            component.ngOnChanges();
             fixture.detectChanges();
-            errorMessage = fixture.debugElement.nativeElement.querySelector('.adf-textitem-editable-error');
-            expect(errorMessage).toBe(null);
-            expect(component.errors).toEqual([]);
-        });
+            fixture.whenStable().then(() => {
+
+                updateTextField(component.property.key, 'updated-value');
+                tick(600);
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+
+                    component.editable = false;
+
+                    fixture.detectChanges();
+                    errorMessage = fixture.debugElement.nativeElement.querySelector('.adf-textitem-editable-error');
+                    expect(errorMessage).toBe(null);
+                    expect(component.errors).toEqual([]);
+                    done();
+                });
+            });
+        }));
 
         it('should update the property value after a successful update attempt', async () => {
             component.property.isValid = () => true;
             component.update();
-            component.ngOnChanges();
+
             fixture.detectChanges();
             await fixture.whenStable();
             expect(component.property.value).toBe(component.editedValue);
         });
 
-        it('should render the default as value if the value is empty, clickable is false and displayEmpty is true', async(async (done) => {
+        it('should render the default as value if the value is empty, clickable is true and displayEmpty is true', async(async (done) => {
             const functionTestClick = () => done();
 
             component.property = new CardViewTextItemModel({
@@ -511,7 +550,7 @@ describe('CardViewTextItemComponent', () => {
                 }
             });
             component.displayEmpty = true;
-            component.ngOnChanges();
+
             fixture.detectChanges();
             await fixture.whenStable();
 
@@ -519,31 +558,32 @@ describe('CardViewTextItemComponent', () => {
             inputField.nativeElement.click();
         }));
 
-        it('should trigger an update event on the CardViewUpdateService [integration]', async (done) => {
+        it('should trigger an update event on the CardViewUpdateService [integration]', fakeAsync((done) => {
             component.property.isValid = () => true;
             const cardViewUpdateService = TestBed.inject(CardViewUpdateService);
             const expectedText = 'changed text';
-            component.ngOnChanges();
+
             fixture.detectChanges();
-            await fixture.whenStable();
+            fixture.whenStable().then(() => {
 
-            const disposableUpdate = cardViewUpdateService.itemUpdated$.subscribe(
-                (updateNotification) => {
-                    expect(updateNotification.target).toEqual({ ...component.property });
-                    expect(updateNotification.changed).toEqual({ textkey: expectedText });
-                    disposableUpdate.unsubscribe();
-                    done();
-                }
-            );
+                const disposableUpdate = cardViewUpdateService.itemUpdated$.subscribe(
+                    (updateNotification) => {
+                        expect(updateNotification.target).toEqual({ ...component.property });
+                        expect(updateNotification.changed).toEqual({ textkey: expectedText });
+                        disposableUpdate.unsubscribe();
+                        done();
+                    }
+                );
 
-            updateTextField(component.property.key, expectedText);
-        });
+                updateTextField(component.property.key, expectedText);
+            });
+        }));
 
-        it('should update the value using the updateItem$ subject', async(async () => {
+        it('should update the value using the updateItem$ subject', (async () => {
             component.property.isValid = () => true;
             const cardViewUpdateService = TestBed.inject(CardViewUpdateService);
             const expectedText = 'changed text';
-            component.ngOnChanges();
+
             fixture.detectChanges();
             await fixture.whenStable();
 
@@ -552,40 +592,46 @@ describe('CardViewTextItemComponent', () => {
             expect(component.property.value).toBe('Lorem ipsum');
 
             cardViewUpdateService.updateElement({ key: component.property.key, value: expectedText } as any);
-            component.ngOnChanges();
+            component.ngOnChanges({ property: new SimpleChange(value, expectedText, false) });
             fixture.detectChanges();
             await fixture.whenStable();
 
             value = getTextFieldValue(component.property.key);
             expect(value).toEqual(expectedText);
             expect(component.property.value).toBe(expectedText);
+
         }));
 
-        it('should update multiline input the value on input updated', async (done) => {
+        it('should update multiline input the value on input updated', fakeAsync((done) => {
             component.property.isValid = () => true;
             component.property.multiline = true;
             const expectedText = 'changed text';
             spyOn(component, 'update').and.callThrough();
             const cardViewUpdateService = TestBed.inject(CardViewUpdateService);
-            component.ngOnChanges();
-            fixture.detectChanges();
-            await fixture.whenStable();
 
-            const disposableUpdate = cardViewUpdateService.itemUpdated$.subscribe((updateNotification) => {
-                expect(updateNotification.target).toEqual({ ...component.property });
-                expect(updateNotification.changed).toEqual({ textkey: expectedText });
-                disposableUpdate.unsubscribe();
-                done();
+            fixture.detectChanges();
+            fixture.whenStable().then(() => {
+
+                const disposableUpdate = cardViewUpdateService.itemUpdated$.subscribe((updateNotification) => {
+                    expect(updateNotification.target).toEqual({ ...component.property });
+                    expect(updateNotification.changed).toEqual({ textkey: expectedText });
+                    disposableUpdate.unsubscribe();
+                    done();
+                });
+
+                updateTextField(component.property.key, expectedText);
+                tick(600);
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+
+                    expect(component.update).toHaveBeenCalled();
+                    fixture.detectChanges();
+
+                    expect(getTextFieldValue(component.property.key)).toEqual(expectedText);
+                    expect(component.property.value).toBe(expectedText);
+                });
             });
-
-            updateTextField(component.property.key, expectedText);
-
-            expect(component.update).toHaveBeenCalled();
-            fixture.detectChanges();
-
-            expect(getTextFieldValue(component.property.key)).toEqual(expectedText);
-            expect(component.property.value).toBe(expectedText);
-        });
+        }));
     });
 
     describe('number', () => {
@@ -602,101 +648,114 @@ describe('CardViewTextItemComponent', () => {
             });
             component.editable = true;
             component.property.validators.push(new CardViewItemIntValidator());
-
+            component.ngOnChanges({ property: new SimpleChange(null, null, true) });
         });
 
-        it('should show validation error when string passed', async () => {
-            component.ngOnChanges();
+        it('should show validation error when string passed', fakeAsync((done) => {
             fixture.detectChanges();
-            await fixture.whenStable();
+            fixture.whenStable().then(() => {
 
-            updateTextField(component.property.key, 'update number');
+                updateTextField(component.property.key, 'update number');
+                tick(600);
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    const error = getTextFieldError(component.property.key);
+                    expect(error).toEqual('CORE.CARDVIEW.VALIDATORS.INT_VALIDATION_ERROR');
+                    expect(component.property.value).toBe(10);
+                    done();
+                });
+            });
+        }));
 
+        it('should show validation error for empty string', fakeAsync((done) => {
             fixture.detectChanges();
-            const error = getTextFieldError(component.property.key);
-            expect(error).toEqual('CORE.CARDVIEW.VALIDATORS.INT_VALIDATION_ERROR');
-            expect(component.property.value).toBe(10);
-        });
+            fixture.whenStable().then(() => {
 
-        it('should show validation error for empty string', async () => {
-            component.ngOnChanges();
+                updateTextField(component.property.key, ' ');
+                tick(600);
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    const error = getTextFieldError(component.property.key);
+                    expect(error).toEqual('CORE.CARDVIEW.VALIDATORS.INT_VALIDATION_ERROR');
+                    expect(component.property.value).toBe(10);
+                    done();
+                });
+            });
+        }));
+
+        it('should show validation error for float number', fakeAsync((done) => {
             fixture.detectChanges();
-            await fixture.whenStable();
+            fixture.whenStable().then(() => {
 
-            updateTextField(component.property.key, ' ');
+                updateTextField(component.property.key, 123.456);
+                tick(600);
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
 
+                    const error = getTextFieldError(component.property.key);
+                    expect(error).toEqual('CORE.CARDVIEW.VALIDATORS.INT_VALIDATION_ERROR');
+                    expect(component.property.value).toBe(10);
+                    done();
+                });
+            });
+        }));
+
+        it('should show validation error for exceed the number limit (2147483648)', fakeAsync((done) => {
             fixture.detectChanges();
-            const error = getTextFieldError(component.property.key);
-            expect(error).toEqual('CORE.CARDVIEW.VALIDATORS.INT_VALIDATION_ERROR');
-            expect(component.property.value).toBe(10);
-            expect(component.property.value).toBe(10);
-        });
+            fixture.whenStable().then(() => {
 
-        it('should show validation error for float number', async () => {
-            component.ngOnChanges();
+                updateTextField(component.property.key, 2147483648);
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    const error = getTextFieldError(component.property.key);
+                    expect(error).toEqual('CORE.CARDVIEW.VALIDATORS.INT_VALIDATION_ERROR');
+                    expect(component.property.value).toBe(10);
+                    done();
+                });
+            });
+        }));
+
+        it('should not show validation error for below the number limit (2147483647)', fakeAsync((done) => {
             fixture.detectChanges();
-            await fixture.whenStable();
+            fixture.whenStable().then(() => {
 
-            updateTextField(component.property.key, 123.456);
+                updateTextField(component.property.key, 2147483647);
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    const error = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-error-${component.property.key}"] li`));
+                    expect(error).toBeFalsy();
 
-            fixture.detectChanges();
-            const error = getTextFieldError(component.property.key);
-            expect(error).toEqual('CORE.CARDVIEW.VALIDATORS.INT_VALIDATION_ERROR');
-            expect(component.property.value).toBe(10);
-            expect(component.property.value).toBe(10);
-        });
+                    expect(component.property.value).toBe('2147483647');
+                    done();
+                });
+            });
+        }));
 
-        it('should show validation error for exceed the number limit (2147483648)', async () => {
-            component.ngOnChanges();
-            fixture.detectChanges();
-            await fixture.whenStable();
-
-            updateTextField(component.property.key, 2147483648);
-
-            fixture.detectChanges();
-            const error = getTextFieldError(component.property.key);
-            expect(error).toEqual('CORE.CARDVIEW.VALIDATORS.INT_VALIDATION_ERROR');
-            expect(component.property.value).toBe(10);
-            expect(component.property.value).toBe(10);
-        });
-
-        it('should not show validation error for below the number limit (2147483647)', async () => {
-            component.ngOnChanges();
-            fixture.detectChanges();
-            await fixture.whenStable();
-
-            updateTextField(component.property.key, 2147483647);
-
-            fixture.detectChanges();
-            const error = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-error-${component.property.key}"] li`));
-            expect(error).toBeFalsy();
-
-            expect(component.property.value).toBe('2147483647');
-        });
-
-        it('should update input the value on input updated', async (done) => {
+        it('should update input the value on input updated', fakeAsync((done) => {
             const expectedNumber = 2020;
             spyOn(component, 'update').and.callThrough();
-            component.ngOnChanges();
             fixture.detectChanges();
-            await fixture.whenStable();
+            fixture.whenStable().then(() => {
 
-            const disposableUpdate = cardViewUpdateService.itemUpdated$.subscribe((updateNotification) => {
-                expect(updateNotification.target).toEqual({ ...component.property });
-                expect(updateNotification.changed).toEqual({ textkey: expectedNumber.toString() });
-                disposableUpdate.unsubscribe();
-                done();
+                const disposableUpdate = cardViewUpdateService.itemUpdated$.subscribe((updateNotification) => {
+                    expect(updateNotification.target).toEqual({ ...component.property });
+                    expect(updateNotification.changed).toEqual({ textkey: expectedNumber.toString() });
+                    disposableUpdate.unsubscribe();
+                    done();
+                });
+
+                updateTextField(component.property.key, expectedNumber);
+                tick(600);
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    const error = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-error-${component.property.key}"] li`));
+                    expect(error).toBeFalsy();
+
+                    expect(getTextFieldValue(component.property.key)).toEqual(expectedNumber.toString());
+                    expect(component.property.value).toBe(expectedNumber.toString());
+                });
             });
-
-            updateTextField(component.property.key, expectedNumber);
-
-            fixture.detectChanges();
-            const error = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-error-${component.property.key}"] li`));
-            expect(error).toBeFalsy();
-
-            expect(getTextFieldValue(component.property.key)).toEqual(expectedNumber.toString());
-            expect(component.property.value).toBe(expectedNumber.toString());
-        });
+        }));
     });
 
     describe('float', () => {
@@ -714,64 +773,72 @@ describe('CardViewTextItemComponent', () => {
             });
             component.editable = true;
             component.property.validators.push(new CardViewItemFloatValidator());
+            component.ngOnChanges({ property: new SimpleChange(null, null, true) });
         });
 
-        it('should show validation error when string passed', async () => {
-            component.ngOnChanges();
+        it('should show validation error when string passed', fakeAsync((done) => {
             fixture.detectChanges();
-            await fixture.whenStable();
+            fixture.whenStable().then(() => {
 
-            updateTextField(component.property.key, 'hello there');
+                updateTextField(component.property.key, 'hello there');
+                tick(600);
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    const error = getTextFieldError(component.property.key);
+                    expect(error).toEqual('CORE.CARDVIEW.VALIDATORS.FLOAT_VALIDATION_ERROR');
+                    expect(component.property.value).toBe(floatValue);
+                    done();
+                });
+            });
+        }));
 
+        it('should show validation error for empty string', fakeAsync((done) => {
             fixture.detectChanges();
-            const error = getTextFieldError(component.property.key);
-            expect(error).toEqual('CORE.CARDVIEW.VALIDATORS.FLOAT_VALIDATION_ERROR');
-            expect(component.property.value).toBe(floatValue);
-        });
+            fixture.whenStable().then(() => {
 
-        it('should show validation error for empty string', async () => {
-            component.ngOnChanges();
-            fixture.detectChanges();
-            await fixture.whenStable();
+                updateTextField(component.property.key, ' ');
+                tick(600);
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    const error = getTextFieldError(component.property.key);
+                    expect(error).toEqual('CORE.CARDVIEW.VALIDATORS.FLOAT_VALIDATION_ERROR');
+                    expect(component.property.value).toBe(floatValue);
+                    done();
+                });
+            });
+        }));
 
-            updateTextField(component.property.key, ' ');
-
-            fixture.detectChanges();
-            const error = getTextFieldError(component.property.key);
-            expect(error).toEqual('CORE.CARDVIEW.VALIDATORS.FLOAT_VALIDATION_ERROR');
-            expect(component.property.value).toBe(floatValue);
-        });
-
-        it('should update input the value on input updated', async (done) => {
+        it('should update input the value on input updated', fakeAsync((done) => {
             const expectedNumber = 88.44;
             spyOn(component, 'update').and.callThrough();
-            component.ngOnChanges();
             fixture.detectChanges();
-            await fixture.whenStable();
+            fixture.whenStable().then(() => {
 
-            const disposableUpdate = cardViewUpdateService.itemUpdated$.subscribe((updateNotification) => {
-                expect(updateNotification.target).toEqual({ ...component.property });
-                expect(updateNotification.changed).toEqual({ textkey: expectedNumber.toString() });
-                disposableUpdate.unsubscribe();
-                done();
+                const disposableUpdate = cardViewUpdateService.itemUpdated$.subscribe((updateNotification) => {
+                    expect(updateNotification.target).toEqual({ ...component.property });
+                    expect(updateNotification.changed).toEqual({ textkey: expectedNumber.toString() });
+                    disposableUpdate.unsubscribe();
+                    done();
+                });
+
+                updateTextField(component.property.key, expectedNumber);
+                tick(600);
+                fixture.detectChanges();
+                fixture.whenStable().then(() => {
+                    const error = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-error-${component.property.key}"] li`));
+                    expect(error).toBeFalsy();
+
+                    expect(getTextFieldValue(component.property.key)).toEqual(expectedNumber.toString());
+                    expect(component.property.value).toBe(expectedNumber.toString());
+                });
             });
-
-            updateTextField(component.property.key, expectedNumber);
-
-            fixture.detectChanges();
-            const error = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-error-${component.property.key}"] li`));
-            expect(error).toBeFalsy();
-
-            expect(getTextFieldValue(component.property.key)).toEqual(expectedNumber.toString());
-            expect(component.property.value).toBe(expectedNumber.toString());
-        });
+        }));
     });
 
     function updateTextField(key, value) {
         const editInput = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-value-${key}"]`));
         editInput.nativeElement.value = value;
         editInput.nativeElement.dispatchEvent(new Event('input'));
-        editInput.nativeElement.dispatchEvent(new Event('blur'));
         fixture.detectChanges();
     }
 
diff --git a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.ts b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.ts
index 94981341f3..64249e754d 100644
--- a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.ts
+++ b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, Input, OnChanges } from '@angular/core';
+import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
 import { CardViewTextItemModel } from '../../models/card-view-textitem.model';
 import { CardViewUpdateService } from '../../services/card-view-update.service';
 import { BaseCardView } from '../base-card-view';
@@ -23,6 +23,9 @@ import { MatChipInputEvent } from '@angular/material/chips';
 import { ClipboardService } from '../../../clipboard/clipboard.service';
 import { TranslationService } from '../../../services/translation.service';
 import { CardViewItemValidator } from '../../interfaces/card-view-item-validator.interface';
+import { FormControl } from '@angular/forms';
+import { debounceTime, takeUntil, filter } from 'rxjs/operators';
+import { Subject } from 'rxjs/internal/Subject';
 
 export const DEFAULT_SEPARATOR = ', ';
 const templateTypes = {
@@ -59,15 +62,36 @@ export class CardViewTextItemComponent extends BaseCardView<CardViewTextItemMode
     errors: CardViewItemValidator[];
     templateType: string;
 
+    textInput: FormControl = new FormControl();
+
+    private onDestroy$ = new Subject<boolean>();
+
     constructor(cardViewUpdateService: CardViewUpdateService,
                 private clipboardService: ClipboardService,
                 private translateService: TranslationService) {
         super(cardViewUpdateService);
     }
 
-    ngOnChanges(): void {
+    ngOnChanges(changes: SimpleChanges): void {
+        if (changes.property && changes.property.firstChange) {
+            this.textInput.valueChanges
+                .pipe(
+                    filter(textInputValue => textInputValue !== this.editedValue),
+                    debounceTime(500),
+                    takeUntil(this.onDestroy$)
+                )
+                .subscribe(textInputValue => {
+                    this.editedValue = textInputValue;
+                    this.update();
+                });
+        }
+
         this.resetValue();
         this.setTemplateType();
+
+        if (changes.editable) {
+            this.isEditable ? this.textInput.enable() : this.textInput.disable();
+        }
     }
 
     private setTemplateType() {
@@ -89,6 +113,7 @@ export class CardViewTextItemComponent extends BaseCardView<CardViewTextItemMode
             this.editedValue = this.property.value ? Array.from(this.property.value) : [];
         } else {
             this.editedValue = this.property.displayValue;
+            this.textInput.setValue(this.editedValue);
         }
 
         this.resetErrorMessages();
@@ -136,7 +161,8 @@ export class CardViewTextItemComponent extends BaseCardView<CardViewTextItemMode
 
             if (chipInput) {
                 chipInput.value = '';
-            }        }
+            }
+        }
     }
 
     clicked(): void {
@@ -158,6 +184,11 @@ export class CardViewTextItemComponent extends BaseCardView<CardViewTextItemMode
         }
     }
 
+    ngOnDestroy() {
+        this.onDestroy$.next(true);
+        this.onDestroy$.complete();
+    }
+
     get showProperty(): boolean {
         return this.displayEmpty || !this.property.isEmpty();
     }
diff --git a/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.spec.ts b/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.spec.ts
index 759ab67d7c..98fc7938a9 100644
--- a/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.spec.ts
+++ b/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.spec.ts
@@ -19,7 +19,7 @@ import { TaskHeaderCloudComponent } from './task-header-cloud.component';
 import { of, throwError } from 'rxjs';
 import { By } from '@angular/platform-browser';
 import { ComponentFixture, TestBed, async } from '@angular/core/testing';
-import { setupTestBed, AppConfigService } from '@alfresco/adf-core';
+import { setupTestBed, AppConfigService, AlfrescoApiService } from '@alfresco/adf-core';
 import { ProcessServiceCloudTestingModule } from '../../../testing/process-service-cloud.testing.module';
 import { TaskCloudService } from '../../services/task-cloud.service';
 import { TaskHeaderCloudModule } from '../task-header-cloud.module';
@@ -43,10 +43,17 @@ describe('TaskHeaderCloudComponent', () => {
     let getCandidateGroupsSpy: jasmine.Spy;
     let getCandidateUsersSpy: jasmine.Spy;
     let isTaskEditableSpy: jasmine.Spy;
+    let alfrescoApiService: AlfrescoApiService;
 
     const mockCandidateUsers = ['mockuser1', 'mockuser2', 'mockuser3'];
     const mockCandidateGroups = ['mockgroup1', 'mockgroup2', 'mockgroup3'];
 
+    const mock = {
+        oauth2Auth: {
+            callCustomApi: () => Promise.resolve({})
+        }
+    };
+
     setupTestBed({
         imports: [
             TranslateModule.forRoot(),
@@ -60,14 +67,20 @@ describe('TaskHeaderCloudComponent', () => {
         component = fixture.componentInstance;
         appConfigService = TestBed.inject(AppConfigService);
         taskCloudService = TestBed.inject(TaskCloudService);
+        alfrescoApiService = TestBed.inject(AlfrescoApiService);
         component.appName = 'mock-app-name';
         component.taskId = 'mock-task-id';
+        spyOn(alfrescoApiService, 'getInstance').and.returnValue(mock);
         getTaskByIdSpy = spyOn(taskCloudService, 'getTaskById').and.returnValue(of(assignedTaskDetailsCloudMock));
         isTaskEditableSpy = spyOn(taskCloudService, 'isTaskEditable').and.returnValue(true);
         getCandidateUsersSpy = spyOn(taskCloudService, 'getCandidateUsers').and.returnValue(of(mockCandidateUsers));
         getCandidateGroupsSpy = spyOn(taskCloudService, 'getCandidateGroups').and.returnValue(of(mockCandidateGroups));
     });
 
+    afterEach(() => {
+        fixture.destroy();
+    });
+
     describe('Task Details', () => {
 
         beforeEach(() => {
@@ -86,121 +99,116 @@ describe('TaskHeaderCloudComponent', () => {
             expect(taskTitle).toBeTruthy();
         });
 
-        it('should fectch task details when appName and taskId defined', async(() => {
+        it('should fectch task details when appName and taskId defined', async () => {
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
-                expect(getTaskByIdSpy).toHaveBeenCalled();
-                expect(component.taskDetails).toBe(assignedTaskDetailsCloudMock);
-            });
-        }));
+            await fixture.whenStable();
+            expect(getTaskByIdSpy).toHaveBeenCalled();
+            expect(component.taskDetails).toBe(assignedTaskDetailsCloudMock);
 
-        it('should display assignee', async(() => {
+        });
+
+        it('should display assignee', async () => {
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
-                const assigneeEl = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-value-assignee"]'));
-                expect(assigneeEl.nativeElement.value).toBe('AssignedTaskUser');
-            });
-        }));
+            await fixture.whenStable();
+            const assigneeEl = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-value-assignee"]'));
+            expect(assigneeEl.nativeElement.value).toBe('AssignedTaskUser');
+        });
 
-        it('should display status', async(() => {
+        it('should display status', async () => {
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
-                const statusEl = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-value-status"]'));
-                expect(statusEl.nativeElement.value).toBe('ASSIGNED');
-            });
-        }));
+            await fixture.whenStable();
+            fixture.detectChanges();
+            const statusEl = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-value-status"]'));
+            expect(statusEl.nativeElement.value).toBe('ASSIGNED');
+        });
 
-        it('should display priority', async(() => {
+        it('should display priority', async () => {
             fixture.detectChanges();
 
-            fixture.whenStable().then(() => {
-                const priorityEl = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-value-priority"]'));
-                expect(priorityEl.nativeElement.value).toBe('5');
-            });
-        }));
+            await fixture.whenStable();
+            fixture.detectChanges();
+            const priorityEl = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-value-priority"]'));
+            expect(priorityEl.nativeElement.value).toBe('5');
+        });
 
-        it('should display error if priority is not a number', async(() => {
+        it('should display error if priority is not a number', async (done) => {
+            fixture.detectChanges();
+            await fixture.whenStable();
             fixture.detectChanges();
 
-            fixture.whenStable().then(() => {
+            const formPriorityEl = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-value-priority"]'));
+            formPriorityEl.nativeElement.value = 'stringValue';
+            formPriorityEl.nativeElement.dispatchEvent(new Event('input'));
 
-                const formPriorityEl = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-value-priority"]'));
-                formPriorityEl.nativeElement.value = 'stringValue';
-                formPriorityEl.nativeElement.dispatchEvent(new Event('input'));
-                formPriorityEl.nativeElement.dispatchEvent(new Event('blur'));
-                fixture.detectChanges();
-
-                const errorMessageEl = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-error-priority"]'));
-                expect(errorMessageEl).not.toBeNull();
-            });
-        }));
-
-        it('should display due date', async(() => {
+            fixture.detectChanges();
+            await fixture.whenStable();
             fixture.detectChanges();
 
-            fixture.whenStable().then(() => {
-                const valueEl = fixture.debugElement.query(By.css('[data-automation-id="header-dueDate"] .adf-property-value'));
-                expect(valueEl.nativeElement.innerText.trim()).toBe(moment(assignedTaskDetailsCloudMock.dueDate, 'x').format('MMM D, Y, H:mm'));
-            });
-        }));
+            const errorMessageEl = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-error-priority"]'));
+            expect(errorMessageEl).not.toBeNull();
+            done();
 
-        it('should display placeholder if no due date', async(() => {
+        });
+
+        it('should display due date', async () => {
+            fixture.detectChanges();
+            await fixture.whenStable();
+            fixture.detectChanges();
+
+            const valueEl = fixture.debugElement.query(By.css('[data-automation-id="header-dueDate"] .adf-property-value'));
+            expect(valueEl.nativeElement.innerText.trim()).toBe(moment(assignedTaskDetailsCloudMock.dueDate, 'x').format('MMM D, Y, H:mm'));
+        });
+
+        it('should display placeholder if no due date', async () => {
             component.taskDetails.dueDate = null;
             component.refreshData();
             fixture.detectChanges();
+            await fixture.whenStable();
+            const valueEl = fixture.debugElement.query(By.css('[data-automation-id="header-dueDate"] .adf-property-value'));
+            expect(valueEl.nativeElement.innerText.trim()).toBe('ADF_CLOUD_TASK_HEADER.PROPERTIES.DUE_DATE_DEFAULT');
+        });
 
-            fixture.whenStable().then(() => {
-                const valueEl = fixture.debugElement.query(By.css('[data-automation-id="header-dueDate"] .adf-property-value'));
-                expect(valueEl.nativeElement.innerText.trim()).toBe('ADF_CLOUD_TASK_HEADER.PROPERTIES.DUE_DATE_DEFAULT');
-            });
-        }));
-
-        it('should display the default parent value if is undefined', async(() => {
+        it('should display the default parent value if is undefined', async () => {
             component.taskDetails.processInstanceId = null;
             fixture.detectChanges();
+            await fixture.whenStable();
+            const valueEl = fixture.debugElement.query(By.css('[data-automation-id="header-parentName"] input'));
+            expect(valueEl.nativeElement.value).toEqual('ADF_CLOUD_TASK_HEADER.PROPERTIES.PARENT_NAME_DEFAULT');
+        });
 
-            fixture.whenStable().then(() => {
-                const valueEl = fixture.debugElement.query(By.css('[data-automation-id="header-parentName"] input'));
-                expect(valueEl.nativeElement.value).toEqual('ADF_CLOUD_TASK_HEADER.PROPERTIES.PARENT_NAME_DEFAULT');
-            });
-        }));
-
-        it('should be able to call update service on updating task description', async(() => {
+        it('should be able to call update service on updating task description', async (done) => {
             spyOn(taskCloudService, 'updateTask').and.returnValue(of(assignedTaskDetailsCloudMock));
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
+            await fixture.whenStable();
+            fixture.detectChanges();
+            const inputEl = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-value-description"]'));
+            inputEl.nativeElement.value = 'updated description';
+            inputEl.nativeElement.dispatchEvent(new Event('input'));
+            fixture.detectChanges();
+            await fixture.whenStable();
+            fixture.detectChanges();
+            expect(taskCloudService.updateTask).toHaveBeenCalled();
+            done();
+        });
 
-                const inputEl = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-value-description"]'));
-                inputEl.nativeElement.value = 'updated description';
-                inputEl.nativeElement.dispatchEvent(new Event('input'));
-                inputEl.nativeElement.dispatchEvent(new Event('blur'));
-
-                fixture.detectChanges();
-                expect(taskCloudService.updateTask).toHaveBeenCalled();
-            });
-        }));
-
-        it('should roll back task description on error', async () => {
+        it('should roll back task description on error', async(async () => {
             spyOn(taskCloudService, 'updateTask').and.returnValue(throwError('fake'));
             fixture.detectChanges();
 
             await fixture.whenStable();
+            fixture.detectChanges();
             let description = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-value-description"]'));
             expect(description.nativeElement.value.trim()).toEqual('This is the description');
-
             const inputEl = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-value-description"]'));
             inputEl.nativeElement.value = 'updated description';
             inputEl.nativeElement.dispatchEvent(new Event('input'));
-            inputEl.nativeElement.dispatchEvent(new Event('blur'));
-
             fixture.detectChanges();
-            expect(taskCloudService.updateTask).toHaveBeenCalled();
-
             await fixture.whenStable();
             fixture.detectChanges();
             description = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-value-description"]'));
             expect(description.nativeElement.value.trim()).toEqual('This is the description');
-        });
+            expect(taskCloudService.updateTask).toHaveBeenCalled();
+        }));
 
         it('should show loading spinner when properties are not loaded', () => {
             component.properties = null;
@@ -217,28 +225,25 @@ describe('TaskHeaderCloudComponent', () => {
             component.ngOnChanges();
         });
 
-        it('should fectch parent task details if the task has parent id', async(() => {
+        it('should fectch parent task details if the task has parent id', async () => {
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
-                expect(getTaskByIdSpy).toHaveBeenCalledTimes(2);
-            });
-        }));
+            await fixture.whenStable();
+            expect(getTaskByIdSpy).toHaveBeenCalledTimes(2);
+        });
 
-        it('should display parent task id', async(() => {
+        it('should display parent task id', async () => {
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
-                const assigneeEl = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-value-parentTaskId"'));
-                expect(assigneeEl.nativeElement.value).toBe('mock-parent-task-id');
-            });
-        }));
+            await fixture.whenStable();
+            const assigneeEl = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-value-parentTaskId"'));
+            expect(assigneeEl.nativeElement.value).toBe('mock-parent-task-id');
+        });
 
-        it('should display parent task name', async(() => {
+        it('should display parent task name', async () => {
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
-                const statusEl = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-value-parentName"]'));
-                expect(statusEl.nativeElement.value.trim()).toBe('This is a parent task name');
-            });
-        }));
+            await fixture.whenStable();
+            const statusEl = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-value-parentName"]'));
+            expect(statusEl.nativeElement.value.trim()).toBe('This is a parent task name');
+        });
     });
 
     describe('Assigned Task', () => {
@@ -248,25 +253,24 @@ describe('TaskHeaderCloudComponent', () => {
             component.ngOnChanges();
         });
 
-        it('should display assignee', async(() => {
+        it('should display assignee', async () => {
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
-                const assigneeEl = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-value-assignee"]'));
-                expect(assigneeEl.nativeElement.value).toBe('AssignedTaskUser');
-            });
-        }));
-
-        it('should display status', async(() => {
+            await fixture.whenStable();
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
-                const statusEl = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-value-status"]'));
-                expect(statusEl.nativeElement.value).toBe('ASSIGNED');
-            });
-        }));
+            const assigneeEl = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-value-assignee"]'));
+            expect(assigneeEl.nativeElement.value).toBe('AssignedTaskUser');
+        });
 
-        it('should render defined edit icon for assignee property if the task in assigned state and shared among candidates', () => {
+        it('should display status', async () => {
             fixture.detectChanges();
+            await fixture.whenStable();
+            const statusEl = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-value-status"]'));
+            expect(statusEl.nativeElement.value).toBe('ASSIGNED');
+        });
 
+        it('should render defined edit icon for assignee property if the task in assigned state and shared among candidates', async () => {
+            fixture.detectChanges();
+            await fixture.whenStable();
             const value = fixture.debugElement.query(By.css(`[data-automation-id="header-assignee"] [data-automation-id="card-textitem-clickable-icon-assignee"]`));
             expect(value).not.toBeNull();
             expect(value.nativeElement.innerText).toBe('create');
@@ -321,21 +325,21 @@ describe('TaskHeaderCloudComponent', () => {
             component.ngOnChanges();
         });
 
-        it('should display status', async(() => {
+        it('should display status', async () => {
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
-                const statusEl = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-value-status"]'));
-                expect(statusEl.nativeElement.value).toBe('CREATED');
-            });
-        }));
+            await fixture.whenStable();
+            fixture.detectChanges();
+            const statusEl = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-value-status"]'));
+            expect(statusEl.nativeElement.value).toBe('CREATED');
+        });
 
-        it('should display placeholder if no assignee', async(() => {
+        it('should display placeholder if no assignee', async () => {
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
-                const assigneeEl = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-value-assignee"]'));
-                expect(assigneeEl.nativeElement.value).toBe('ADF_CLOUD_TASK_HEADER.PROPERTIES.ASSIGNEE_DEFAULT');
-            });
-        }));
+            await fixture.whenStable();
+            fixture.detectChanges();
+            const assigneeEl = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-value-assignee"]'));
+            expect(assigneeEl.nativeElement.value).toBe('ADF_CLOUD_TASK_HEADER.PROPERTIES.ASSIGNEE_DEFAULT');
+        });
 
         it('should not render defined clickable edit icon for assignee property if the task in created state and not assigned', () => {
             fixture.detectChanges();
@@ -362,13 +366,12 @@ describe('TaskHeaderCloudComponent', () => {
             component.ngOnChanges();
         });
 
-        it('should display status', async(() => {
+        it('should display status', async () => {
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
-                const statusEl = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-value-status"]'));
-                expect(statusEl.nativeElement.value).toBe('COMPLETED');
-            });
-        }));
+            await fixture.whenStable();
+            const statusEl = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-value-status"]'));
+            expect(statusEl.nativeElement.value).toBe('COMPLETED');
+        });
 
         it('should not render defined clickable edit icon for assignee property if the task in completed state', () => {
             fixture.detectChanges();
@@ -382,7 +385,7 @@ describe('TaskHeaderCloudComponent', () => {
             const descriptionEditIcon = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-edit-icon-description"]`));
             const dueDateEditIcon = fixture.debugElement.query(By.css(`[data-automation-id="datepickertoggle-dueDate"]`));
             expect(priorityEditIcon).toBeNull('Edit icon should NOT be shown');
-            expect(descriptionEditIcon).toBeNull('Edit icon should NOT be shown');
+            expect(descriptionEditIcon).toBeNull('Edit icon shouaaa`zld NOT be shown');
             expect(dueDateEditIcon).toBeNull('Edit icon should NOT be shown');
         });
     });
@@ -395,13 +398,12 @@ describe('TaskHeaderCloudComponent', () => {
             component.ngOnChanges();
         });
 
-        it('should display status', async(() => {
+        it('should display status', async () => {
             fixture.detectChanges();
-            fixture.whenStable().then(() => {
-                const statusEl = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-value-status"]'));
-                expect(statusEl.nativeElement.value).toBe('SUSPENDED');
-            });
-        }));
+            await fixture.whenStable();
+            const statusEl = fixture.debugElement.query(By.css('[data-automation-id="card-textitem-value-status"]'));
+            expect(statusEl.nativeElement.value).toBe('SUSPENDED');
+        });
 
         it('should not render defined clickable edit icon for assignee property if the task in suspended state', () => {
             fixture.detectChanges();
@@ -422,93 +424,86 @@ describe('TaskHeaderCloudComponent', () => {
 
     describe('Task with candidates', () => {
 
-        it('should display candidate groups', async(() => {
+        it('should display candidate groups', async () => {
             component.ngOnChanges();
             fixture.detectChanges();
 
-            fixture.whenStable().then(() => {
-                const candidateGroup1 = fixture.nativeElement.querySelector('[data-automation-id="card-arrayitem-chip-mockgroup1"] span');
-                const candidateGroup2 = fixture.nativeElement.querySelector('[data-automation-id="card-arrayitem-chip-mockgroup2"] span');
-                expect(getCandidateGroupsSpy).toHaveBeenCalled();
-                expect(candidateGroup1.innerText).toBe('mockgroup1');
-                expect(candidateGroup2.innerText).toBe('mockgroup2');
-            });
-        }));
+            await fixture.whenStable();
+            const candidateGroup1 = fixture.nativeElement.querySelector('[data-automation-id="card-arrayitem-chip-mockgroup1"] span');
+            const candidateGroup2 = fixture.nativeElement.querySelector('[data-automation-id="card-arrayitem-chip-mockgroup2"] span');
+            expect(getCandidateGroupsSpy).toHaveBeenCalled();
+            expect(candidateGroup1.innerText).toBe('mockgroup1');
+            expect(candidateGroup2.innerText).toBe('mockgroup2');
+        });
 
-        it('should display candidate user', async(() => {
+        it('should display candidate user', async () => {
             component.ngOnChanges();
             fixture.detectChanges();
 
-            fixture.whenStable().then(() => {
-                const candidateUser1 = fixture.nativeElement.querySelector('[data-automation-id="card-arrayitem-chip-mockuser1"] span');
-                const candidateUser2 = fixture.nativeElement.querySelector('[data-automation-id="card-arrayitem-chip-mockuser2"] span');
-                expect(getCandidateUsersSpy).toHaveBeenCalled();
-                expect(candidateUser1.innerText).toBe('mockuser1');
-                expect(candidateUser2.innerText).toBe('mockuser2');
-            });
-        }));
+            await fixture.whenStable();
+            const candidateUser1 = fixture.nativeElement.querySelector('[data-automation-id="card-arrayitem-chip-mockuser1"] span');
+            const candidateUser2 = fixture.nativeElement.querySelector('[data-automation-id="card-arrayitem-chip-mockuser2"] span');
+            expect(getCandidateUsersSpy).toHaveBeenCalled();
+            expect(candidateUser1.innerText).toBe('mockuser1');
+            expect(candidateUser2.innerText).toBe('mockuser2');
+        });
 
-        it('should display placeholder if no candidate groups', async(() => {
+        it('should display placeholder if no candidate groups', async () => {
             getCandidateGroupsSpy.and.returnValue(of([]));
             fixture.detectChanges();
             component.ngOnChanges();
             fixture.detectChanges();
 
-            fixture.whenStable().then(() => {
-                const labelValue = fixture.debugElement.query(By.css('[data-automation-id="card-array-label-candidateGroups"]'));
-                const defaultElement = fixture.debugElement.query(By.css('[data-automation-id="card-arrayitem-default"]'));
-                expect(labelValue.nativeElement.innerText).toBe('ADF_CLOUD_TASK_HEADER.PROPERTIES.CANDIDATE_GROUPS');
-                expect(defaultElement.nativeElement.innerText).toBe('ADF_CLOUD_TASK_HEADER.PROPERTIES.CANDIDATE_GROUPS_DEFAULT');
-            });
+            await fixture.whenStable();
+            const labelValue = fixture.debugElement.query(By.css('[data-automation-id="card-array-label-candidateGroups"]'));
+            const defaultElement = fixture.debugElement.query(By.css('[data-automation-id="card-arrayitem-default"]'));
+            expect(labelValue.nativeElement.innerText).toBe('ADF_CLOUD_TASK_HEADER.PROPERTIES.CANDIDATE_GROUPS');
+            expect(defaultElement.nativeElement.innerText).toBe('ADF_CLOUD_TASK_HEADER.PROPERTIES.CANDIDATE_GROUPS_DEFAULT');
+        });
 
-        }));
-
-        it('should display placeholder if no candidate users', async(() => {
+        it('should display placeholder if no candidate users', async () => {
             getCandidateUsersSpy.and.returnValue(of([]));
             fixture.detectChanges();
             component.ngOnChanges();
             fixture.detectChanges();
 
-            fixture.whenStable().then(() => {
-                const labelValue = fixture.debugElement.query(By.css('[data-automation-id="card-array-label-candidateUsers"]'));
-                const defaultElement = fixture.debugElement.query(By.css('[data-automation-id="card-arrayitem-default"]'));
-                expect(labelValue.nativeElement.innerText).toBe('ADF_CLOUD_TASK_HEADER.PROPERTIES.CANDIDATE_USERS');
-                expect(defaultElement.nativeElement.innerText).toBe('ADF_CLOUD_TASK_HEADER.PROPERTIES.CANDIDATE_USERS_DEFAULT');
-            });
-        }));
+            await fixture.whenStable();
+            const labelValue = fixture.debugElement.query(By.css('[data-automation-id="card-array-label-candidateUsers"]'));
+            const defaultElement = fixture.debugElement.query(By.css('[data-automation-id="card-arrayitem-default"]'));
+            expect(labelValue.nativeElement.innerText).toBe('ADF_CLOUD_TASK_HEADER.PROPERTIES.CANDIDATE_USERS');
+            expect(defaultElement.nativeElement.innerText).toBe('ADF_CLOUD_TASK_HEADER.PROPERTIES.CANDIDATE_USERS_DEFAULT');
+        });
     });
 
     describe('Config properties', () => {
 
-        it('should show only the properties from the configuration file', async(() => {
+        it('should show only the properties from the configuration file', async () => {
             spyOn(appConfigService, 'get').and.returnValue(['assignee', 'status']);
             component.ngOnChanges();
             fixture.detectChanges();
             const propertyList = fixture.debugElement.queryAll(By.css('.adf-property-list .adf-property'));
 
-            fixture.whenStable().then(() => {
-                expect(propertyList).toBeDefined();
-                expect(propertyList).not.toBeNull();
-                expect(propertyList.length).toBe(2);
-                expect(propertyList[0].nativeElement.textContent).toContain('ADF_CLOUD_TASK_HEADER.PROPERTIES.ASSIGNEE');
-                expect(propertyList[1].nativeElement.textContent).toContain('ADF_CLOUD_TASK_HEADER.PROPERTIES.STATUS');
-            });
-        }));
+            await fixture.whenStable();
+            expect(propertyList).toBeDefined();
+            expect(propertyList).not.toBeNull();
+            expect(propertyList.length).toBe(2);
+            expect(propertyList[0].nativeElement.textContent).toContain('ADF_CLOUD_TASK_HEADER.PROPERTIES.ASSIGNEE');
+            expect(propertyList[1].nativeElement.textContent).toContain('ADF_CLOUD_TASK_HEADER.PROPERTIES.STATUS');
+        });
 
-        it('should show all the default properties if there is no configuration', async(() => {
+        it('should show all the default properties if there is no configuration', async () => {
             spyOn(appConfigService, 'get').and.returnValue(null);
             component.ngOnChanges();
             fixture.detectChanges();
 
-            fixture.whenStable().then(() => {
-                const propertyList = fixture.debugElement.queryAll(By.css('.adf-property-list .adf-property'));
-                expect(propertyList).toBeDefined();
-                expect(propertyList).not.toBeNull();
-                expect(propertyList.length).toBe(component.properties.length);
-                expect(propertyList[0].nativeElement.textContent).toContain('ADF_CLOUD_TASK_HEADER.PROPERTIES.ASSIGNEE');
-                expect(propertyList[1].nativeElement.textContent).toContain('ADF_CLOUD_TASK_HEADER.PROPERTIES.STATUS');
-            });
-        }));
+            await fixture.whenStable();
+            const propertyList = fixture.debugElement.queryAll(By.css('.adf-property-list .adf-property'));
+            expect(propertyList).toBeDefined();
+            expect(propertyList).not.toBeNull();
+            expect(propertyList.length).toBe(component.properties.length);
+            expect(propertyList[0].nativeElement.textContent).toContain('ADF_CLOUD_TASK_HEADER.PROPERTIES.ASSIGNEE');
+            expect(propertyList[1].nativeElement.textContent).toContain('ADF_CLOUD_TASK_HEADER.PROPERTIES.STATUS');
+        });
     });
 
     describe('Task errors', () => {
@@ -543,13 +538,13 @@ describe('TaskHeaderCloudComponent', () => {
             component.ngOnChanges();
         }));
 
-        it('should call the loadTaskDetailsById when both app name and task id are provided', async(() => {
+        it('should call the loadTaskDetailsById when both app name and task id are provided', () => {
             spyOn(component, 'loadTaskDetailsById');
             component.appName = 'appName';
             component.taskId = 'taskId';
             component.ngOnChanges();
             fixture.detectChanges();
             expect(component.loadTaskDetailsById).toHaveBeenCalledWith(component.appName, component.taskId);
-        }));
+        });
     });
 });