ignore param in OnClickOutside component doesn't work

[Ky6uk]

Describe the bug

It's probably related to this change. Ignoring logic has been moved outside of the listener.

Reproduction

https://stackblitz.com/edit/vitejs-vite-x4kfzn/?file=src%2FApp.vue

System Info

System:
    OS: macOS 12.6
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 1.54 GB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.4.0 - ~/.volta/tools/image/node/18.4.0/bin/node
    npm: 8.12.1 - ~/.volta/tools/image/node/18.4.0/bin/npm
  Browsers:
    Brave Browser: 103.1.41.100
    Chrome: 107.0.5304.87
    Firefox: 105.0.3
    Safari: 16.0
  npmPackages:
    @vueuse/components: ^9.4.0 => 9.4.0
    @vueuse/core: ^9.4.0 => 9.4.0
    vue: 3.2.41 => 3.2.41

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a VueUse issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.

[sibbng]

It doesn't work because OnClickOutside component still lacks the options that onClickOutside has.

It wouldn't work anyway even if you write it with onClickOutside. Because your @click handler will always run after onClickOutside's ignore logic.

<template>
  <button ref="buttonElement" @click="isBarked = !isBarked">Woof!</button>

  <div ref="modalElement">
    <div v-if="isBarked">Bark</div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { onClickOutside } from '@vueuse/core';
const modalElement = ref(null);
const buttonElement = ref(null);
const isBarked = ref(false);

onClickOutside(
  modalElement,
  (event) => {
    isBarked.value = false
  },
  {ignore:[buttonElement]}
)
</script>

If you want to ignore clicks on that button why don't you use your click handler like that: @click="isBarked = true" . If your actual code is more complex than that I would suggest doing something like that to prevent @click handler from running.

<template>
  <button ref="buttonElement" @click="isBarked = !isBarked">Woof!</button>

  <div ref="modalElement">
    <div v-if="isBarked">Bark</div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { onClickOutside } from '@vueuse/core';
const modalElement = ref(null);
const buttonElement = ref(null);
const isBarked = ref(false);

onClickOutside(
  modalElement,
  (event) => {
    if(isBarked.value && event.target === buttonElement.value) {
      event.stopPropagation() // prevent running @click 
      return // prevent setting isBarked.value = false
    }
    isBarked.value = false
  },
  //{ignore:[buttonElement]}
)
</script>

[Ky6uk]

@sibbng It will not work for onClickOutside probably for the same reason that the ignoring logic has been removed a bit more than a month ago.

I've already handled that case by writing a custom check inside the component. The question is more about the reason to have the buggy ignore property if it doesn't work as documented. I've spent some time understanding why the option from the documentation doesn't work and have found that the ignoring logic has been moved outside of the main listener for some reason. Should it be removed then from the original function also?

[sibbng]

Those changes are added in 9.3 and if you try it with 9.2 it still won't work. The purpose of ignore option is not to call the handler function you provided on some elements. It's not supposed to block clicks on elements.

[Ky6uk]

It was actually a bug related to the inability to pass composable options to the component and was fixed here and released in v9.5.0.