Digits Scrambled when using type on tel input field with input mask #940

calvinballing · 2017-11-20T23:08:19Z

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)

jennifer-shehane · 2017-11-21T14:19:30Z

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

lardissone · 2017-11-24T18:36:45Z

Also doesn't works with text-mask.

lardissone · 2017-11-24T19:11:30Z

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.

John758364 · 2017-11-27T17:55:39Z

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')
});

brian-mann · 2017-11-27T21:12:52Z

@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

John758364 · 2017-11-27T21:15:00Z

@brian-mann I am on 1.1.2

brian-mann · 2017-11-27T22:42:42Z

@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.

John758364 · 2017-11-28T12:56:33Z

@brian-mann Why does Cypress look at max-length, why shouldn't the application handle that?

brian-mann · 2017-11-28T17:37:35Z

Because maxlength is irrelevent when setting the value property directly

davidszepernick · 2018-01-05T23:01:59Z

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 · 2018-01-05T23:03:38Z

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"

paulbao · 2018-05-02T02:06:57Z

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.

LeightonDarkins · 2018-05-28T12:05:07Z

@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')

kuceb · 2018-06-29T14:26:55Z

I'm currently working on this. An upcoming patch release should fix this issue - this should be true for many cy.type related bugs

this grew to a large PR fixing many cy.type issues. fix #365 fix #420 fix #586 fix #593 fix #596 fix #610 fix #651 fix #940 fix #1002 fix #1108 fix #1171 fix #1209 fix #1234 fix #1366 fix #1381 fix #1684 fix #1686 fix #1926 fix #2056 fix #2096 fix #2110 fix #2173 fix #2187

jennifer-shehane added the pkg/driver This is due to an issue in the packages/driver directory label Nov 21, 2017

jennifer-shehane added stage: ready for work The issue is reproducible and in scope type: bug labels Nov 21, 2017

jennifer-shehane added the good first issue Good for newcomers label Nov 27, 2017

brian-mann mentioned this issue Dec 4, 2017

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

Closed

jennifer-shehane mentioned this issue Jan 31, 2018

.type() improvements #1241

Closed

jennifer-shehane added Epic Requires breaking up into smaller issues and removed Epic Requires breaking up into smaller issues labels Jan 31, 2018

jennifer-shehane mentioned this issue May 11, 2018

type() won't tipe in autoformating field #1684

Closed

kuceb added this to the 3.0.3 milestone Jun 29, 2018

kuceb self-assigned this Jun 29, 2018

kuceb removed the good first issue Good for newcomers label Jun 29, 2018

kuceb mentioned this issue Jul 16, 2018

Fix issues with cy.type #2016

Merged

kuceb added pkg/driver This is due to an issue in the packages/driver directory and removed pkg/driver This is due to an issue in the packages/driver directory stage: ready for work The issue is reproducible and in scope labels Jul 16, 2018

brian-mann closed this as completed in #2016 Jul 23, 2018

jennifer-shehane added stage: pending release and removed stage: needs review The PR code is done & tested, needs review stage: needs investigating Someone from Cypress needs to look at this stage: in progress labels Jul 23, 2018

jennifer-shehane removed stage: pending release labels Nov 5, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Digits Scrambled when using type on tel input field with input mask #940

Digits Scrambled when using type on tel input field with input mask #940

calvinballing commented Nov 20, 2017

jennifer-shehane commented Nov 21, 2017 •

edited

Loading

lardissone commented Nov 24, 2017

lardissone commented Nov 24, 2017

John758364 commented Nov 27, 2017 •

edited by jennifer-shehane

Loading

brian-mann commented Nov 27, 2017 •

edited

Loading

John758364 commented Nov 27, 2017

brian-mann commented Nov 27, 2017

John758364 commented Nov 28, 2017

brian-mann commented Nov 28, 2017

davidszepernick commented Jan 5, 2018

davidszepernick commented Jan 5, 2018

paulbao commented May 2, 2018 •

edited

Loading

LeightonDarkins commented May 28, 2018

kuceb commented Jun 29, 2018

Digits Scrambled when using type on tel input field with input mask #940

Digits Scrambled when using type on tel input field with input mask #940

Comments

calvinballing commented Nov 20, 2017

Is this a Feature or Bug?

Current behavior:

Desired behavior:

How to reproduce:

Test code:

Additional Info (images, stack traces, etc)

jennifer-shehane commented Nov 21, 2017 • edited Loading

lardissone commented Nov 24, 2017

lardissone commented Nov 24, 2017

John758364 commented Nov 27, 2017 • edited by jennifer-shehane Loading

Test code:

brian-mann commented Nov 27, 2017 • edited Loading

John758364 commented Nov 27, 2017

brian-mann commented Nov 27, 2017

John758364 commented Nov 28, 2017

brian-mann commented Nov 28, 2017

davidszepernick commented Jan 5, 2018

davidszepernick commented Jan 5, 2018

paulbao commented May 2, 2018 • edited Loading

update

LeightonDarkins commented May 28, 2018

kuceb commented Jun 29, 2018

jennifer-shehane commented Nov 21, 2017 •

edited

Loading

John758364 commented Nov 27, 2017 •

edited by jennifer-shehane

Loading

brian-mann commented Nov 27, 2017 •

edited

Loading

paulbao commented May 2, 2018 •

edited

Loading