title: How to include clickable forms in famo.us surfaces
body: <p>If I have a surface that hase conent that includes an input.  The input doesn't seem to gain focus on click.</p>
  
  <p>Here is how I include my surface.</p>
  
  <pre><code>var ConfigureView = function() {
      this.initialize.apply(this, arguments);
  };
  
  _.extend(ConfigureView.prototype, {
  
      template: templates['config'],
      initialize: function( options ) {
  
          var position = new Transitionable([0, 0]);]
  
          var sync = new GenericSync({
              "mouse"  : {},
              "touch"  : {}
          });
  
          this.surface = new Surface({
              size : [200, 200],
              properties : {background : 'red'},
              content: this.template()
          });
  
          // now surface's events are piped to `MouseSync`, `TouchSync` and `ScrollSync`
          this.surface.pipe(sync);
  
          sync.on('update', function(data){
              var currentPosition = position.get();
              position.set([
                  currentPosition[0] + data.delta[0],
                  currentPosition[1] + data.delta[1]
              ]);
          });
  
          this.positionModifier = new Modifier({
              transform : function(){
                  var currentPosition = position.get();
                  return Transform.translate(currentPosition[0], currentPosition[1], 0);
              }
          });
  
          var centerModifier = new Modifier({origin : [0.5, 0.5]});
          centerModifier.setTransform(Transform.translate(0,0));
  
      },
  
      addTo: function(context) {
          context = Engine.createContext()
          context.add(this.positionModifier).add(this.surface);
      }
  
  });
  
  module.exports = ConfigureView;
  </code></pre>
  
  <p>What is necessary to make forms act normally with famo.us?</p>
  
  <p>Or do i just need to have an inner surface that has a different listener?</p>
  
  <p>This is templates['config']:</p>
  
  <pre><code>templates["config"] = Handlebars.template({"compiler":[5,"&gt;= 2.0.0"],"main":function(depth0,helpers,partials,data) {
    return "&lt;input type=\"text\" id=\"fontSize\" &gt;";
    },"useData":true});
  </code></pre>
  
  <p>What displays is an input I just can't seem to focus on it.</p>
  
  <p>UPDATE</p>
  
  <p>The reason I think I couldn't focus was because I wasn't using an inputSurface and the surface event was being pipe away. Using a scrollView I was able to make it work.</p>
  
  <pre><code>var ConfigureView = function() {
      this.initialize.apply(this, arguments);
  };
  
  _.extend(ConfigureView.prototype, {
  
      template: templates['config'],
      initialize: function( options ) {
  
          this.app = options.app;
  
          var position = new Transitionable([0, 0, 1000]);
  
          this.scrollView = new ScrollView();
          var surfaces = [];
          this.scrollView.sequenceFrom(surfaces);
  
          // create a sync from the registered SYNC_IDs
          // here we define default options for `mouse` and `touch` while
          // scrolling sensitivity is scaled down
          var sync = new GenericSync({
              "mouse"  : {},
              "touch"  : {}
          });
  
          this.surface = new Surface({
              size : [200, 200],
              properties : {background : 'red'},
              content: this.template()
          });
  
          surfaces.push(this.surface);
  
          this.offsetMod = new Modifier({ origin: [0.2,0,2]});
          this.inner = new Surface({
              size : [100, 100],
              properties : {background : 'gray'},
              content: this.template()
          });
  
          surfaces.push(this.inner);
  
          // now surface's events are piped to `MouseSync`, `TouchSync` and `ScrollSync`
          this.surface.pipe(sync);
  
          this.inputsFontSize = new InputSurface({
              classes: ['login-form'],
              content: '',
              size: [300, 40],
              placeholder:'email',
              properties: {
                  autofocus:'autofocus',
                  maxLength:'5',
                  textAlign: 'left'
              }
          });
  
          sync.on('update', function(data){
              var currentPosition = position.get();
              position.set([
                  currentPosition[0] + data.delta[0],
                  currentPosition[1] + data.delta[1]
              ]);
          });
  
          this.positionModifier = new Modifier({
              transform : function(){
                  var currentPosition = position.get();
                  return Transform.translate(currentPosition[0], currentPosition[1], 0);
              }
          });
  
          var centerModifier = new Modifier({origin : [0.5, 0.5]});
          centerModifier.setTransform(Transform.translate(0,0));//, y, z))
  
      },
  
      addTo: function(context) {
          context = Engine.createContext();
          context.add(this.positionModifier).add(this.scrollView);
      }
  
  });
  
  module.exports = ConfigureView;
  </code></pre>