ui.editor cursor jumps to start of text intermittently

[Gilser]

Description

This is able to be replicated from the nicegui documentation pages in addition to in test applications.

To cause the issue, clear out any existing text in the ui.editor input control, then rapidly start typing characters into it. Especially when there are relatively few characters in the field, the cursor will jump to the beginning of the input which then causes text being typed to start going in before anything else inputted.

Can happen a few times as text is being inputted but it seems to stop after some number of characters are already in the field. Fairly easy to trigger by clearing out all text before quickly inputting more.

Does seem to only be triggered when quickly entering information - by slowly inputting text I've been unable to replicate so far.

[falkoschindler]

Oh wow, thanks for reporting this issue, @Gilser! This UX feels really bad. 😕

I thought we might just need to add LOOPBACK = False to the ui.editor class (like we do for ui.input or ui.number), but it leads to a similar behavior: Whenever the cursor is at the end, typing a character lets it jump back to the start. Otherwise it behaves nicely.

We'll need to further investigate the problem.

[intrinsically]

i've been using nicegui to build some intranet apps. i don't get the cursor jumping problem when i'm deploying locally, but when i deploy on AWS behind a VPN then it's really really bad - cursor jumping every 5 characters or so even if i have existing text.

could it be latency related?

[intrinsically]

as a further bit of info: i can reproduce the problem quite easily in the controls demo here: https://nicegui.io/documentation/editor

[falkoschindler]

Thanks, @intrinsically!

I think I found a lead: When setting LOOPBACK = False and removing the following lines, the bug is gone.

nicegui/nicegui/static/nicegui.js

Lines 162 to 164 in ee14497

	if (element.props["loopback"] === False && event.type == "update:modelValue") {
	element.props["model-value"] = args;
	}

Let me try to explain what I think is happening:

1. Usually value elements like ui.switch need to send an update:modelValue event to the server, which updates its model and sends the new value back to the front end. This is what we call "loopback".
2. For elements that can change rapidly like ui.input or ui.number, we disable this loopback procedure and set the new value directly on the client (see the code snippet above).
3. But there seems to be a third group of elements like ui.editor that shouldn't use loopback to prevent the cursor from jumping around, but also shouldn't set the model value programmatically on the client, because it also messes with the cursor position.

So I think we either need to change LOOPBACK from a boolean flag to something like a Literal string to distinguish these three types of value updates, or we add a second flag to define whether the new value should be set directly on the client or not.

[intrinsically]

ah great stuff falko, interesting to get a bit of info on how the underlying interaction model works. what's a good way for me to set up my environment to start debugging this stuff myself? i guess i'll just check out the project and see if i can build/run it. i'm interested in debugging why some components (like the markdown viewer) don't seem to be rendered (or capable of holding a value) in a tab until the user clicks on the tab.

p.s. not sure if you are interested, but i program using nicegui using classes rather than functions, have developed a few techniques that might be useful if you are interested. took a few tried to get it right. i couldn't find any class-based examples in the examples directory...

[intrinsically]

what's a good way for me to set up my environment to start debugging this stuff myself?

umm wow, i just cloned it, started up venv and pycharm and it worked immediately. good stuff... possibly the easiest environment i've ever had to set up