Skip to content

Conversation

4dr1en
Copy link

@4dr1en 4dr1en commented Oct 13, 2025

Description

This PR fixes an issue in the VOverlay component where the target prop was being passed to MaybeTransition regardless of the type of the transition prop. The target prop should only be passed when the transition prop is an object, not when it's a string transition name.

Problem:
The MaybeTransition component was receiving a target value even when using string-based transitions, which cause an invalid attribute to appear in the DOM (target="[object HTMLButtonElement]")

Solution:
Added a conditional check using isObject(props.transition) to only pass the target prop to MaybeTransition when the transition prop is an object. This ensures the target is only used for custom transition configurations that actually need it.

Changes:

  • Import isObject utility function
  • Add conditional check: target={ isObject(props.transition) ? target.value : undefined }

Markup:

<template>
  <v-app>
    <v-container>
      <!-- <v-menu
        transition="slide-y-transition"
      >
        <template #activator="{ props }">
          <v-btn
            color="primary"
            v-bind="props"
          >
            Slide Y Transition
          </v-btn>
        </template>
        <v-list>
          <v-list-item
            v-for="(item, i) in items"
            :key="i"
            :value="i"
          >
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu> -->
      <v-btn
        color="primary"
      >
        Parent activator

        <v-menu activator="parent">
          <v-list>
            <v-list-item
              v-for="(item, index) in items"
              :key="index"
              :value="index"
            >
              <v-list-item-title>{{ item.title }}</v-list-item-title>
            </v-list-item>
          </v-list>
        </v-menu>
      </v-btn>
    </v-container>
  </v-app>
</template>

<script setup>
  const items = [
    { title: 'Click Me' },
    { title: 'Click Me' },
    { title: 'Click Me' },
    { title: 'Click Me 2' },
  ]
</script>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant