Hi, I have an issue when trying to delete an element from the list, using an icon, as the onClick seems to be completely ignored.
This seems to be happening with a subelement only (in my case React-Fontawesome), as when I just use plain text as a Delete Button it works fine.
Here is an example of what I am trying to do:
class myItem extends Component {
onRemove = e => {
console.log(' ** REMOVE FROM ITEM **')
this.props.onRemove(this.props.pos)
}
render() {
return (
<div className="SortablePressQuoteItem__pointer">
<ListGroupItem>
<div className="SortablePressQuoteItem__align">
<button
type="button"
className="pull-right unstyled"
onClick={this.onRemove}
>
X
</button>
<button
type="button"
className="pull-right unstyled"
onClick={this.onRemove}
>
<FontAwesome name="times" className="pull-right" />
</button>
</div>
</ListGroupItem>
</div>
)
}
}
const SortableMyItem = SortableElement(myItem)
export default SortableMyItem
From this example, clicking on the X works fine, but the same button including a FontAwesome element doesnt fire the onClick.
I have tried moving the button with fontawesome icon somewhere else in my project (outside the SortableElement) and the onClick works fine, so it makes me think there is an issue with this library (or that I am not using it well)
Let me know if you need more info, and thanks in advance !
Digging up a little deeper, I used the distance attribute which does the trick. Setting it to a value greater than 0 solved it ! (1 in my case)
Most helpful comment
Digging up a little deeper, I used the
distanceattribute which does the trick. Setting it to a value greater than 0 solved it ! (1 in my case)