How to include clickable forms in famo.us surfaces - famo.us

Question

If I have a surface that hase conent that includes an input. The input doesn't seem to gain focus on click.
Here is how I include my 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()
});
// 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;
What is necessary to make forms act normally with famo.us?
Or do i just need to have an inner surface that has a different listener?
This is 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 is an input I just can't seem to focus on it.
UPDATE
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.
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;