tabbing out of field in cypress

Question

I have a dropdown field and text field. Based on the value selected in the dropdown, the text field gets auto-populated with a value. But, this auto-population in the text field happens only if I tab out from the dropdown field.

cy.get('app-screen').find('#MLM-Code').select('I2301').should('have.value', 'I2301');
cy.get('app-screen').find('#MLM-Name').should('have.text', 'NBOOKS');

Now, the second statement gets failed as I am not sure how to tab out of the dropdown field. Is there any option available in Cypress for tabbing out of a field?

Answer 1

I am guessing cypress-plugin-tab

cy.get('app-screen').find('#MLM-Code').select('I2301')
  .should('have.value', 'I2301')
  .focus()
  .tab()    // from plugin library

or if you find the plugin a bit flaky (see discussion),

Cypress.Commands.add('typeTab', (shiftKey, ctrlKey) => {
  cy.focused().trigger('keydown', {
      keyCode: 9,
      which: 9,
      shiftKey: shiftKey,
      ctrlKey: ctrlKey
  })
})

cy.get('app-screen').find('#MLM-Code').select('I2301')
  .focus()
  .typeTab()   

or cypress-real-events has a lot of success

cy.get('app-screen').find('#MLM-Code').select('I2301')
  .realPress("Tab")