Inferno: DOM event propagation behavior change in `spike`

[mseeley]

Hi everyone. Sorry for the barrage of issues and thanks for your patience if this is known.

Running these components against production inferno-dom modules will log trigger the Button#onClick() then Container#onClick() handlers when the child Label component is clicked:

class Container extends Component {
  onClick(event) {
    console.log('Container#onClick');
  }
  render() {
    return <div onClick={this.onClick}><Button text="Click me" /></div>
  }
}

class Button extends Component {
  onClick(event) {
    console.log('Button#onClick');
  }
  render() {
    const { text } = this.props;
    return <button onClick={this.onClick}><Label text={text} /></button>;
  }
}

class Label extends Component {
  render() {
    const style = { backgroundColor: 'red', padding: '0 20px', fontSize: '40px' };
    return <span style={style}>{this.props.text}</span>;
  }
}

export default function (node)  {
  InfernoDOM.render(
    <Container />,
    node
  );
};

The same components code run against spike modules imported from source behaves differently. The ancestor onClick() methods are never triggered.

In both branches the event target is the span belonging to the Label component. Although in spike the registry lookup in createEventListener isn't setup to account for descendant elements receiving events. Feels like the propagation needs to find the component closest to the event target then begin propagating the event through that components ancestors.

Thanks for reading + helping!

[Havunen]

We are aware of this event behavior change. I think it requires discussion with @trueadm @Kflash how we should proceed with this.

[trueadm]

@mseeley can you try the latest spike of Inferno. I added some more logic that should fix this problem.

[mseeley]

Hi @trueadm. The latest spike branch finds the Button component from the span click. Although the Container components click handler is never invoked.

[trueadm]

@mseeley How do you mean? Components can't have click events on them, only DOM nodes can? Maybe I've misunderstood something?

[mseeley]

Hi @trueadm, hopefully this'll make more sense:

In master and React both the Button and its parent Container have their onClick methods invoked. The event starts propagation from the component instance closest to event.target then ascends the component hierarchy until it roots out.

In spike only the Button component is notified of the event. The event isn't propagated through ancestor components.

Will hop on Slack to chat.

[trueadm]

@Havunen @Kflash this needs to be fixed for 0.6 too.

[russelgal]

event propagation does not stop at the desired element
http://codepen.io/russelgal/pen/mPWeVY

[ghost]

@russelegal I think @havunen are going to fix this today. And I think the whole event system needs a rewrite

[mseeley]

Thanks for keeping on this guys. I'm looking forward to a fix.

[Havunen]

@mseeley @russelgal can you specify what exactly is the issue here in @russelgal's example?

[russelgal]

@Havunen, event attached to div element.
on click the innermost element passed to event handler function (span)
(SFMBE)

[Havunen]

Event system is now refactored in dev branch. Also if you are using JSX plugin get dev branch from there as well.

Can you verify your issues are now solved @russelgal @mseeley ?

If you are using pure vdom objects you need speficy event like this:

{
    events: {
         onclick: somefunction
    }
}

notice 'on' before click

[russelgal]

@Havunen

var _console = document.querySelector('#console');

InfernoDOM.render({
  tag: 'div',
  className: 'item',
  events: {
    onclick: function(e) {
      console.log(e.target);
      _console.innerText = e.target;
    }
  },
  children: {
    tag: 'b',
    children: {
      tag: 'span',
      children: 'span'
    }
  }
}, document.querySelector('#app'));

the issue remains

[Havunen]

@russelgal event.target is always the innerMost element in javascript unless this behavior is overwritten
see this codepen: http://codepen.io/anon/pen/jqGxbE

more to read here:
http://javascript.info/tutorial/bubbling-and-capturing#this-and-event-target

[trueadm]

@russelgal can you confirm you are still experiencing an issue on this?

[russelgal]

@trueadm It is working now, thanks!

[Havunen]

Good to hear!
closing...

[Havunen]

@russelgal I just wanted to comment that if you need current element where click is bound, its referenced in "this"