[Bug]: DismissableLayer keeps other layers open depending on the order of interaction

[thomasaull]

Environment

I'm using a re-packaged version of radix-vue version 1.9.12, however the only relevant change I did was to export DismissableLayer by appending this line to packages/radix-vue/src/index.ts:

export * from './DismissableLayer'

Link to minimal reproduction

I can’t provide a minimal reproduction link since the re-packaged version is not available publicly, however the code example below should work in your dev environment after updating the import path to the DismissableLayer.vue component

Steps to reproduce

Use the following minmal reproduction vue component:

<script setup lang="ts">
import { ref } from 'vue'
import DismissableLayer from '../DismissableLayer/DismissableLayer.vue'

const isVisibleFirst = ref(false)
const isVisibleSecond = ref(false)
</script>

<template>
  <DismissableLayer @dismiss="isVisibleFirst = false">
    <button @click="isVisibleFirst = true">Open First</button>
    <div v-if="isVisibleFirst">First</div>
  </DismissableLayer>

  <DismissableLayer @dismiss="isVisibleSecond = false">
    <button @click="isVisibleSecond = true">Open Second</button>
    <div v-if="isVisibleSecond">Second</div>
  </DismissableLayer>
</template>

• Click first button → First content appears
• Click second button → second content appears, however the first content does not get dismissed

Reloading the example and clicking the buttons in the opposite order it works as expected:

Disclaimer: I know the DismissableLayer component is an internal component originally and I might be using it wrong. In fact the behaviour is correct when I don’t include the button in the dismissable layer:

<template>
  <button @click="isVisibleFirst = true">Open First</button>

  <DismissableLayer @dismiss="isVisibleFirst = false">
    <div v-if="isVisibleFirst">First</div>
  </DismissableLayer>

  <button @click="isVisibleSecond = true">Open Second</button>

  <DismissableLayer @dismiss="isVisibleSecond = false">
    <div v-if="isVisibleSecond">Second</div>
  </DismissableLayer>
</template>

however since the behaviour is inconsistent depending on the order of interaction, I feel like this might actually be a bug

Describe the bug

The DismissableLayer component does not detect clicks outside in this situation

Expected behavior

The DismissableLayer component should detect clicks outside correctly

Context & Screenshots (if applicable)

No response