Cypress: clear() does not work on <input type="number" class="form-input form-input--number" step="1" value="1">

[rwralitera]

I have a function:
export function getInput(dataName: string) {
return cy.get([data-name="${dataName}"] ${Selectors.formInput});
}

And I use it like that:
formUtils.getInput(p2).clear().type("3");

But:
the function clear() does not Clear my input which is like that:

Then I got:
32 instead of 3

NB: In my field, I am able to UP and DOWN the value with step=1

Current behavior:

Desired behavior:

When I do: cy.get('field').clear().type('3')
I should have 3 but not an other value like 32

[jennifer-shehane]

Hey @bentrole, does the same behavior happen when simply written out as cy.get().clear() without the getInput function

It would also be most helpful to have a reproducible example we could run.

[rwralitera]

I just tried with: cy.get([data-name="${p2}"] .form-input).clear().type(p1);

And it does not work.

NB: the button is like that:

There is a default value=1 into the field and the field have an UP and DOWN little button that can increment the default number.

[fhueter]

Was there any progress made on this bug?
I discovered that the values of the input fields with type=number which were cleared by Cypress looks fine but using that values to calculate a sum for example fails. Skipping the clear solves the problem but I need to clear the values first. The weird thing is that the problems only occur for values between 0 and 1.

<input type="number" data-test="testfield1" step="0.01" />

cy.get('[data-test="testfield1"]').type('0.1') works and the sum is calculated later
cy.get('[data-test="testfield1"]').clear().type('0.1') looks fine but the sum is not calculated afterwards
cy.get('[data-test="testfield1"]').clear().type('1.1') works as well and the sum is calculated as expected

Might this be related to the browser language? I'm working with a German browser which shows '0.1' as '0,1'.

Any ideas on how to fix this are highly appreciated.

[contactashish13]

The workaround that works for me is to use a mix of jQuery invoke and cypress type. This works in the Gutenberg editor of wordpress too.

cy.get('the-number-field').invoke('val', '').clear().type('1000').blur();

[sererejegede]

My situation is a bit similar but differs in that the

<input type="number" />

cannot be empty so rather than whitespace, it'd have a value of 0 even if you physically press backspace on the field and that is by design.

Problem is that the field has a default value of 1 and I want to type 5 but it would always resolve to 50
Code looks something like this

cy.get('number-field').clear().type(5)

Just before this, value of the input field is 1.
Expected behavior is that Cypress clears the input field and types in 5 but it rather

• clears the field
• and because of the fact that the field cannot be empty by design, the value becomes 0
• then it types in 5 but instead of typing at the back, it types in the front
• which makes the value 50

@contactashish13's workaround works for me though

[DominicGaribaldi]

We came across this same issue but the above solution didn't work for us... for those having the same problem we managed to resolve it using the following:

cy.get("input")
    .focus()
    .type("{selectall}")
    .type("some value")