Character loss in ui.input validation with high network latency

[Xitod]

First Check

• I added a very descriptive title here.
• This is not a Q&A. I am sure something is wrong with NiceGUI or its documentation.
• I used the GitHub search to find a similar issue and came up empty.

Example Code

from nicegui import ui

def simple_validation(value: str) -> str | None:
    """Simple validation that requires minimum length and specific characters"""
    if len(value) < 3:
        return "Must be at least 3 characters long"
    if not value.isalnum():
        return "Must contain only letters and numbers"
    return None

# Minimal reproduction case
test_input = ui.input(
    label="Test Input",
    validation=simple_validation,
)

...

Description

When typing quickly in ui.input fields with validation functions, characters are being deleted/lost during the validation process. This only occurs with network latency - the same application works perfectly when running locally. I live in southern hemisphere so I can say that I have an estimated latency of ~200 to ~400ms.

Observation

• Works fine locally: No character loss when running the same code locally
• Geographic dependency: Colleagues near the AZ don’t experience this issue
• Reproducible: Happens consistently when typing at normal speed with validation enabled

This appears to be the same underlying problem described in #287, specifically related to this comment:
“All input elements involving typing (ui.input, ui.number, and ui.color_input) show flickering and lost characters. … So we probably need to set their state sometime, maybe on change but with some throttling.”
The issue seems to be the roundtrip validation process where each keystroke triggers a client→server→client cycle for validation, and with high latency, this causes desynchronization between user input and the field state.

Expected Behavior

Input validation should work smoothly regardless of network latency, possibly by implementing automatic throttling for validation functions or debouncing validation calls

NiceGUI Version

2.24.1

Python Version

3.12.11

Browser

Chrome

Operating System

macOS

Additional Context

No response

[falkoschindler]

Thanks for reporting this issue, @Xitod!

In #287 the problem occurred even without sanitization, which has been fixed in version 1.1.5.

But now the problem is that an updated error message is sent to the client together with the whole state dictionary of the input element, including an outdated value. Here is a minimum reproduction:

ui.input(validation=lambda x: f'Still {1000 - len(x)} characters missing')

Note that I only can reproduce it reliably with my slowest custom throttling setting in Chrome dev tools with 20kbit/s transfer speed and 500ms latency.

We could think about calling a different method for updating the error message. But then the problem could occur in similar use cases like updating the styling depending on the user input.

Alternatively we could think about replacing the value in the state dictionary with a sentinel to preserve the current value when reaching the client. This could be done for all value elements without LOOPBACK.

Apart from that, 200 to 400ms is a pretty large latency and you might have trouble to write a snappy NiceGUI app without moving some logic over to the client, possibly with a custom component. A simple workaround might be to use Quasar's built-in "rules" prop:

ui.input().props(':rules="[(val) => val.length >= 1000 || `Still ${1000 - val.length} characters missing`]"')

[Xitod]

Hi and thank you so much for the detailed explanation and the workaround.

I’ve implemented both approaches :

• Client-side validation using Quasar’s built-in rules : I have replaced the server-side validation with Quasar’s :rules prop for immediate user feedback without any network roundtrip. This completely eliminates the character loss issue.
• Server-side validation on form submission: For a security matter, I have kept the validation logic on the server side and moved it to run only when the form is actually submitted, ensuring the data integrity.

Thanks again for taking the time to investigate !

[samuller]

The Quasar QInput's debounce property might also help, e.g. to wait 500ms before the model is updated and validators or change events are triggered you can do:

ui.input(validation=lambda x: f'Still {1000 - len(x)} characters missing').props("debounce=500")

[Xitod]

Thanks @samuller

it's true, this is a simpler way of doing it ... it can avoids having two different validation managements (validation and quasar rules)...

I should have wait before modifying the logic of my code 🥲