Search code examples
javascriptinputnumberscypress

Unable to Type in "number" input field in Chrome 93 Cypress 8.4.1

I am using chrome version 96 and cypress version 8.4.1. Whenever I try to type in an input field with type="number" cypress immediately fails with the error:

InvalidStateError: Failed to read the 'selectionStart' property from 'HTMLInputElement': The input element's type ('number') does not support selection.

HTML Code: <input type="number" name="phone_lead" id="phone_lead" placeholder="+92 301 2345678" class="required" autocomplete="off">

-Input Phone number:

cy.get('#phone_lead').click({force:true}).type('16777')

Any solution/suggestion how to resolve this issue?

Solution

  • The problem isn't reproducible, either with Chrome 93 or 96 (you mention both versions). The test passes when using that HTML in isolation.

    Technically that error comes because of the type="number", from HTMLInputElement.setSelectionRange()

    Note that according to the WHATWG forms spec selectionStart, selectionEnd properties and setSelectionRange method apply only to inputs of types text, search, URL, tel and password. Chrome, starting from version 33, throws an exception while accessing those properties and method on the rest of input types. For example, on input of type number: "Failed to read the 'selectionStart' property from 'HTMLInputElement': The input element's type ('number') does not support selection".

    But Cypress has internal checks that avoid selectionStart for inputs of type number,

    const canSetSelectionRangeElementRe = /^(text|search|URL|tel|password)$/

    Since you are dealing with a phone number, the input type should (theoretically) be changed to type="tel".

    <input type="tel" 
  name="phone_lead" id="phone_lead" 
  placeholder="+92 301 2345678" 
  class="required" 
  autocomplete="off">