typeText() and replaceText() not registering React onChange() event in WebView

[pagman77]

What happened?

NOTE: Keyboard Hardware has been DISABLED.

I am writing some tests to get through the authorization in my application, the flow of which is currently in a WebView. I have tried just about everything to get the text to register the onChange event. The onChangeEvent() on the input field needs to fire, as it has a regex check to make sure the email address is valid before rendering the submit button.

• The correct element is being targeted
• I can see the text being entered into the field
• Keyboard Hardware has been disabled in the simulator

I am trying to assert that the value of the element has changed, and the test shows that the value of the input element is an empty string.

What was the expected behaviour?

I expect the onChange event to fire, and the value of the text in the element to be the value that was added with typeText().

After the test suite fails, if you click the field and hit the delete button on the simulator once, the onChange event fires and the text field updates as intended. Why does this not happen when typeText is called?

Was it tested on latest Detox?

• I have tested this issue on the latest Detox release and it still reproduces.

Did your test throw out a timeout?

• I have followed the instructions under Identifying which synchronization mechanism causes us to wait too much.

Help us reproduce this issue!

No response

In what environment did this happen?

Detox version: 20.11.1
React Native version: 0.69.10
Has Fabric (React Native's new rendering system) enabled: no
Node version: 16.10.0
Device model: Pixel4
Android version: API31(Android 12) and API33(Android13)
Test-runner (select one): jest 29.6.1

Detox logs

N/A - Test suite working as intended

Device logs

N/A - Devices working as intended

More data, please!

I have tried MANY combinations of various things such as:

• Targeting the element
• Targeting the class
• typeText, clearText, typeText
• replaceText, clearText, replaceText
• focusing the element before input
• tapping the screen after the input

[17Amir17]

Seeing this too

[pagman77]

@17Amir17 I noticed a little discrepancy on the input field in our codebase that could possibly be why this isn't working. We are using defaultValue on our input field instead of just value. I have a PR in to fix that and will update this ticket based on the results.

[noomorph]

@pagman77, it would be helpful if you could provide a minimal repro (HTML excerpt or URL), so we can set up a webview and review the test scenario with the reported bug.

[pagman77]

@noomorph I have a sneaky suspicion that it could be on my end at this point. If the bug still persists after the fix on my end I will give a little more detail. It's the auth for our platform so I have to be careful about what I share. Thanks!

[noomorph]

Oh, I see. I kinda can see a hypothetical reason why onchange might be not fired if you type text and don't change focus, but not sure if this is that case.

[17Amir17]

I manually triggered it like this in the end (have a react app in webview)

await web.element(by.web.cssSelector('[data-test="login-password-input"]')).runScript(`
      function type (element) {
        const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;
        nativeInputValueSetter.call(element, 'password');
        element.dispatchEvent(new Event('input', { bubbles: true}));
      }
    `)

[jeffFG]

you are hero

[pagman77]

@17Amir17 This is actually magic, nice work!

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest Detox and report back.

Thank you for your contributions!

For more information on bots in this repository, read this discussion.