Skip to content

Update input value on blur #36

@qbolec

Description

@qbolec

I understand that type:value works 1-way.
I understand that it does not update the .value of the input when the control is focused.
This leads to situations where model has already new value, but this change is still not propagated to the DOM because user "blocks" it by keeping cursor on the field.
I expected the DOM to get updated once user moves the focus out of the input, but actually nothing happens leading to inconsitency between the model and the view.

A motivating example is this: I have a textbox where user can type in a number or an expression (like "2+2"). I have "change input" event handler which sets the model.x to the value of the expression (in this case 4). If the user types in "2+2" and click outside the textbox then everything works fine, because the "change" event fires once the focus is already outside the box, so the new value can be propageted to DOM. On the other hand if the user press the enter key on the keyboard, which also triggers the "change input", then the story is much different.
The model.x gets updated to 4, but the since the cursor is still in the inputbox, the DOM is not updated, and still shows "2+2". Now, the bad state is permanent: even if the user clicks outside of the input box.

I guess that another use case would be in situation where the change to the model happens "from the outside" - asynchronous timer, XHR, or some other event can cause model to change while the focus is on the input box.

One possible solution would be to add a "blur input" handler and refresh the binding.
There are some problems with that:

  • one has to guess that this is necessary (which is not obvious from the spec)
  • one has to figure out how to use blur event correctly (there are some problems with bubbling of the blur event)
  • one has to figure out how to "refresh the binding" (the spec does not mention how to force changes in the model to be flushed to the DOM)

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions