I did live chat in Meteor, but I have problems with the built-in save feature in Meteor. Basically, I need the current div of the chat message not to be updated, and the text input in it to have focus. The documentation contains the following instructions:
Another tricky issue in handwritten applications is the save element. Suppose a user enters text into an element, and then the area of the page that includes this element is redrawn. The user may be in a difficult position, since the focus, cursor position, partially entered text and input with an accent character will be lost when recreated.
This is another problem that Meteor solves automatically. Just make sure that each of your focusable elements either has a unique identifier or has a name that is unique within the immediate parent who has an identifier. The meteor will save these elements even when their attached template reloads, but will still update its children and copy any changes to the attributes.
Following these instructions, I set a unique identifier for my input field to make sure that it will not be re-displayed while I type it. But now I am facing two of the following problems:
Another private chat message is updated as you type it, but this update is paused while I am printing my own message. As soon as I stop typing (even if my input field has focus), their message starts updating again.
When a new message is created and its div is added, my message is updated / redrawn, even if its input field has focus. This makes him lose focus suddenly.
You can verify this using two different computers / users in the same chat at http://babble.im .
Is this a bug in the Meteor code or my own? How can I find out?
Edit:
And, I think, I found the cause of the first problem:
The meteor usually updates all necessary updates and executes them only when your code is not running. Thus, you can be sure that the DOM will not change from under you. Sometimes you need the opposite behavior. For example, if you just inserted a record into the databases, you can force the DOM to update so that you can find new items using the jQuery library. In this case, call Meteor.flush to immediately update the DOM.
I assume that my code worked during user input, so the DOM was not updated. I will try to use Meteor.flush to fix this. Now, what about the second problem?