React-sortable-hoc: Removing Item from SortableElement with icon not firing onClick

Created on 8 Nov 2017  ·  1Comment  ·  Source: clauderic/react-sortable-hoc

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 !

Most helpful comment

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)

>All comments

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)

Was this page helpful?
0 / 5 - 0 ratings

Related issues

botoxparty picture botoxparty  ·  3Comments

iv10 picture iv10  ·  4Comments

zaygraveyard picture zaygraveyard  ·  3Comments

zhujunwei picture zhujunwei  ·  3Comments

ricokahler picture ricokahler  ·  3Comments