.clear() on an input at maxlength doesn’t work

[KittyGiraudel]

• Operating System: 10.12.6
• Cypress Version: 1.1.3
• Browser Version: n/A

Is this a Feature or Bug?

A bug.

Current behavior:

Calling .clear() on an input with a value as long as its maxlength attribute value leaves the value untouched.

Desired behavior:

Calling .clear() on an input with a value as long as its maxlength attribute value empties the field.

How to reproduce:

1. Create an input.
2. Set its maxlength to n.
3. Set its value to a string of n characters.
4. Call .clear() on it.

Test code:

cy.get('input[maxlength]').clear()

Additional Info (images, stack traces, etc)

I suspect the problem to be here:

cypress/packages/driver/src/cypress/keyboard.coffee

Lines 541 to 548 in 324d549

	if ml is 0 or ml > 0
	## check if we should update the value
	## and fire the input event
	## as long as we're under maxlength
	if el.value.length < ml
	maybeUpdateValueAndFireInput()
	else
	maybeUpdateValueAndFireInput()

There is a max length, but the value is already at its max length, so it results on a no-op, when it really should clear the field.

[brian-mann]

Yes this is a known problem.

It was first discussed here: #940 (comment)

I started working on a solution for this and the text-mask problems but have not finished.

[John758364]

Any update one this?

[verheyenkoen]

Here's a test (I put this in keyboard_spec.coffee) to prove this bug. I didn't commit this since I didn't know if this is the right place (no other tests found for .clear()) and couldn't fix the bug so I just drop it here:

    it "can clear a field with maxlength", ->
      Cypress.$('input')
        .attr('maxlength', 5)
        .val('abcde')

      cy.get('input')
        .clear()
        .should('have.value', '')

[jennifer-shehane]

@verheyenkoen there are tests in the type_spec.coffee. If you can, put these tests in there and open a WIP pull request.

[verheyenkoen]

I found there appears to be a lot more bugs related to fields with maxlength, all with the same cause. Special keystrokes like backspace, del, leftarrow, rightarrow,... all seem to be ignored. Don't know about downarrow and uparrow as those only make sense in textareas and don't know if maxlength is a thing there.

[brian-mann]

Yup these have been noted / documented before in an issue somewhere. I'll dig and find them. We've been experimenting with moving to native events to bypass all of these issues - although we'll likely still give you a simulated .type() for performance reasons, so it's still important to fix.

[kapalkat]

Seems I have a similar problem. I have reported it under #2056

[kuceb]

I'm actively working on this issue and more related to cy.type(). Fixes should be in a patch release coming up

[vedmant]

Is there a workaround how to actually clear a field with maxlength?

[kapalkat]

So the problem (for me at least) is when the input filled in filled in with the maximum allowed characters. So what I do, I use jQuery to increase the maxlength parameter like so:
cy.get('#coalTypeDescr')
.as('coalTypeDescr')
.then(($coalTypeDescr) => {
Cypress.$($coalTypeDescr).attr('maxlength', 26)
})
cy.get('@coalTypeDescr')
.clear()
.type()
This works fine for me.

[ednailson]

I have the same problem!

[c32hedge]

I've been having some flaky tests where cy.clear() sometimes fails, and the original value of the input field was the max length of the field. Looks like a recent regression? I've at least seen it in 3.7.0.

[kuceb]

@c32hedge can you give an example of a failure, with html and test code?

[jennifer-shehane]

@c32hedge Please open a new issue with a reproducible example (HTML + test code). This original issue has been addressed and we have tests around it. Likely you have another case that is very similar with a slight different.