Shadow appearing above v-text-field when active

Question

I have a v-text-area, and whenever I click into the field to enter a value, there is a shadow or blurry dark area that appears at the top behind the title. When I inspect the element, the shadow is in the padding space for the input field. Here is my entire component):

<template>
  <v-card class="mx-4 my-8 px-4">
    <v-row>
      <v-col cols="6">
        <v-menu>
          <template v-slot:activator="{on}">
            <v-text-field v-on="on" label="Next Due"></v-text-field> 
          </template>
        </v-menu>
      </v-col>
    </v-row>
  </v-card>
</template>

<script>
  export default {
    name: 'EditScheduledEmailReport',
    data() {
      return {}
    },
  }

</script>

Here are some images of with it looks like with/without the shadow:

Does anyone know what I can do about this or has anyone had this happen? It definitely seems like a bug because when I put the same code in another component, it doesn't happen. Not sure where else to look.

Answer 1

That's the box-shadow of the empty v-menu content. It is appended to the main app node with absolute position, which makes it hard to find when its empty. Look for the .v-menu__content class. Once you put something in the menu and possible move it below the input, it probably looks quite nice.

Here is a snippet where it is bright blue and you can compare it to a none-empty menu:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  template: `
    <v-app>
      <v-main>
        <v-container>
          <v-card class="mx-4 my-8 px-4">
            <v-row>
              <v-col cols="6">
              
                <v-menu>
                  <template v-slot:activator="{on}">
                    <v-text-field v-on="on" label="with empty menu"></v-text-field> 
                  </template>
                </v-menu>
                
              </v-col><v-col cols="6">
               
                <v-menu>
                  <template v-slot:activator="{on}">
                    <v-text-field v-on="on" label="with none-empty menu"></v-text-field> 
                  </template>
                  <v-list>
                    <v-list-item>
                      <v-list-item-title>Item</v-list-item-title>
                    </v-list-item>
                  </v-list>
                </v-menu>
                
               </v-col>
            </v-row>
          </v-card>
        </v-container>
      </v-main>
    </v-app>
  `,
})

.v-menu__content{
  box-shadow: blue 0px 10px 1px 1px!important;
}

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>