Cannot type spaces in email input

[jennifer-shehane]

Current behavior:

You can't type spaces within an input of type="email". I came across this while trying to debug #1298

Desired behavior:

Honestly, this likely doesn't matter to anyone because...why are you typing spaces in email fields? But I wanted to document since the behavior differs from typing manually in the browser.

How to reproduce:

it('test', () => {
  cy.visit('https://example.cypress.io/commands/actions')
  cy.get('input[type="email"]').type('my email')
})

• Cypress Version: 2.0.0, 3.4.0

[kuceb]

This is due to type='email' inputs automatically trimming end whitespace when reading off the value property, and will automatically trim the whitespace when setting value directly. Will only really be solved by native events.

[bbugh]

FYI, the example documentation here: https://docs.cypress.io/guides/getting-started/writing-your-first-test.html includes adding a space to an email field, which breaks: [email protected]. This works fine while manually typing in [email protected] but the example spec fails, presumably because of this issue.

describe('My First Test', function () {
  it('Gets, types and asserts', function () {
    cy.visit('https://example.cypress.io')

    cy.contains('type').click()

    // Should be on a new URL which includes '/commands/actions'
    cy.url().should('include', '/commands/actions')

    // Get an input, type into it and verify that the value has been updated
    cy.get('.action-email')
      .type('[email protected ]')     
      .should('have.value', '[email protected]') // ❌ Fails here without space
  })
})

[yktoo]

The same seems to apply to <input type="url">. Which is a bit annoying since you can type it in there by hand, but not using Cypress.

[automaticdreams]

came across this issue today, trying to test validation rules. Given that a real user can type spaces, I need cypress to be able to replicate the behaviour

[tit]

I found some workaround.
Use .invoke('val', 'with space') Instead of .type('with space') for input[type="email"] field.

[cypress-app-bot]

This issue has not had any activity in 180 days. Cypress evolves quickly and the reported behavior should be tested on the latest version of Cypress to verify the behavior is still occurring. It will be closed in 14 days if no updates are provided.

[cypress-app-bot]

This issue has been closed due to inactivity.

[jchatard]

This is still an issue in v12.14.0

[lmiller1990]

This will be an issue in core for the foreseeable future since implementing native events is a fairly big change and not something on the roadmap right now.

Good news is this can already work using cypress-real-events. I just tested it out, and it works perfectly. Here's my code:

/// <reference types="cypress" />
describe('page', () => {
  it('works', () => {
    cy.visit('http://localhost:8000')
    cy.get('input').type('a b c') // not working
    cy.get('input').clear().realType('a b c') // works as expected
  })
})

I use cypress-real-events in all my projects, and even internally in the Cypress repo. I'd recommend using it, it's a great library and works beautifully.