CODEWITHSUNDEEP
javascriptreactjscontextmenupixi.js
NegativeFriction
NegativeFriction

Reputation: 576

React-contextmenu is receiving a false trigger for a right click

I'm having a strange bug when using react-contextmenu with PIXI.js in a react app (no additional libraries are in play). I have a map component that can be dragged and dropped into place. I've found that, if a user holds down the left click button and jiggles the mouse around for a little while, it will falsely trigger the context menu to appear, even though the user hasn't right clicked. It isn't app-breaking, but it's still an annoying bug, and I'd like to figure out how to eliminate it. Relevant code below:

import React from 'react'
import * as PIXI from 'pixi.js'
import {ContextMenu, MenuItem, ContextMenuTrigger} from 'react-contextmenu'

export default class MyComponent extends React.component{
    constructor(props){
        super(props)
}}
render(){
    return <React.Fragment>
        <ContextMenuTrigger id='aUniqueID'>
            <div className='stageDiv'
            ref=>{(el)=>{this.stageRef = el}}
            />
        </ContextMenuTrigger>

        <ContextMenu id='aUniqueID'>
            <MenuItem onClick={this.myAction.bind(this)}/>
        </ContextMenu>
    </ReactFragment>

componentDidMount(){
    const app = new PIXI.Application({
        width:screen.width,
        height:screen.height*0.8,
        sharedLoader:true,
        sharedTicker:true
    })
       app.renderer.plugins.interaction.on('mouseMove',this.mover.bind(this)).on('mousedown',this.onClick.bind(this))
    this.stageRef.append(app.view)
    app.stage.interactive = true
    this.app = app
    this.createMap()
    this.setup()
    {

this.createMap(){
    //Just draws three sprites at equal intervals along the screen. No click events are bound to this code.
}

this.onClick(e){
    this.setState({clickX:e.data.global.x,clickY:e.data.global.y,clicked:true})
}

onMouseMove(e){
    if(this.state.clicked){
    let x = e.data.global.x
    let y = e.data.global.y

    let xDiff = this.state.clickX - x
    let yDiff = this.state.clickY - y

    this.arrayOfDraggableSprites.forEach((sprite)=>{
        sprite.x -= xDiff
        sprite.y -= yDiff
    }
    }

I don't see anything in that code that I would think would trigger a false right click, but hopefully someone else does.

Upvotes: 1

Views: 1268

Answers (1)

NegativeFriction
NegativeFriction

Reputation: 576

Figured it out.

By default, react-contextmenu is configured to work with mobile, and has a "hold to display" value of 1000 milliseconds. It assumes that the user wouldn't hold down the mouse button for 1 second while scrolling around, which was not the case for my app.

By setting the hold to display value to -1, it no longer triggers the bug. The solution, as always, was to ask for help, and then instantly figure it out an hour later.

Upvotes: 2

Related Questions