How to retain value of text Inputs after hot code push

Question

My Meteor application involves users entering quite a bit of text into a textarea. If a hot code push occurs while a user is entering their text, the page refreshes and they lose their work.

To reproduce this behaviour:

• create a new meteor app;
• add a text input into the html;
• run the app;
• type something into the text field; and
• trigger a hot code refresh by tweaking the js or html and saving.

The hot code refresh will delete whatever you've entered into the text input.

Is there some way to avoid this happening? Has anyone got any suggestions for hacks or workarounds?

Answer 1

The Session is preserved during HCR, so you could try syncing the text field up with a Session variable. Example:

<template name="textArea">
  <textarea>{{textAreaValue}}</textarea>
</template>

Template.textArea.helpers({
  textAreaValue: function () {
    return Session.get("textAreaValue") || "";
  }
});

Template.textArea.events({
  "input textarea": function (evt) {
    Session.set("textAreaValue", evt.currentTarget.value);
  }
});

Note that this will cause the textArea template to rerun after every character is typed. With Blaze this shouldn't be too much of a problem, but if you want to prevent this, use Deps.nonreactive:

  textAreaValue: function () {
    return Deps.nonreactive(function() {
      return Session.get("textAreaValue") || "";
    });
  }

Although then you won't be able to update the text area with Session.set("textAreaValue", ...)