0

Trying to fire an onClick with onContextMenu I can detect right click in my child component and a left click works but for some reason the onClick doesn't work when a right click is done.

Styled Component:

export const NavLogo = styled(Link)`
  color: ${({ theme }) => theme.colors.white};
  justify-self: flex-start;
  cursor: pointer;
  text-decoration: none;
  font-size: 2rem;
  display: flex;
  align-items: center;
`

Child Component:

import React from 'react'
import { useHistory } from 'react-router-dom'

// Styled Components
import { NavLogo, NavIcon } from './NavbarElements'

const Logo = ({ click }) => {
  const history = useHistory()

  const rightClick = e => {
    e.preventDefault()

    return history.push('/foo')
  }

  return (
    <NavLogo to="/" onClick={click} onContextMenu={rightClick}>
      <NavIcon />
      Foobar
    </NavLogo>
  )
}

export default Logo

parent component (stripped down):

const Navbar = () => {
  const [click, setClick] = useState(false)
  const [button, setButton] = useState(true)

  const handleClick = () => setClick(!click)
  const mobile = () => setClick(false)

  const showButton = () => {
    window.innerWidth <= 960 ? setButton(false) : setButton(true)
  }

  useEffect(() => {
    showButton()
  }, [])

  window.addEventListener('resize', showButton)

  return (
    <IconContext.Provider value={{ color: '#fff' }}>
      <Nav>
        <NavbarContainer>
          <Logo click={mobile} />
        </NavbarContainer>
      </Nav>
    </IconContext.Provider>
  )
}

export default Navbar

when a regular click is done the onClick works. In my research I didn't find a solution:

In my child component how should the onClick be used to work with a onContextMenu right click?

DᴀʀᴛʜVᴀᴅᴇʀ
  • 4,253
  • 12
  • 46
  • 84

0 Answers0