Not possible to type text in PrimeReact number input

[wombatka]

What is your Scenario?

I cannot type text into number input

What is the Current behavior?

Nothing is typed when use t.typeText

What is the Expected behavior?

Text should be typed

What is the public URL of the test page? (attach your complete example)

import {Selector, t} from "testcafe";
fixture example

test("not possible to type in number field", async t => {
await t.navigateTo("https://primereact.org/inputnumber/");
const input = Selector("#integeronly");
await t.typeText(input, "1234", {replace: true});
await t.expect(input.value).eql("1234")
})

What is your TestCafe test code?

import {Selector, t} from "testcafe";
fixture example

test("not possible to type in number field", async t => {
await t.navigateTo("https://primereact.org/inputnumber/");
const input = Selector("#integeronly");
await t.typeText(input, "1234", {replace: true});
await t.expect(input.value).eql("1234")
})

Your complete configuration file

package.json:
{
"name": "testcafeexamples",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "npm test"
},
"author": "",
"license": "ISC",
"dependencies": {
"testcafe": "^3.6.0"
}
}

Your complete test report

• Chrome 124.0.0.0 / Ubuntu 22.04

example
✖ not possible to type in number field

1. AssertionError: expected '42,723' to deeply equal '1234'

   • expected - actual

   -42,723
   +1234

   Browser: Chrome 124.0.0.0 / Ubuntu 22.04

   3 |
   4 |test("not possible to type in number field", async t => {
   5 | await t.navigateTo("https://primereact.org/inputnumber/");
   6 | const input = Selector("#integeronly");
   7 | await t.typeText(input, "1234", {replace: true});

   8 | await t.expect(input.value).eql("1234")
   9 |})

   at (/home/asia/testcafeExamples/index.js:8:33)
   at asyncGeneratorStep (/home/asia/testcafeExamples/index.js:1:38)
   at _next (/home/asia/testcafeExamples/index.js:1:38)

1/1 failed (8s)

Process finished with exit code 1

AssertionError: expected '42,723' to deeply equal '1234'

• expected - actual

-42,723
+1234

Screenshots

No response

Steps to Reproduce

1. run the above test
2. Not ok text is not typed

TestCafe version

3.6.0

Node.js version

21.7.1

Command-line arguments

npm test

Browser name(s) and version(s)

Chrome 124

Platform(s) and version(s)

Ubuntu 22.04.2 LTS

Other

No response

[github-actions]

We appreciate you taking the time to share information about this issue. We reproduced the bug and added this ticket to our internal task queue. We'll update this thread once we have news.

[wombatka]

I would appreciate if someone could come up with some workaround. I tried different approaches and could not come up with any working solution,

[idzmag]

I would appreciate if someone could come up with some workaround. I tried different approaches and could not come up with any working solution,

the only workaround I was able to come up with is

await t.dispatchEvent(numberInput, 'keydown', { key: '1', code: 'Digit1' })
await t.dispatchEvent(numberInput, 'keyup', { key: '1', code: 'Digit1' })
await t.dispatchEvent(numberInput, 'keydown', { key: '2', code: 'Digit2' })
await t.dispatchEvent(numberInput, 'keyup', { key: '2', code: 'Digit2' })
await t.dispatchEvent(numberInput, 'keydown', { key: '3', code: 'Digit3' })
await t.dispatchEvent(numberInput, 'keyup', { key: '3', code: 'Digit3' })

because t.typeText(numberInput, "123", {paste: true}) doesn't trigger any input/change event in this particular use case, so it just changes the view but doesn't update the state

[wombatka]

@idzmag thank's for the workaround! I used it in example and works

test("not possible to type in number field", async t => {
await t.navigateTo("https://primereact.org/inputnumber/");
const input = Selector("#integeronly");
await t.selectText(input).pressKey("delete");
for(const letter of '1,234') {
await t.dispatchEvent(input, 'keydown', { key: letter, code: Digit${letter} });
}
await t.expect(input.value).eql("1,234")
})

[anthonyferroHU]

I'm having a similar issue with typeText I logged here https://stackoverflow.com/questions/78545921/testcafe-3-throws-uncaught-object-was-thrown-throw-error-instead-using-t

[Bayheck]

Hello @anthonyferroHU, it seems you encountered a different issue. Please create a separate ticket using this template and also share a Minimal Working Example in that ticket so that the TestCafe team can research the issue and help you. We do not ask you to share your source code but a reproducible minimal example that we can run on our end.

[Bayheck]

This issue is a rare case scenario that has a workaround. A potential fix is quite complex and thus has a low priority at present. This means that we don’t have immediate plans to work on this task, and I will close it for a while.