VSelect issue with v-click-outside on parent element

[frederikheld]

Hey everyone,

I'd like to have a div showing a value and if the user clicks on it, it goes into edit mode showing an VInput instead of the text. The user can hit Enter to save changes or click outside of that div to leave the edit mode. This works well for all kinds of VInput, esp. VTextField that I'm using a lot. But it does not work for VSelect as clicks on the list of options will be registered by the v-click-outside directive of the parent element.

See the following code (I left out some of the details of entering/leaving the edit mode to focus on the click-outside part):

<div>
  <div v-if="isInEditMode" v-click-outside="leaveEditMode">
    <v-select v-model="inputValue" :items="[ ... ]" />
  </div>
  <div v-else @click="enterEditMode">{{ inputValue }}</div>
</div>

The issue is that the VSelect teleports the options list to somewhere outside of that div element. I tried to use the include property of v-click-outside but I could not figure out what to put in there to make it work:

<div
  v-click-outside="{
    handler: leaveEditMode,
    include: () => [???]
  }"
/>

I also looked if the VSelect has a property that turns off the teleport to make the list render as an actual child of the div but this doesn't seem to be possible either.

I also built my own list using the #item slot in the hopes to somehow hook into the event handling, but no success either

Is there any way to get the result that I'm looking for?

[karwan01]

I have tried this I hope it helps you

<template>
  <div>
    <div
      v-if="isInEditMode"
      v-click-outside="{
        handler: leaveEditMode,
        include: [dropdownRef]
      }"
    >
      <v-select
        ref="dropdownRef"
        v-model="inputValue"
        :items="items"
        @blur="onBlur"
      />
    </div>
    <div v-else @click="enterEditMode">{{ inputValue }}</div>
  </div>
</template>

<script setup>
  import { ref } from 'vue'

  const isInEditMode = ref(false)
  const inputValue = ref('Option 1')
  const items = ref(['Option 1', 'Option 2', 'Option 3'])
  const dropdownRef = ref(null)

  const enterEditMode = () => {
    isInEditMode.value = true
  }

  const leaveEditMode = () => {
    isInEditMode.value = false
  }

  const onValueSelect = () => {
    // Handle selection and leave edit mode
    leaveEditMode()
  }

  const onBlur = () => {
    // Additional safety check to leave edit mode when focus is lost
    if (isInEditMode.value) {
      leaveEditMode()
    }
  }
</script>

[frederikheld]

Thanks a lot.

I tried a lot of approaches with the original VSelect but none of them covered all edge cases.

I ended up with writing custom select component that mounts the dropdown within the component. No issue with click outside if the dropdown is mounted inside the component.

Honestly, I don't understand why Vuetify mounts stuff like this in :root. You can mount it inside the component and use position: absolute to not break the layout, which makes it way easier to handle overall.