click event missing in objects of a draggable Konva stage

Question

I am using react-konva, and found that the onClick event does not trigger when the Stage has its draggable property true.

import React from 'react'
import ReactDOM from 'react-dom'
import Konva from 'konva'
import { Layer, Rect, Stage } from 'react-konva'
import './App.css'

class App extends React.Component {
  render() {
    return (
      <div ref='container'>
        <Stage width={700} height={700} draggable={true} >
          <Layer>
            <Rect
              x={100}
              y={100}
              width={200}
              height={100}
              stroke={'red'}
              onClick={() => { console.log('Click on Rect') }}
            />
          </Layer>
        </Stage>
      </div>
    )
  }
}


ReactDOM.render(<App />, document.getElementById('root'));

The 'Click on Rect' message does not appear in the console (using Chrome 61.0.3163.100). If you set draggable={false} on the Stage, the message does show. Is this a known limitation of react-konva? Is there a workaround? It seems to happen with Group also ...

Can you provide a demo? This one works fine: jsbin.com/mebuviduje/1/edit?js,output — lavrton
Well actually this demo does not work for me either ... Clicking on the Rect does not change its color, unless I remove draggable from the group...But it works on MS Edge. Could this be a Chrome bug??? — Franck Dervaux
What about this one: jsbin.com/qisaverubo/2/edit?html,js,output (changed konva version) — lavrton
Yes this one does work. I am using konva 1.6.8 from npm which seems to be the latest. — Franck Dervaux
Could this be a dragDistance issue? Maybe dragDistance is set to zero ? — Vanquished Wombat

Franck Dervaux Franck Dervaux · Accepted Answer · 2017-10-01T19:44:23

Indeed, the problem goes away as soon as I set the dragDistance to >0. Thanks for the suggestion!

click event missing in objects of a draggable Konva stage

1 Answers