3

Currently, if the code contains something like

<div>{{some_value}}</div>

Works perfectly. Whereas

<textarea>{{some_val}}</textarea> 

Works only when the cursor is not in the textbox

2 Answers 2

6

This is an intentional Meteor behavior. In the documentation:

Another thorny problem in hand-written applications is element preservation. Suppose the user is typing text into an element, and then the area of the page that includes that element is redrawn. The user could be in for a bumpy ride, as the focus, the cursor position, the partially entered text, and the accented character input state will be lost when the is recreated.

This is another problem that Meteor solves automatically. Just make sure that each of your focusable elements either has a unique id, or has a name that is unique within the closest parent that has an id. Meteor will preserve these elements even when their enclosing template is rerendered, but will still update their children and copy over any attribute changes.

Meteor will not update an <input> or <textarea> that has focus, as in many cases this would be very disruptive to the user if they are trying to enter something (imagine you are typing up a paragraph in the field when it is suddenly overwritten). However, it does mean that a user will not get updates when they 'collide' with another user or other reactive change. If you want to override this behavior, you could probably have a hidden <div> or a js data element which you use to cause an appropriate update for your app (perhaps flag that there is a new value or to simply override it). This sort of collision is not trivial to deal with and may require different behaviors depending on the situation. Perhaps future versions of Meteor will give us some tools to make handling this easier. For a little more background, see this post.

1
  • Edited to add a link to a some additional information on the prospects for more Google Wave-like behavior.
    – rdickert
    Aug 23, 2012 at 17:48
0

<textarea>{{some_val}}</textarea> works fine for me both when the field gains and loses focus.

I hope you are doing,

Template.mytemplate.some_val = "Whatever you want to write";

or

Template.mytemplate.some_val = function() {
    var someValue = "Whatever you want to write"; // Can also get from DB
    return someValue;
}

with the template,

<template name="mytemplate">
    <textarea>{{some_val}}</textarea>
</template>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.