How to include clickable forms in famo.us surfaces -

if have surface hase conent includes input. input doesn't seem gain focus on click.

here how include surface.

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()         });          // surface's events piped `mousesync`, `touchsync` , `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; 

what necessary make forms act famo.us?

or need have inner surface has different listener?

this templates['config']:

templates["config"] = handlebars.template({"compiler":[5,">= 2.0.0"],"main":function(depth0,helpers,partials,data) {   return "<input type=\"text\" id=\"fontsize\" >";   },"usedata":true}); 

what displays input can't seem focus on it.

update

the reason think couldn't focus because wasn't using inputsurface , surface event being pipe away. using scrollview able make work.

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 sync registered sync_ids         // here define default options `mouse` , `touch` while         // scrolling sensitivity 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);          // surface's events piped `mousesync`, `touchsync` , `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;