cy.clear() not clearing input field properly - Cypress

Question

When I perform

cy.get('#fsp-name').clear().type('random text');

If the text already has value lets say 'assd asd adsdsd' and I perform above command I get something similar to 'random textassd'

I also tried using

cy.get('#fsp-name').clear().should('have.value', '').type('random text');

It works some time and in other times it complains it does not equal to ' '.

And I am trying to do this in a each loop like below

const data = [
{selector:'#name', newValue: 'John'},
{selector:'#phone', newValue: '1234567'}
];
cy.wrap(data).each(field => {
cy.get(field.selector).clear().should('have.value', '').type(field.newValue);
cy.contains('Save').click();
cy.visit('/abc/sdd');
cy.get(field.selector).invoke('val').should('equal', field.newValue);
});

Answer 1

Tried the solutions provided above, but all did not help. I've ended up using this:

cy.get('#my-input-element').focus().clear();

If that doesn't work, the not so happy workaround is:

cy.get('#my-input-element').invoke('val', '');

When .type somehow did not finish the given string (rare cases):

cy.get('#my-input-element').invoke('val', 'Some text here');

Answer 2

I had a similar problem and It was related to focused and click related. I can suggest trying the following two option. I DON'T know it is right or wrong.

cy.get('#fsp-name').click().clear().type('random text');

OR

cy.get('#fsp-name').click().focused().clear().type('random text');

I was talking to the developer and according to him we are using MaterialUI and have some default component using focused and click event differently. After having both options resolved my problem