Button inside reorderable element

[aesnyder]

Javascript click events are being swallowed by the reorderable item making it so that buttons inside the items don't work.

[JakeSidSmith]

This is due to event.preventDefault() being called on the events, but I've learnt better since. So I'll fix this when I've got some time. :)

[aesnyder]

Interesting, I thought the event.preventDefault() was causing this as well. I tried commenting it out of the itemDown method. Unforutunately that didn't work. I'll open a pr in a moment with my workaround. Basically I add a 'no-drag' class to the button and return false in item down if the target has that class... Feels dirty so I'm all ears if you have a better solution.

[adsteel]

I think event.preventDefault() needs to be commented out of both itemDown and listDown for this particular issue to go away, though it isn't a full solution.

[adsteel]

It looks like removing event.preventDefault() from itemDown and listDown makes this issue go away on Chrome, Safari and iOS Chrome, without raising any other issues that I can see (in a simple, vertical list of items). It does not make this issue go away on iOS Safari, and causes a couple of side effects, like trying to copy-paste.

[adsteel]

It looks like this issue has been fixed in version 1.3, @JakeSidSmith

[ephraimtabackman]

It's not fixed for me, but here's how I worked around it:

onButtonMouseDown(event) {
  event.stopPropagation();
}

onButtonClick(event) {
  this.props.sharedProps.onButtonClick();
}

<button onMouseDown={this.onButtonMouseDown.bind(this)} onClick={this.onButtonClick.bind(this)}>My button</button>

[JakeSidSmith]

Assuming fixed by preventing propagation.