onClick doesn't work when onDrag and onStop are present

[fabio-felizzi]

Sorry about the rubbish title, couldn't think of a way to make it concise :P

Basically I have a draggable tab (which is used to display a full screen map), I can successfully drag the tab left and right (as desired) and I can click the tab to toggle it in and out of view.

However, when I add a function to the 'onStop' handler, the click functionality stops responding. It still registers clicks, but doesn't actually toggle the map (like it did correctly when I didn't have an onStop handler)

UPDATE: I've noticed that when I click the drag handle, it's also firing the onStop event TWICE (shouldn't this only happen onDragStop?)

I'll add my code below for reference (i'm omitting all the uneccesary stuff incase you wonder).

JSX:

<Draggable
          axis="x"
          handle=".handle"
          bounds={{ left: -this.state.windowWidth, right: 0 }}
          defaultPosition={{ x: 0, y: 0 }}
          position={this.state.controlledPosition}
          onDrag={this.toggleMapViaDrag}
          onStop={this.onMapDragStop}
        >
        <ViewMapMobileButton onClick={this.toggleMapViaClick} className="handle" />
</Draggable>

JS:

toggleMapViaDrag(e, position) {
    const { x } = position;
    this.setState(prevState => ({
      controlledPosition: { x, y: 0 },
      mapVisible: x < -prevState.windowWidth / 2,
    }));
  }

  toggleMapViaClick(e) {
    e.preventDefault();
    e.stopPropagation();
    const { y } = this.state.controlledPosition;

    this.setState(prevState => ({
      controlledPosition: prevState.mapVisible ? { x: 0, y } : { x: 0 - prevState.windowWidth, y },
      mapVisible: !prevState.mapVisible,
    }));
  }

onMapDragStop() {
    const { y } = this.state.controlledPosition;
    this.setState(prevState => ({
      mapVisible: prevState.controlledPosition.x > -prevState.windowWidth / 2,
      controlledPosition:
        prevState.controlledPosition.x <= -prevState.windowWidth / 2
          ? { x: 0 - prevState.windowWidth, y }
          : { x: 0, y },
    }));
  }

[Richar-Dada]

How to solve it

[snowy-dong]

same question

[Izhaki]

I don't know if it solves your problem, but a hint alright:

With your code, when you perform a drag, you are going to get an onClick event at the end. This is because there was mouse down followed by a mouse up (on ViewMapMobileButton).

So in your code toggleMapViaClick should be called twice.

Related: #350

[sujiangyin]

I meet the same pro,and what should i do now?


`// index.js
<Draggable
    axis="both"
    handle=".handle"
    defaultPosition={{ x: 0, y: 0 }}
    position={positionXY}
    bounds="html"
    offsetParent={document.body}
    scale={1}
    onStop={handleDragStop}
  >
    <div className="handle">
      <Box></Box>
    </div>
</Draggable>


//Box.js
<div onClick={handleClickBox}>
</div>`

[Jianbo-jia]

same question. anybody solved ?