Typing {{arrowUp}} should trigger event on input[type=number]

[Abdillah]

Current behavior

Currently, get('input[type=number]').type('{{arrowUp}}') has the same behavior as calling input.stepUp() only which will not trigger any event, like when we press arrow up on the input.

Desired behavior

Typing {{arrowUp}} should be equal as pressing arrow up button on a focused number input. Pressing real arrow up button will trigger input event.

Test code to reproduce

This will not show any alert:

<input type="number" oninput="alert('Testing')" value=3>

cy.get('#a input').type('{upArrow}').should(haveValue(4))

versus

<input type="number" oninput="alert('Testing')" value=3>

cy.get('#a input').type(4).should(haveValue(4))

which will show an alert. Or try the input DOM in browser and press arrow up button.

Cypress Version

13.2.0

Node version

18.16.0

Operating System

NixOS 23.11

Debug Logs

No response

Other

No response

[thevladisss]

Can I collaborate in resolving this bug?

[Abdillah]

Sure @thevladisss.

At initial discovery, this part seems the one responsible.

[thevladisss]

@Abdillah I spent some time investigating this issue and it appears like your issue is quite natural, as under the hood it calls "stepUp" and "stepDown" on input type number. This method does not trigger any event on the input, unlilke clicking arrows on input type number.

@jennifer-shehane I think that {upArrow} actually implies that user clicks up arrow key, which does trigger events on the input, as it is same as clicking on the arrows. Do you beleive I can work on implementing this behavior?

[Abdillah]

Yes, that is spot on.

That doesn't match with user expectation using Cypress for real world arrow up behavior.
I believe it can be improved.

[thevladisss]

@jennifer-shehane Can I start working on this?

[Abdillah]

Arrow up can be simulated using the following way (a work around).

const arrowDown = $el => {
    const v = parseInt($el.val())++
    cy.wrap($el).type('{selectAll}' + v)
}

const arrowDown = $el => {
    const v = parseInt($el.val())--
    cy.wrap($el).type('{selectAll}' + v)
}

cy.get('input[type=number]').then(arrowUp)
cy.get('input[type=number]').then(arrowDown)

Edited: use .type() instead of val()

[thevladisss]

Arrow up can be simulated using the following way (a work around).

const arrowUp = $el => $el.val($e.val()++)

const arrowDown = $el => $el.val($e.val()--)



cy.get('input[type=number]').then(arrowUp)

cy.get('input[type=number]').then(arrowDown)

I think there should be a solution rather than workaround. There is certain specific behaviour about type number that cannot be just covered by adding value unfortunately

[Abdillah]

@thevladisss Actually, Cypress team has considered this as a bug, you can just create a PR and request them for review rather than waiting for them (they have lots of issue to triage). Currently I'm not available to tackle this issue but need to get things done, hence the workaround.

[Abdillah]

If you need some discussion, @thevladisss, you can throw it here. I can be your second brain.

[thevladisss]

If you need some discussion, @thevladisss, you can throw it here. I can be your second brain.

Thanks! Once I get something I will comeback here.

[cypress-bot]

Released in 13.12.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v13.12.0, please open a new issue.