Cursor jumps to the end if the text in text fields in the IDE UI

[beerwin]

🐛 Bug Report

When typing into any field in the UI of the IDE, the cursor jumps to the end of the field on each keystroke.

To Reproduce

Steps to reproduce the behavior:

1. Open Selenium IDE
2. Paste something in the address bar over the playback window (or alternatively, load a .side file)
3. Move the cursor in the middle of the text
4. Start typing

Happens in the address bar in the playback window, Intermittently happens in the command settings fields on the left sidebar (hard to reproduce, happens every now and then)

Expected behavior

The cursor should stay after the typed character instead of jumping to the end of the text.

Project file reproducing this issue (highly encouraged)

None (this is UX-related)

Environment

OS: Ubuntu 22.04 (Wayland window manager, upgraded from 18.10) Selenium IDE Version: 4.0.80 (AppImage file) Selenium SIDE Runner Version: None

Browser: Electron app

[BartolomeSintes]

Same behavior in Windows 10

[beerwin]

Possible solution (Disclaimer: I'm not proficient in React, but I ran into the same mistake when i was working in it. Every reactive framework has this caveat, by the way)

This happens in React in cases when a text box is wrapped into another component and the model is not implemented properly.

The problem might be in how the value is set for the text field.

For the URL bar, the solution is, to set the defaultValue prop instead of the value prop in line 27 in the file packages/selenium-ide/src/browser/components/URLBar/index.tsx: We don't have to fully synchronize the field, it's enough to send the value to the store (we already know, that it will have the same value).

        <TextField
          className="width-100"
          onChange={(e: any) => {
            update({
              url: e.target.value,
            })
          }}
          margin="none"
          size="small"
--        value={session.project.url}
++        defaultValue={session.project.url}
        />

I didn't go through all the text fields in the project, but it's highly likely the solution is the same for the rest of them too.

As a further improvement, I'd add a 400ms debounce to the text fields to shear off some of the event leak errors. it also makes typing in the fields smoother.

[toddtarsi]

Ah crud, you're right! And I totally agree, the URL bar should be a very safe input to release control of. The command editor is a bit more tricky, because it was previously uncontrolled, but there would be things that could cause desync. I just need to store a couple refs there and do some of that kinda stuff.

[toddtarsi]

@beerwin - I've changed the URL bar to be an uncontrolled input. Thanks for the call out, and try the beta! It's way better than the alpha versions imo.

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity since it was closed. Please open a new issue for related bugs.