diff --git a/src/app/examples/grid-rowdetail.component.ts b/src/app/examples/grid-rowdetail.component.ts
index f2187c4c7..1232b1efc 100644
--- a/src/app/examples/grid-rowdetail.component.ts
+++ b/src/app/examples/grid-rowdetail.component.ts
@@ -292,8 +292,8 @@ export class GridRowDetailComponent implements OnDestroy, OnInit {
         const itemDetail = item;
 
         // let's add some extra properties to our item for a better async simulation
-        itemDetail.assignee = randomNames[this.randomNumber(0, 10)];
-        itemDetail.reporter = randomNames[this.randomNumber(0, 10)];
+        itemDetail.assignee = randomNames[this.randomNumber(0, 9)] || '';
+        itemDetail.reporter = randomNames[this.randomNumber(0, 9)] || '';
 
         // resolve the data after delay specified
         resolve(itemDetail);
diff --git a/test/cypress/e2e/example21.cy.ts b/test/cypress/e2e/example21.cy.ts
index 9b538e33c..d44f04254 100644
--- a/test/cypress/e2e/example21.cy.ts
+++ b/test/cypress/e2e/example21.cy.ts
@@ -44,14 +44,16 @@ describe('Example 21 - Row Detail View', () => {
     cy.get('@detailContainer')
       .find('input')
       .invoke('val')
-      .then((text) => (assignee = text as string));
+      .then((text) => (assignee = `${text || ''}`));
+
+    cy.wait(10);
 
     cy.get('@detailContainer')
       .find('[data-test=assignee-btn]')
       .click()
       .then(() => {
         if (assignee === '') {
-          expect(alertStub.getCall(0)).to.be.calledWith(`No one is assigned to this task.`);
+          expect(alertStub.getCall(0)).to.be.calledWith('No one is assigned to this task.');
         } else {
           expect(alertStub.getCall(0)).to.be.calledWith(`Assignee on this task is: ${assignee.toUpperCase()}`);
         }