Input's onChange Event Handler Misses Key Strokes?

[jkrobicki]

Description
When I fill in the input fast it reacts slowly and miss some letters. In the example I try to write "write here the name" .

[jkrobicki]

So I found the solution:

My code was:

@component
def Input(
    set_value: Callable,
    value: Any,
    label: str = "",
    type: str = "text",
    placeholder: str = "Write here the",
):

    return html.input(
        {
            "type": type,
            "placeholder": f"{placeholder} {label}",
            "value": value
            "onChange": lambda event: set_value(event["target"]["value"]),
        }
    )

I was passing state value as the value attribute. Removing value attribute and passing only state set_value as set_value attribute sets the state and solves the issue

[rmorshea]

I think you reported a real bug, but managed to find a work around. Based on your description, I think what you had originally ought to have worked.

[rmorshea]

Ok, looking into this, there may not be a great way to resolve the underlying issue. What's happening is that, because there's a delay between a key being typed and the character showing up in the input, it's possible to press another key before the first one has been rendered to the screen. Let's say we want to type "world" and we do so at a rate which is double that of the render rate (that is we type two keys in the time we render once). When we look at the event.target.value for each onChange event we'd see the following:

1. "w"
2. "o"
3. "or"
4. "ol"
5. "old"

This happens because by the time we type "o", the "w" hasn't appear in the input yet. Thus the change from "" to the most recently typed "o" overwrites the previously seen change. This problem exists even for React when there's a delay between the triggered event and completed render (see this demonstration).

[rmorshea]

I'm realizing this isn't a very satisfying answer, IDOM should find a way to deal with this: #684