How to include clickable forms in famo.us surfaces

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;