Event listeners on child components does not work

[Dan-Do]

Hi @cferdinandi Let's take the example from this link https://codepen.io/cferdinandi/pen/QWqvVqL The oninput does not work as expected.

const components = [new Reef('#app', {
    data: {
        text: ''
    },
    template: function (props) {
        return `
            <label for="mirror">Whatever you type shows up below the field</label>
            <input type="text" oninput="mirror1()">
            <div><em aria-live="polite">${props.text.length ? props.text : 'Type something above to change this text'}</em></div>`;
    },
    listeners: {
        mirror1: function (event) {
            this.data.text = event.target.value;
        }
    }
}), new Reef('#app', {
    data: {
        text: ''
    },
    template: function (props) {
        return `
            <label for="mirror">Whatever you type shows up below the field</label>
            <input type="text" oninput="mirror2()">
            <div><em aria-live="polite">${props.text.length ? props.text : 'Type something above to change this text'}</em></div>`;
    },
    listeners: {
        mirror2: function (event) {
            this.data.text = event.target.value;
        }
    }
})];

new Reef('#app', {
    template: function (props) {
        return `${components.map(c => c.html()).join('')}`;
    }
}).render();

[cferdinandi]

Ah yea, I see what's happening here. The child components return the HTML only, so any reference to those listeners is lost. They would need to be attached to the parent component to work.

[cferdinandi]

Addressed with a redesigned API model in v12 (now live)