Cypress get wrong field in some case

Current behavior:

Running my tests in angular 8 application I have a strange error happening when I try to write in a specific field. In my case, I want to write in a material autocomplete field but Cypress for some reason select another field that does not have the same selector.

I have about 70 test and this wrong behavior happens only in a specific view and in a specific field. (it happens in the invoice page when I try to write in customer autocomplete)

If I run 2 tests sequentially and in both of them I try to select the customer autocomplete input, the second one fails every time, and if I try to invert the order of the tests fails always the second one.

Desired behavior:

After every test, I have a page reload, after that, I try to write in customer autocomplete to select the customer.

Steps to reproduce:

I can’t share all the code, it is on a complex page and also in different components. Here you can see the error in a video: https://drive.google.com/open?id=1_pDxDW3q4rzoAfQt9G5ba-EsjlQMcd5L

Here you can find cypress code: codeshare

it('update the total amount with manual item', () => {
  cy.route('GET', '**/contacts**').as('contacts');

  cy.visit("/documents/new?documentType=SALES_ORDER");
  cy.wait('@current');
  cy.get('#documentTitle').should('be.visible');

  cy.get('[data-cy=contactSearchAutocomplete]').type('test');

  cy.wait('@contacts');
  cy.wait(1000); // wait auotcomplete
  cy.get('[data-cy=contactSearchAutocomplete]').type('{downarrow}');
  cy.get('[data-cy=contactSearchAutocomplete]').type('{enter}');


  cy.get('#unitPrice0').type('25');
  cy.get('#percentageDiscount0').type('10');
  cy.get('#discountAmount0').type('5');
  cy.get('#taxRate0').click();
  cy.get('#taxRate0').type('{enter}');

  cy.get('[data-cy=totalAmount]').should('contain', '17,50');
});

Here the field code: https://codeshare.io/ayW4gb

<input
  (blur)="hideSearchContactHint()"
  (focus)="showSearchContactHint()"
  (keydown)="onKeydown($event)"
  [formControl]="contactSearchField"
  [matAutocomplete]="customerAuto"
  autocomplete="off"
  matInput
  data-cy="contactSearchAutocomplete"
  name="_ch"
  placeholder="{{ 'searchcomponent.labels.searchcontact' | translate }}"
  type="search"
/>

stackoverflow

Versions

cypress 3.6 and 3.7 chrome 78 node 12.1 angular 8.2.13 windows 10

[jennifer-shehane]

Since this issue hasn’t had activity in a while, we’ll close the issue until we can confirm this is still happening. Please comment if there is new information to provide concerning the original issue and we’d be happy to reopen.

[aceleghin]

After some digging, I figure out that probably it’s a focus problem, my component makes cypress to lose focus on the selected field exactly when it tries to type in it. Strange thing is that the first test always passes (probably it’s slower or faster) and if I put some random delay before type in the first field the tests work well.