Textfield not working

[alexandravychytill]

What happened?

With new release (20.19.5) type text for web textfield not working on iOS. It has no error, but there gets no text inserted.

What was the expected behaviour?

await web.element(by.web.id(elementId)).typeText(text) should actually insert the text

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.19.5
React Native version: 0.72.0
Has Fabric (React Native's new rendering system) enabled: yes
Node version: >=16
Device model: iPhone 15
iOS version: 17.2
macOS version: 14.4
Xcode version: 15.2
Test-runner (select one): jest

Detox logs

Detox logs

paste logs here!

Device logs

Device logs

paste your device.log here!

More data, please!

No response

[gosha212]

@asafkorem

[asafkorem]

@alexandravychytill

Detox version: 20.19.4

Are you using 20.19.4 or 20.19.5?
If it's the first, please try to upgrade to 20.19.5 since we made a related fix on this version.

If it still happens after the version upgrade, can you please provide a snippet of the text field that you're trying to tap into so we'll be able to reproduce and investigate that?

[asafkorem]

Oh, you're the reporter of this issue #4426.

JS exception: The input element's type ('email') does not support selection

We made a test that (allegedly?) reproduces your issue and it passes with the fix from the patch version 🙁
I'll need a code snippet or something I can work with

[alexandravychytill]

So I just updated to new version and the logs say "passed " but actually there is no insert of any text.

Textfield:
<input aria-invalid="false" id="P0-0" type="email" class="MuiInputBase-input MuiInput-input css-mnn31">

[asafkorem]

Thanks, I see you're using MUI, I'll check if it might be related. What happens if you change the type attribute to text instead of email? Could you please try that just for the investigation (in case you have access for the page's code)?

[alexandravychytill]

Hello
So unfortunately I do not have access to the page code.

[asafkorem]

I'll investigate this. I'll keep you updated, thanks for the report!

[alexandravychytill]

Thanks,
Do you have perhaps already some updates?

[asafkorem]

@alexandravychytill, I was unable to reproduce your issue, as the previous workaround we implemented seemed effective (and underwent testing). Consequently, I opted to bypass the workaround and avoid text selection on input elements that initially don't support setSelectionRange. I believe this approach will resolve your issue: #4442

[asafkorem]

@alexandravychytill please try the latest version https://github.com/wix/Detox/releases/tag/20.20.1

[alexandravychytill]

Hello
So still it is not working for me with newest Version(20.20.1). Can you perhaps provide me a Website with a working input textfield (that is working for you)? Because for me still it is not filling in any text when executing test. And also to add, I am using Simulator Tool Version 15.2 , iPhone 15 with Version 17.2.

[asafkorem]

@alexandravychytill You can see our test app in this repo:

• Test suite: https://github.com/wix/Detox/blob/master/detox/test/e2e/29.webview.test.js#L85
• WebView screen: https://github.com/wix/Detox/blob/master/detox/test/src/Screens/WebViewScreen.js

[asafkorem]

Let's try another thing. On the inner-element you're trying to interact with, let's run a custom JS action that changes its value:

const inputElement = web.element(by...);

await inputElement.runScript(function get(element) {
  element.value = "desired text to type";
});

[asafkorem]

Oh, I think I figured the issue. I believe it doesn't work because the element's value is controlled by React state. If the code snippet I provided in the previous comment doesn't work, please try the following:

await inputElement.runScript(function get(element) {
  element.value = "desired text to type";

   // Dispatch an 'input' event to ensure React's internal state is updated
   const event = new Event('input', { bubbles: true });
   element.dispatchEvent(event);
});

If it still doesn't work, can you please provide me with the link to the web-page you're trying to interact with? I'll try to debug our mechanism against this page.

[alexandravychytill]

Great this worked now. I just found another bug for iOS, will create a new Bug Issue for that :)

[asafkorem]

@alexandravychytill the fix has released with 20.20.2

[pavlof01]

@asafkorem fount interesting thing
`

  <div id="content">
    <h2 style="break: both">Enter your username and password</h2>

    <p class="logintext">
      A service has requested you to authenticate yourself. Please enter your username and password in the form below.
    </p>

    <form action="?" method="post" name="f">
      <table>
        <tbody>
          <tr>
            <td rowspan="2" class="loginicon">
              <img alt="" src="/simplesaml/resources/icons/experience/gtk-dialog-authentication.48x48.png" />
            </td>
            <td><label for="username">Username</label></td>
            <td>
              <input id="username" type="text" name="username" autocomplete="username" tabindex="1" value="" />
            </td>
          </tr>
          <tr>
            <td><label for="password">Password</label></td>
            <td><input id="password" type="password" tabindex="2" name="password" autocomplete="current-password" /></td>
          </tr>
          <tr id="submit">
            <td class="loginicon"></td>
            <td></td>
            <td>
              <button id="submit_button" class="btn" tabindex="6" type="submit">Login</button>
            </td>
          </tr>
        </tbody>
      </table>
      <input type="hidden" id="processing_trans" value="Processing..." />
    </form>
    <h2 class="logintext">Help! I don't remember my password.</h2>
    <p class="logintext">
      test-leader:password, test-tutor:password, test-consultant:password, test-coach:password, test-sg-leader:password,
      test-student:password. Without your username and password you cannot authenticate yourself for access to the service. There may be
      someone that can help you. Consult the help desk at your organization!
    </p>
  </div>
  <!-- #content -->
  <div id="footer">
    <hr />

    <br style="clear: right" />
  </div>
  <!-- #footer -->
</div>
<!-- #wrap -->

`

with html above await web.element(by.web.id('username')).typeText('asdf') doesn't work but if you add maxLength will be work
can you check?

[owens-ben]

@asafkorem I am on the latest version "detox": "20.26.2", and its still occuring.

I tried your workaround ^, and it works, until I focus away from that field. Then, the text disappears.

[kranthisai-1]

@asafkorem i am also in the latest version>

I can see the text visually when i focus on another input then the previous input text disappearing , but the test case is passing.

[webbiscuit]

You might also need to add a bit more if you're pushing events up to a react app

let tracker = element._valueTracker;
if (tracker) {
  tracker.setValue(lastValue);
}

Credit here: StackOverflow

[sliangreal]

The solution here works better. It also solves the problem where when a re-render triggers in the React webview app, the input field would lose its value if you used the above solution mentioned in this issue.