Hyperapp: Problematic behavior when trying to implement a Form

[spapas]

Hello, I am trying to implement a simple login form / view, here's the view

const Login = module.exports = (state, actions) => <div key='login'>
    <h2>Login</h2>

    <FormInput label='Username' value={state.username} action={(value)=>actions.updateField({field: 'username', value}) } />
    <FormInput label='Password' value={state.password} action={(value)=>actions.updateField({field: 'password', value}) } />
    <button class='btn btn-primary' onclick={()=>actions.login()}>Ok</button>
</div>

and the FormInput component:

const FormInput = module.exports = ({label, value, action}) => <div class="form-group">
    <label class="form-label" for="{label}">{label}</label>
    <input class="form-input" type="text" id="{label}" 
        placeholder={label} value={value} 
        onkeyup={e => action(e.target.value)}
    />
</div>

(let's ignore for now the fact that the password is a simple text input, it doesn't matter for my question).

Now, I have the password and username on state and a corresponding action to update them, something like this:

var state = {
    auth: {
        token: null,
        username: null,
        password: null
    },
...

and

const reducers = module.exports = {
    location: location.actions, 
    auth: {
        updateField: ({field, value}) => state => {
            return {
                [field]: value
            }
        },

        login: () => state => {
            console.log("LOGIN", state);
        }

    }, 
...

I think this is a rather typical setup. The problem is that when I am writing on the textboxes I experience too much lag until the characters are actually displayed on the input - also, if I write too fast some characters are actually missing ... For example if I write 123123123123123 really quick I'll get something like this in the input: 12312322112. The problem, of course is that propagating the state for every keyup is too expensive and, in react is solved with local state. How can this problem be solved in hyperapp? Is there a technique I don't know -- the form is really not usable.

TIA

[SkaterDad]

Have you tried using oninput instead of onkeyup? I haven't had any issues with update speed or missing characters with that event.

[spapas]

Hello @SkaterDad thanks for the quick answer. Yes, oninput works much better (I don't notice any lag at all). Actually, to tell you the truth I wasn't aware (at all) about oninput - I always used onkeyup :)

Do you (or anybody else) have any idea why it works so much better with oninput vs with onkey?

[SkaterDad]

Glad that solved your issue!

I'm not entirely sure why oninput is so much faster, but the browsers might be helping out behind the scenes.

I've read various comments on Stackoverflow implying that onkeyup sometimes fires before the input element value has been updated. This could explain why it missed values for you sometimes.

[jorgebucaran]

@spapas onkeyup only tracks key releases; it doesn't know about text or values. onpinput tracks changes in the text / value of an input element.

• onkeyup is fired when the user _releases_ a key that's been pressed. It will fire for command, control, shift and other special keys.

• oninput is fired when you (change) the text / value of an input element, but only if the text displayed would change, so it will not be called when you press a non-displayable key. For example, if you select the text, copy and overwrite it by pasting, you will _not_ get any oninput events (but you will get a few onkeyup events for command and shift keys).

[spapas]

Thank you very much for all the answers !

[elisherer]

I recommend trying a new library I wrote: hyperapp-forms