Child node 'click' event triggers no longer work when the parent becomes visible via $if

[tutaslabs]

Use case: simple popup dialog with OK and CANCEL buttons. If the initial state of the popup is visible (for testing), the 'click' events on the buttons work as expected. If the popup node is set hidden via $if and then re-displayed ($if is true), the buttons (child nodes) no longer respond to click events.

FamousFramework.scene('tutaslabs:test', { behaviors: { '#popup': { 'align': [0.5, 0.3], 'origin': [0.5, 0.5], 'mount-point': [0.5, 0.5], 'size': [150, 150], 'position-z':1, 'style': { 'background-color': 'red', 'border-radius': '15px', 'padding': '20px' }, 'unselectable': false, '$if': function(pvisible) { return pvisible; } }, '#button': { 'align': [0.4, 0.4], 'origin': [0.5, 0.5], 'mount-point': [0.5, 0.5], 'size': [100, 30], 'position-z':20, 'style': { 'background-color': 'lightblue', 'border-radius': '15px', 'cursor':'pointer', 'text-align':'center', 'line-height':'30px' }, 'content': 'Ok' } }, events: { '$self': { 'click': function($event,$state) { alert('background clicked') $state.set('pvisible',true) } }, '#button': { //this does not work when parent becomes visible from a hidden state ($if was false) 'click': function($event,$state) { alert('button clicked') $state.set('pvisible',false) } }, '#popup': { //this works as expected on becoming 'visible' ($if is true) 'click': function($event,$state) { alert('popup clicked') $state.set('pvisible',false) } } }, states: { pvisible: true },

tree:
`<node id="popup">
    <node id="button"></node>
 </node>`

});

[arkadyp]

@tutaslabs I pushed a slightly modified version of this code up to a container and it seems to be working as expected. When you get a chance, could you try re-running your code on the latest release of Framework to double check that the issue has been resolved?

FamousFramework.scene('sharkady:if-click-events', {
    behaviors: {
        '$self' : {
            content: 'Click on background to display modal...'
        },
        '#popup': {
            'align': [0.5, 0.3],
            'origin': [0.5, 0.5],
            'mount-point': [0.5, 0.5],
            'size': [150, 150],
            'position-z':1,
            'style': {
                'background-color': 'red',
                'border-radius': '15px',
                'padding': '20px'
            },
            'unselectable': false,
            '$if': function(pvisible) {
                return pvisible;
            }
        },
        '#button': {
            'align': [0.4, 0.4],
            'origin': [0.5, 0.5],
            'mount-point': [0.5, 0.5],
            'size': [100, 30],
            'position-z':20,
            'style': {
                'background-color': 'lightblue',
                'border-radius': '15px',
                'cursor':'pointer',
                'text-align':'center',
                'line-height':'30px'
            },
            'content': 'close modal'
        }
    },
    events: {
    '$self': {
        'click': function($event,$state) {
            console.log('background clicked');
            $state.set('pvisible',true)
        }
    },
    '#button': {
        'click': function($event,$state) {
            console.log('button clicked...');
            $state.set('pvisible',false);
        }
    },
    '#popup': {
        'click': function($event,$state) {
            console.log('popup clicked');
            $state.set('pvisible',false)
        }
    }
    },
    states: {
        pvisible: false
    },

    tree: `
        <node id="popup">
            <node id="button"></node>
         </node>
    `
});