Cypress: Digits Scrambled when using type on tel input field with input mask
- Operating System: Windows 10
- Cypress Version: 1.1.0
- Browser Version: Chrome
Is this a Feature or Bug?
Bug
Current behavior:
When using .type() on tel inputs with masks, the numbers are entered out of order. That is, digits are added to the end of the field when they meet a special character.
Desired behavior:
The digits are entered into the field in order.
How to reproduce:
Call .type() on a tel input field with an input mask that provides hyphens, parentheses, or other formatting
Test code:
cy.get("#PrimaryPhone").type("1234567890").should('have.value', "(123) 456-7890")
//The above expected output is based on the input mask used by my application.
//Your mileage may vary.
Additional Info (images, stack traces, etc)
calvinballing
All 14 comments
Can confirm, fails in v1.1.1. To replicate:
Test code
it('Type in tel input with input mask', function(){
cy.visit('http://robinherbots.github.io/Inputmask/')
cy.contains('Demo').click()
cy.get('input[data-inputmask-alias]').first()
.type('11212017')
.should('have.value', '11/21/2017')
})
Failed message
jennifer-shehane
on 21 Nov 2017
Also doesn't works with text-mask.
lardissone
on 24 Nov 2017
Typing the complete value works with text-mask.
For example I have a mask for times like: 10:30 am and if I type it literally .type('10:30 am') it works.
lardissone
on 24 Nov 2017
I have something similar
Steps to reproduce
Run this on localhost:8000
<html>
<head>
</head>
<body>
<input id="billingZip" name="zip" type="tel" value="55344" placeholder="" maxlength="5" data-track-id="" class="sessioncamhidetext form-control ">
</body>
</html>
Run the following tests
Test code:
it('Not Working Example', () => {
cy.visit('localhost:8000')
cy.get('#billingZip').clear().type('54321')
});
it('Workaround Example', () => {
cy.visit('localhost:8000')
cy.get('#billingZip').invoke('attr', 'maxlength', '10').clear().type('54321')
});
JPHamlett1993
on 27 Nov 2017
@JPHamlett1993 actually after looking at your code I think you're referring to a bug in 1.1.1 that we've fixed and released in 1.1.2.
Update to that and it should work.
https://docs.cypress.io/guides/references/changelog.html#1-1-2
brian-mann
on 27 Nov 2017
@brian-mann I am on 1.1.2
JPHamlett1993
on 27 Nov 2017
@JPHamlett1993 I confirmed your issue. I think it's a separate one from this. It's another edge case around the maxlength. Basically what's happening is that your input is already at maxlength, and then cypress is not applying the special character because it thinks it's been exceeded.
brian-mann
on 27 Nov 2017
@brian-mann Why does Cypress look at max-length, why shouldn't the application handle that?
JPHamlett1993
on 28 Nov 2017
Because maxlength is irrelevent when setting the value property directly
brian-mann
on 28 Nov 2017
I have an element as follows:
cy.get('#auth_column').clear() does not work for this field
( I dont think any of the special character sequences are working either.)
davidszepernick
on 6 Jan 2018
sorry, as follows:
input type="text" name="auth_column" id="auth_column" value="AB" maxlength="2" minlength="2" class="av-touched av-pristine av-valid form-control"
davidszepernick
on 6 Jan 2018
There's workaround that might be helpful to people who have the same issue.
cy.get("#PrimaryPhone").then($input => $input.val('(123) 456-7890')).should('have.value', "(123) 456-7890")
update
It seems that this won't actually change the input value when it lost focus. I've tried sth like $input.attr('value', '(123) 456-7890') but not working for me.
paulbao
on 2 May 2018
@paulbao Extending on your workaround, I found that overriding the value worked great, but I still needed to call .type() to trigger an onChange event.
So I chose to simulate clear() by emptying the input value, then typing in the new value I wanted:
cy.get('#UserInfoDialog input')
.then($input => $input.val(''))
.type('123')
.should('have.value', '123')
LeightonDarkins
on 28 May 2018
I'm currently working on this. An upcoming patch release should fix this issue - this should be true for many cy.type related bugs
Bkucera
on 29 Jun 2018
Related issues
simonhaenisch
路
3Comments
SecondFlight
路
3Comments
rbung
路
3Comments
brian-mann
路
3Comments
carloscheddar
路
3Comments
Most helpful comment
I'm currently working on this. An upcoming patch release should fix this issue - this should be true for many
cy.typerelated bugs