Toggle between Dropdown components

[l0n3s0m3-w0lf13]

Hewo! 🐺 I've recently ventured into Vue and successfully created a Dropdown component using the Composition API with <script setup>. Everything seems to be working smoothly when clicking outside the element due to the use of refs and event listeners to detect clicks within the component.

The thing is that, when creating several instances of the same component, all of them share the same reactivity, so what I'm trying to achieve is getting a single dropdown component opened at the same time, therefore when I open a new dropdown component, I need the one that's already opened to close down. How could I do this, does anyone know how to get there? Thanks 💟

I'll share the code below:

// Dropdown.vue

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { nanoid } from 'nanoid'
import DropdownButton from './DropdownButton.vue'
import DropdownItem from './DropdownItem.vue'

const props = defineProps({
  id: {
    type: String,
    default() {
      return `dropdown-${nanoid()}`
    },
  },
  label: {
    type: String,
    required: true,
  },
  options: {
    type: Object,
    default: null,
  },
})

const rootDropdownRef = ref(null)

const show = ref(false)

const isActive = ref(false)

const handleClick = () => {
  show.value = !show.value
  isActive.value = !isActive.value
}

const close = (e) => {
  if (!rootDropdownRef.value.contains(e.target)) {
    show.value = false
    isActive.value = false
  }
}

onMounted(() => {
  document.addEventListener('click', close)
})

onBeforeUnmount(() => {
  document.removeEventListener('click', close)
})
</script>

<template>
  <div ref="rootDropdownRef" class="dropdown">
    <DropdownButton
      :label="props.label"
      :class="{ active: isActive }"
      @click.stop="handleClick" />

    <Transition>
      <div v-show="show" class="dropdown-menu" role="filter" @click.stop>
        <DropdownItem
          v-for="item in props.options"
          :key="item.value"
          :label="item.label" />
      </div>
    </Transition>
  </div>
</template>

and using it like so:

// ParentComponent

<div class="filters">
    <Dropdown label="Tipo" :options="props.ingredientTypes" />
    <Dropdown label="Ingredientes" :options="props.ingredients" />
</div>

[chenxch]

Plan A: The simplest method is clickoutside processing
Plan B: Create a manager to manage the status of Dropdown