Cypress: Problem with clear() and type() on text input field (maxlength)

[kapalkat]

Current behavior:

Cypress is not able to clear() and type() in text input field.
The problem is not constant, it appears in my tests only in few scenarios.

Desired behavior:

The clear() and type() actions should always work for input text type field.

Steps to reproduce:

My test looks like follow:
I am updating existing element. The update form input text type field:

\<input _ngcontent-trw-171="" class="form-control ng-untouched ng-pristine ng-valid" id="coalTypeDescr" maxlength="25" name="coalTypeDescr" ngcontrol="coalTypeDescr" required="" type="text"\>

My test first needs to clear existing value and add new one:

   cy.get('#coalTypeDescr')
      .clear()
      .type("CoalToEditEdited")

Console doesn't show any problem with both functions.

Versions

Cypress 3.0.1, macOS 10.13.5, Chrome

[kapalkat]

Next input element with the same problem element type text. I have attached the html code and it's CSS.
Input.zip

[kapalkat]

I can't type() on the field either as it already has max length filled in, {backspace} or {del} doesn't work so I am not able to edit the form. That's really important problem. Is there any workaround for this?

[Bkucera]

@kapalkat I'm actively working on this right now. Should be in a patch release. This is closely related to other cy.type issues.

[kapalkat]

@Bkucera Thanks. Looking forward to the patch. In the meantime, I am using a workaround with jQuery; getting the maxlength attribute and increasing it before calling clear() or type() functions on the input element.

[lunheur]

@kapalkat Thanks! Workaround works for me. I hadn't even realized the maxlength was the issue. Looking forward to 3.0.3

[kathrinkuenzli]

I have got a similar issue with Cypress Version 4.11.0.
.clear().type('sometext') does not work. .type('{selectall}sometext') works instead.

Input Field looks like:

<input _ngcontent-aec-c59="" class="mat-input-element mat-form-field-autofill-control cdk-text-field-autofill-monitored ng-pristine ng-valid ng-touched" formcontrolname="link" matinput="" ng-reflect-maxlength="2000" ng-reflect-name="link" ng-reflect-placeholder="z.B. google.ch" maxlength="2000" id="mat-input-1" placeholder="z.B. google.ch" aria-invalid="false" aria-required="false">

[fityanos]

@jennifer-shehane

+1 for @kathrinkuenzli

It's not working for me as well

HTML
<input placeholder="something" id="eleId" type="something" value="something">

Spec.js
cy.get("#eleId").clear().type("[email protected]");

You can notice from the HTML example that I already have some text in the field, however, getting that element and clear it to type [email protected] is not working

Actual behavior:
the input field value will be [email protected]

"cypress": "5.4.0"

[jennifer-shehane]

This issue will be closed to further comment as the exact issue here was resolved and tested.

If you're experiencing a bug similar to this in Cypress, please open a new issue with a fully reproducible example that we can run. There may be a specific edge case with the issue that we need more detail to fix.