Modal triggered by button inside dropdown list does not show up

[pedrovgp]

Heelo!

What I am trying to do is:

1. Have a menu dropdown in a page (let's call it details page)
2. The dropdown has a list of buttons
3. Each button triggers a modal with a form

I have a Modal component defined. If I insert it directly in details page, it works as expected, but when I insert it into the dropdown list in the details page, it never shows up when its button is clicked.

Sample code:

// details page
<template>
  <death-modal :animal-id="props.animalId" />
  <animal-dropdown :animal-id="animal?.id" />
</template>


<script setup lang="ts">
  import AnimalDropdown from './registry/AnimalDropdown.vue'
  import Modal from './registry/Modal.vue'

</script>

// animal-dropdown
<template>
  <va-dropdown>
    <template #anchor>
      <va-button icon="more_vert"> Registrar </va-button>
    </template>
    <va-dropdown-content>
      <va-list :fit="true">
        <va-list-item class="list__item">
          <modal :animal-id="props.animalId" />
        </va-list-item>
      </va-list>
    </va-dropdown-content>
  </va-dropdown>
</template>

<script setup lang="ts">
  import Modal from './Modal.vue'

  const props = defineProps<{
    animalId?: string | number
  }>()

</script>

// Modal
<template>
  <va-button @click="showContent = !showContent"> Registry </va-button>
    <va-modal v-model="showContent" :title="'Registry'" :message="'Test message'">
    </va-modal>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  const showContent = ref(false)

</script>

[rustem-nasyrov]

Hello, @pedrovgp! I found a solution for you. You need to add .stop event modifier to the @click listener. It will prevent bubbling event up. Also, I recommend you to wrap your Modal.vue template contents with div, to avoid vue warnings in the console.

<template>
  <div>
    <va-button @click.stop="showContent = !showContent"> Registry </va-button>
    <va-modal v-model="showContent" :title="'Registry'" :message="'Test message'" />
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  const showContent = ref(false)
</script>

[pedrovgp]

Hi @rustem-nasyrov , thanks for the reply! It did work, but I actually have a form inside that modal and when I open it from within the dropdown, when I click in any of the fields, it dismisses the modal :(