VueUse onClickOutside does not work with right click

Question

I am currently trying to use onClickOutside but it only works when i click outside with the left mouse button. I need to get this working for the right mouse button too.

Any solution for this? Maybe i missed some option for the function.

Answer 1

VueUse does not work here, because no click event is raised. Instead the contextmenu event will be raised here.

Try something like this:

import type { Ref } from 'vue'
import {useMouseInElement, useEventListener} from '@vueuse/core'

export const useClickOutside = (target: Ref<HTMLElement>, handler: () => void) => {
  const { isOutside } = useMouseInElement(target)

  const onClick = () => {
    if (isOutside.value) {
      handler()
    }
  }

  useEventListener(document, 'click', onClick)
  useEventListener(document, 'contextmenu', onClick)
}