Enyo buttons not responding to ontap events inside of leaflet popups

Question

I'm trying to use enyo in conjunction with leaflet. I am attempting to put a leaflet button inside of a leaflet popup, however the ontap callback never fires. Below I have included the code that instantiates the button. Any ideas on what I might be doing wrong? I have a feeling that I might not be instantiating the button correctly.

As an aside, there had been an issue with click event propagation being stopped by leaflet popups, but it has since be resolved.

EDIT: Here is more complete code, and a link to a jsFiddle: http://jsfiddle.net/pwnosaurus/YPqpm/

enyo.kind({
    name: "mapContainer",
    rendered: function(){
        this.inherited(arguments);

        //Initialize the map
        this.map = L.map(this.id).setView([44.981313, -93.266569],13);
        L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
            {attribution: "Map data © OpenStreetMap contributors"}
        ).addTo(this.map);

        //Initilize the marker and popup
        var mark = new L.marker([44.981014, -93.270520]).addTo(this.map);
        var popDiv = L.DomUtil.create("div");
        var pop = new L.popup();
        mark.bindPopup(pop);

        //Initilize the enyo button and control
        var ctrl = new enyo.Control({
            myHandler: function(){
                alert("The foo button was tapped");
            }
        });
        var button = new enyo.Button({
            name: "thefoobutton",
            content: "foo",
            ontap: "myHandler",
            owner: ctrl,
        });

        button.renderInto(popDiv);
        pop.setContent(popDiv);
    },

});
mapCont = new mapContainer();
mapCont.renderInto(document.body);

Answer 1

I have implemented a workaround that puts a click handler on the leaflet popup which directly bubbles an ontap event on the button.

Code below, and in action here http://jsfiddle.net/pwnosaurus/uqcJJ/4/

enyo.kind({
    name: "mapContainer",
    rendered: function(){
        this.inherited(arguments);

        //Initialize the map
        this.map = L.map(this.id).setView([44.981313, -93.266569],13);
        L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
            {attribution: "Map data © OpenStreetMap contributors"}
        ).addTo(this.map);

        //Initilize the marker and popup
        var mark = new L.marker([44.981014, -93.270520]).addTo(this.map);
        var popDiv = L.DomUtil.create("div");
        var pop = new L.popup();
        mark.bindPopup(pop);

        //Initilize the enyo button and control
        var ctrl = new enyo.Control({
            myHandler: function(){
                alert("The foo button was tapped");
            }
        });
        var button = new enyo.Button({
            name: "thefoobutton",
            content: "foo",
            ontap: "myHandler",
            owner: ctrl,
        });

        //Add click handler
        //inspired by https://github.com/NBTSolutions/Leaflet/commit/466c0e3507cf0934a9d1441af151df2324a4537b#L2R129
        function forward(e){
            if (window.enyo && window.enyo.$ && e.srcElement && e.srcElement.id && window.enyo.$[e.srcElement.id]){
                    window.enyo.$[e.srcElement.id].bubble("ontap", e);
            }
        }
        this.map.on("popupopen", function (e){
            if (! e.popup.hasForwarder){ //Note: this check may not be needed. The L.DomEvent.on() seems to handle multiple adds of named functions
                L.DomEvent.on(pop._contentNode, "click", forward, this);
                e.popup.hasForwarder = true;
            }
        }, this);


        button.renderInto(popDiv);
        pop.setContent(popDiv);
        mark.openPopup();
    },

});
mapCont = new mapContainer();
mapCont.renderInto(document.body);