Cypress cy.type({enter} fails when used multiple times within for loop

Question

The cypress cy.type({enter} fails when I use this in a for loop to enter multiple data in text field. If I have to enter only one value then in that case that works.

Please suggest me some solution for this. Here is my code :-

value = cat, bat, mice, fox

enterMultipleValue(value) {
        var val = value;
        var val_str = val.split(",");
        for (var i = 0; i < val_str.length; i++) {
            cy.get('input[mat-option="text"]')
                .type(val_str[i]+"{enter}", { force: true });
                // .wait(3000)
                // .type('{enter}');
        }
 }

Answer 1

The code works ok, but what do you want to see?

const value = "cat, bat, mice, fox"
const vals = value.split(",");
for (var i = 0; i < val_str.length; i++) {
  cy.get('input[mat-option="text"]')
    .type(val_str[i]+"{enter}")
    .wait(3000)
    .type('{enter}');
}

This shows "cat bat mice fox" in the input box.

If you want to see them one at a time, add a .clear() command

const value = "cat, bat, mice, fox"
const vals = value.split(",");
for (var i = 0; i < val_str.length; i++) {
  cy.get('input[mat-option="text"]')
    .type(val_str[i]+"{enter}")
    .wait(3000)
    .clear();
}

This shows each one for 3 seconds, then the next, etc.

But is this a select box? mat-option is used on an Angular Material Select. Are you trying to do a multiple-select?