Question

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

Answer 1

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.