From 5d8d4871c3b916090b11749ca83852616f49415b Mon Sep 17 00:00:00 2001
From: Jacek Karczmarczyk <jk@drukcd.pl>
Date: Wed, 12 Feb 2020 11:57:09 +0700
Subject: [PATCH] fix(VMenu): allow more than 1 content node (#10525)

* fix(VMenu): allow more than 1 content node

fixes #10522

* test

* fix(VMenu): show transitions

Co-authored-by: Kael <kaelwd@gmail.com>
---
 .../__tests__/VAutocomplete2.spec.ts          |  2 +-
 .../__snapshots__/VDataFooter.spec.ts.snap    | 16 ++--
 .../__snapshots__/VDataIterator.spec.ts.snap  | 16 ++--
 .../__snapshots__/VDataTable.spec.ts.snap     | 96 +++++++++----------
 .../VDataTableHeader.spec.ts.snap             | 30 +++---
 .../vuetify/src/components/VMenu/VMenu.ts     | 24 +++--
 .../components/VMenu/__tests__/VMenu.spec.ts  | 17 ++++
 .../__snapshots__/VMenu.spec.ts.snap          | 18 ++++
 .../__snapshots__/VOverflowBtn.spec.ts.snap   | 66 -------------
 .../__snapshots__/VSelect.spec.ts.snap        | 16 ++--
 .../__snapshots__/VSelect2.spec.ts.snap       |  8 +-
 .../__snapshots__/VSelect3.spec.ts.snap       |  4 +-
 12 files changed, 140 insertions(+), 173 deletions(-)

diff --git a/packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete2.spec.ts b/packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete2.spec.ts
index 5f1e74d1a2e..5ee9083100b 100644
--- a/packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete2.spec.ts
+++ b/packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete2.spec.ts
@@ -222,7 +222,7 @@ describe('VAutocomplete.ts', () => {
   it('should propagate content class', () => {
     const wrapper = mountFunction({
       propsData: {
-        menuProps: { contentClass: 'foobar' },
+        menuProps: { contentClass: 'foobar', eager: true },
       },
     })
 
diff --git a/packages/vuetify/src/components/VDataIterator/__tests__/__snapshots__/VDataFooter.spec.ts.snap b/packages/vuetify/src/components/VDataIterator/__tests__/__snapshots__/VDataFooter.spec.ts.snap
index b74c33ae38e..63d5f12526a 100644
--- a/packages/vuetify/src/components/VDataIterator/__tests__/__snapshots__/VDataFooter.spec.ts.snap
+++ b/packages/vuetify/src/components/VDataIterator/__tests__/__snapshots__/VDataFooter.spec.ts.snap
@@ -9,7 +9,7 @@ exports[`VDataFooter.ts should disable last page button if no items 1`] = `
         <div role="button"
              aria-haspopup="listbox"
              aria-expanded="false"
-             aria-owns="list-60"
+             aria-owns="list-55"
              class="v-input__slot"
         >
           <div class="v-select__slot">
@@ -18,7 +18,7 @@ exports[`VDataFooter.ts should disable last page button if no items 1`] = `
                 10
               </div>
               <input aria-label="$vuetify.dataFooter.itemsPerPageText"
-                     id="input-60"
+                     id="input-55"
                      readonly="readonly"
                      type="text"
                      aria-readonly="false"
@@ -110,7 +110,7 @@ exports[`VDataFooter.ts should render first & last icons with showFirstLastPage
         <div role="button"
              aria-haspopup="listbox"
              aria-expanded="false"
-             aria-owns="list-26"
+             aria-owns="list-24"
              class="v-input__slot"
         >
           <div class="v-select__slot">
@@ -119,7 +119,7 @@ exports[`VDataFooter.ts should render first & last icons with showFirstLastPage
                 10
               </div>
               <input aria-label="$vuetify.dataFooter.itemsPerPageText"
-                     id="input-26"
+                     id="input-24"
                      readonly="readonly"
                      type="text"
                      aria-readonly="false"
@@ -207,7 +207,7 @@ exports[`VDataFooter.ts should render in RTL mode 1`] = `
         <div role="button"
              aria-haspopup="listbox"
              aria-expanded="false"
-             aria-owns="list-12"
+             aria-owns="list-11"
              class="v-input__slot"
         >
           <div class="v-select__slot">
@@ -216,7 +216,7 @@ exports[`VDataFooter.ts should render in RTL mode 1`] = `
                 10
               </div>
               <input aria-label="$vuetify.dataFooter.itemsPerPageText"
-                     id="input-12"
+                     id="input-11"
                      readonly="readonly"
                      type="text"
                      aria-readonly="false"
@@ -380,7 +380,7 @@ exports[`VDataFooter.ts should show current page if has showCurrentPage 1`] = `
         <div role="button"
              aria-haspopup="listbox"
              aria-expanded="false"
-             aria-owns="list-50"
+             aria-owns="list-46"
              class="v-input__slot"
         >
           <div class="v-select__slot">
@@ -389,7 +389,7 @@ exports[`VDataFooter.ts should show current page if has showCurrentPage 1`] = `
                 10
               </div>
               <input aria-label="$vuetify.dataFooter.itemsPerPageText"
-                     id="input-50"
+                     id="input-46"
                      readonly="readonly"
                      type="text"
                      aria-readonly="false"
diff --git a/packages/vuetify/src/components/VDataIterator/__tests__/__snapshots__/VDataIterator.spec.ts.snap b/packages/vuetify/src/components/VDataIterator/__tests__/__snapshots__/VDataIterator.spec.ts.snap
index 1ca66f640b9..184c90e0b53 100644
--- a/packages/vuetify/src/components/VDataIterator/__tests__/__snapshots__/VDataIterator.spec.ts.snap
+++ b/packages/vuetify/src/components/VDataIterator/__tests__/__snapshots__/VDataIterator.spec.ts.snap
@@ -112,7 +112,7 @@ exports[`VDataIterator.ts should render and match snapshot with data 1`] = `
           <div role="button"
                aria-haspopup="listbox"
                aria-expanded="false"
-               aria-owns="list-17"
+               aria-owns="list-16"
                class="v-input__slot"
           >
             <div class="v-select__slot">
@@ -121,7 +121,7 @@ exports[`VDataIterator.ts should render and match snapshot with data 1`] = `
                   10
                 </div>
                 <input aria-label="$vuetify.dataFooter.itemsPerPageText"
-                       id="input-17"
+                       id="input-16"
                        readonly="readonly"
                        type="text"
                        aria-readonly="false"
@@ -194,7 +194,7 @@ exports[`VDataIterator.ts should render valid no-data, loading and no-results st
           <div role="button"
                aria-haspopup="listbox"
                aria-expanded="false"
-               aria-owns="list-29"
+               aria-owns="list-27"
                class="v-input__slot"
           >
             <div class="v-select__slot">
@@ -203,7 +203,7 @@ exports[`VDataIterator.ts should render valid no-data, loading and no-results st
                   10
                 </div>
                 <input aria-label="$vuetify.dataFooter.itemsPerPageText"
-                       id="input-29"
+                       id="input-27"
                        readonly="readonly"
                        type="text"
                        aria-readonly="false"
@@ -276,7 +276,7 @@ exports[`VDataIterator.ts should render valid no-data, loading and no-results st
           <div role="button"
                aria-haspopup="listbox"
                aria-expanded="false"
-               aria-owns="list-29"
+               aria-owns="list-27"
                class="v-input__slot"
           >
             <div class="v-select__slot">
@@ -285,7 +285,7 @@ exports[`VDataIterator.ts should render valid no-data, loading and no-results st
                   10
                 </div>
                 <input aria-label="$vuetify.dataFooter.itemsPerPageText"
-                       id="input-29"
+                       id="input-27"
                        readonly="readonly"
                        type="text"
                        aria-readonly="false"
@@ -358,7 +358,7 @@ exports[`VDataIterator.ts should render valid no-data, loading and no-results st
           <div role="button"
                aria-haspopup="listbox"
                aria-expanded="false"
-               aria-owns="list-29"
+               aria-owns="list-27"
                class="v-input__slot"
           >
             <div class="v-select__slot">
@@ -367,7 +367,7 @@ exports[`VDataIterator.ts should render valid no-data, loading and no-results st
                   10
                 </div>
                 <input aria-label="$vuetify.dataFooter.itemsPerPageText"
-                       id="input-29"
+                       id="input-27"
                        readonly="readonly"
                        type="text"
                        aria-readonly="false"
diff --git a/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VDataTable.spec.ts.snap b/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VDataTable.spec.ts.snap
index 9ba3e7481bf..8735eb501e9 100644
--- a/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VDataTable.spec.ts.snap
+++ b/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VDataTable.spec.ts.snap
@@ -425,7 +425,7 @@ exports[`VDataTable.ts should default to first option in itemsPerPageOptions if
           <div role="button"
                aria-haspopup="listbox"
                aria-expanded="false"
-               aria-owns="list-429"
+               aria-owns="list-409"
                class="v-input__slot"
           >
             <div class="v-select__slot">
@@ -434,7 +434,7 @@ exports[`VDataTable.ts should default to first option in itemsPerPageOptions if
                   6
                 </div>
                 <input aria-label="$vuetify.dataTable.itemsPerPageText"
-                       id="input-429"
+                       id="input-409"
                        readonly="readonly"
                        type="text"
                        aria-readonly="false"
@@ -814,7 +814,7 @@ exports[`VDataTable.ts should handle object when checking if it should default t
           <div role="button"
                aria-haspopup="listbox"
                aria-expanded="false"
-               aria-owns="list-448"
+               aria-owns="list-427"
                class="v-input__slot"
           >
             <div class="v-select__slot">
@@ -823,7 +823,7 @@ exports[`VDataTable.ts should handle object when checking if it should default t
                   All
                 </div>
                 <input aria-label="$vuetify.dataTable.itemsPerPageText"
-                       id="input-448"
+                       id="input-427"
                        readonly="readonly"
                        type="text"
                        aria-readonly="false"
@@ -1104,7 +1104,7 @@ exports[`VDataTable.ts should limit page to current page count if not using serv
           <div role="button"
                aria-haspopup="listbox"
                aria-expanded="false"
-               aria-owns="list-410"
+               aria-owns="list-391"
                class="v-input__slot"
           >
             <div class="v-select__slot">
@@ -1113,7 +1113,7 @@ exports[`VDataTable.ts should limit page to current page count if not using serv
                   5
                 </div>
                 <input aria-label="$vuetify.dataTable.itemsPerPageText"
-                       id="input-410"
+                       id="input-391"
                        readonly="readonly"
                        type="text"
                        aria-readonly="false"
@@ -1298,7 +1298,7 @@ exports[`VDataTable.ts should not limit page to current item count when using se
           <div role="button"
                aria-haspopup="listbox"
                aria-expanded="false"
-               aria-owns="list-351"
+               aria-owns="list-335"
                class="v-input__slot"
           >
             <div class="v-select__slot">
@@ -1307,7 +1307,7 @@ exports[`VDataTable.ts should not limit page to current item count when using se
                   5
                 </div>
                 <input aria-label="$vuetify.dataTable.itemsPerPageText"
-                       id="input-351"
+                       id="input-335"
                        readonly="readonly"
                        type="text"
                        aria-readonly="false"
@@ -1587,7 +1587,7 @@ exports[`VDataTable.ts should not limit page to current item count when using se
           <div role="button"
                aria-haspopup="listbox"
                aria-expanded="false"
-               aria-owns="list-351"
+               aria-owns="list-335"
                class="v-input__slot"
           >
             <div class="v-select__slot">
@@ -1596,7 +1596,7 @@ exports[`VDataTable.ts should not limit page to current item count when using se
                   5
                 </div>
                 <input aria-label="$vuetify.dataTable.itemsPerPageText"
-                       id="input-351"
+                       id="input-335"
                        readonly="readonly"
                        type="text"
                        aria-readonly="false"
@@ -1981,7 +1981,7 @@ exports[`VDataTable.ts should not search column with filterable set to false 1`]
           <div role="button"
                aria-haspopup="listbox"
                aria-expanded="false"
-               aria-owns="list-371"
+               aria-owns="list-354"
                class="v-input__slot"
           >
             <div class="v-select__slot">
@@ -1990,7 +1990,7 @@ exports[`VDataTable.ts should not search column with filterable set to false 1`]
                   10
                 </div>
                 <input aria-label="$vuetify.dataTable.itemsPerPageText"
-                       id="input-371"
+                       id="input-354"
                        readonly="readonly"
                        type="text"
                        aria-readonly="false"
@@ -2184,7 +2184,7 @@ exports[`VDataTable.ts should not search column with filterable set to false 2`]
           <div role="button"
                aria-haspopup="listbox"
                aria-expanded="false"
-               aria-owns="list-371"
+               aria-owns="list-354"
                class="v-input__slot"
           >
             <div class="v-select__slot">
@@ -2193,7 +2193,7 @@ exports[`VDataTable.ts should not search column with filterable set to false 2`]
                   10
                 </div>
                 <input aria-label="$vuetify.dataTable.itemsPerPageText"
-                       id="input-371"
+                       id="input-354"
                        readonly="readonly"
                        type="text"
                        aria-readonly="false"
@@ -2440,7 +2440,7 @@ exports[`VDataTable.ts should not search column with filterable set to false and
           <div role="button"
                aria-haspopup="listbox"
                aria-expanded="false"
-               aria-owns="list-391"
+               aria-owns="list-373"
                class="v-input__slot"
           >
             <div class="v-select__slot">
@@ -2449,7 +2449,7 @@ exports[`VDataTable.ts should not search column with filterable set to false and
                   10
                 </div>
                 <input aria-label="$vuetify.dataTable.itemsPerPageText"
-                       id="input-391"
+                       id="input-373"
                        readonly="readonly"
                        type="text"
                        aria-readonly="false"
@@ -2836,7 +2836,7 @@ exports[`VDataTable.ts should not search column with filterable set to false and
           <div role="button"
                aria-haspopup="listbox"
                aria-expanded="false"
-               aria-owns="list-391"
+               aria-owns="list-373"
                class="v-input__slot"
           >
             <div class="v-select__slot">
@@ -2845,7 +2845,7 @@ exports[`VDataTable.ts should not search column with filterable set to false and
                   10
                 </div>
                 <input aria-label="$vuetify.dataTable.itemsPerPageText"
-                       id="input-391"
+                       id="input-373"
                        readonly="readonly"
                        type="text"
                        aria-readonly="false"
@@ -3104,7 +3104,7 @@ exports[`VDataTable.ts should not select item that is not selectable 1`] = `
           <div role="button"
                aria-haspopup="listbox"
                aria-expanded="false"
-               aria-owns="list-525"
+               aria-owns="list-501"
                class="v-input__slot"
           >
             <div class="v-select__slot">
@@ -3113,7 +3113,7 @@ exports[`VDataTable.ts should not select item that is not selectable 1`] = `
                   10
                 </div>
                 <input aria-label="$vuetify.dataTable.itemsPerPageText"
-                       id="input-525"
+                       id="input-501"
                        readonly="readonly"
                        type="text"
                        aria-readonly="false"
@@ -3203,7 +3203,7 @@ exports[`VDataTable.ts should pass kebab-case footer props correctly 1`] = `
           <div role="button"
                aria-haspopup="listbox"
                aria-expanded="false"
-               aria-owns="list-298"
+               aria-owns="list-285"
                class="v-input__slot"
           >
             <div class="v-select__slot">
@@ -3212,7 +3212,7 @@ exports[`VDataTable.ts should pass kebab-case footer props correctly 1`] = `
                   10
                 </div>
                 <input aria-label="Foo:"
-                       id="input-298"
+                       id="input-285"
                        readonly="readonly"
                        type="text"
                        aria-readonly="false"
@@ -3398,7 +3398,7 @@ exports[`VDataTable.ts should render footer.page-text slot content 1`] = `
           <div role="button"
                aria-haspopup="listbox"
                aria-expanded="false"
-               aria-owns="list-332"
+               aria-owns="list-317"
                class="v-input__slot"
           >
             <div class="v-select__slot">
@@ -3407,7 +3407,7 @@ exports[`VDataTable.ts should render footer.page-text slot content 1`] = `
                   10
                 </div>
                 <input aria-label="$vuetify.dataTable.itemsPerPageText"
-                       id="input-332"
+                       id="input-317"
                        readonly="readonly"
                        type="text"
                        aria-readonly="false"
@@ -3526,7 +3526,7 @@ exports[`VDataTable.ts should render loading state 1`] = `
           <div role="button"
                aria-haspopup="listbox"
                aria-expanded="false"
-               aria-owns="list-246"
+               aria-owns="list-236"
                class="v-input__slot"
           >
             <div class="v-select__slot">
@@ -3535,7 +3535,7 @@ exports[`VDataTable.ts should render loading state 1`] = `
                   10
                 </div>
                 <input aria-label="$vuetify.dataTable.itemsPerPageText"
-                       id="input-246"
+                       id="input-236"
                        readonly="readonly"
                        type="text"
                        aria-readonly="false"
@@ -3732,7 +3732,7 @@ exports[`VDataTable.ts should render loading state 2`] = `
           <div role="button"
                aria-haspopup="listbox"
                aria-expanded="false"
-               aria-owns="list-265"
+               aria-owns="list-254"
                class="v-input__slot"
           >
             <div class="v-select__slot">
@@ -3741,7 +3741,7 @@ exports[`VDataTable.ts should render loading state 2`] = `
                   10
                 </div>
                 <input aria-label="$vuetify.dataTable.itemsPerPageText"
-                       id="input-265"
+                       id="input-254"
                        readonly="readonly"
                        type="text"
                        aria-readonly="false"
@@ -3923,7 +3923,7 @@ exports[`VDataTable.ts should render with body slot 1`] = `
           <div role="button"
                aria-haspopup="listbox"
                aria-expanded="false"
-               aria-owns="list-45"
+               aria-owns="list-43"
                class="v-input__slot"
           >
             <div class="v-select__slot">
@@ -3932,7 +3932,7 @@ exports[`VDataTable.ts should render with body slot 1`] = `
                   5
                 </div>
                 <input aria-label="$vuetify.dataTable.itemsPerPageText"
-                       id="input-45"
+                       id="input-43"
                        readonly="readonly"
                        type="text"
                        aria-readonly="false"
@@ -4212,7 +4212,7 @@ exports[`VDataTable.ts should render with data 1`] = `
           <div role="button"
                aria-haspopup="listbox"
                aria-expanded="false"
-               aria-owns="list-25"
+               aria-owns="list-24"
                class="v-input__slot"
           >
             <div class="v-select__slot">
@@ -4221,7 +4221,7 @@ exports[`VDataTable.ts should render with data 1`] = `
                   5
                 </div>
                 <input aria-label="$vuetify.dataTable.itemsPerPageText"
-                       id="input-25"
+                       id="input-24"
                        readonly="readonly"
                        type="text"
                        aria-readonly="false"
@@ -4396,7 +4396,7 @@ exports[`VDataTable.ts should render with group scoped slot 1`] = `
           <div role="button"
                aria-haspopup="listbox"
                aria-expanded="false"
-               aria-owns="list-230"
+               aria-owns="list-221"
                class="v-input__slot"
           >
             <div class="v-select__slot">
@@ -4405,7 +4405,7 @@ exports[`VDataTable.ts should render with group scoped slot 1`] = `
                   5
                 </div>
                 <input aria-label="$vuetify.dataTable.itemsPerPageText"
-                       id="input-230"
+                       id="input-221"
                        readonly="readonly"
                        type="text"
                        aria-readonly="false"
@@ -4823,7 +4823,7 @@ exports[`VDataTable.ts should render with group.summary scoped slot 1`] = `
           <div role="button"
                aria-haspopup="listbox"
                aria-expanded="false"
-               aria-owns="list-155"
+               aria-owns="list-149"
                class="v-input__slot"
           >
             <div class="v-select__slot">
@@ -4832,7 +4832,7 @@ exports[`VDataTable.ts should render with group.summary scoped slot 1`] = `
                   5
                 </div>
                 <input aria-label="$vuetify.dataTable.itemsPerPageText"
-                       id="input-155"
+                       id="input-149"
                        readonly="readonly"
                        type="text"
                        aria-readonly="false"
@@ -5196,7 +5196,7 @@ exports[`VDataTable.ts should render with grouped rows 1`] = `
           <div role="button"
                aria-haspopup="listbox"
                aria-expanded="false"
-               aria-owns="list-210"
+               aria-owns="list-202"
                class="v-input__slot"
           >
             <div class="v-select__slot">
@@ -5205,7 +5205,7 @@ exports[`VDataTable.ts should render with grouped rows 1`] = `
                   5
                 </div>
                 <input aria-label="$vuetify.dataTable.itemsPerPageText"
-                       id="input-210"
+                       id="input-202"
                        readonly="readonly"
                        type="text"
                        aria-readonly="false"
@@ -5400,7 +5400,7 @@ exports[`VDataTable.ts should render with item scoped slot 1`] = `
           <div role="button"
                aria-haspopup="listbox"
                aria-expanded="false"
-               aria-owns="list-176"
+               aria-owns="list-169"
                class="v-input__slot"
           >
             <div class="v-select__slot">
@@ -5409,7 +5409,7 @@ exports[`VDataTable.ts should render with item scoped slot 1`] = `
                   5
                 </div>
                 <input aria-label="$vuetify.dataTable.itemsPerPageText"
-                       id="input-176"
+                       id="input-169"
                        readonly="readonly"
                        type="text"
                        aria-readonly="false"
@@ -5714,7 +5714,7 @@ exports[`VDataTable.ts should render with item.expanded scoped slot 1`] = `
           <div role="button"
                aria-haspopup="listbox"
                aria-expanded="false"
-               aria-owns="list-115"
+               aria-owns="list-110"
                class="v-input__slot"
           >
             <div class="v-select__slot">
@@ -5723,7 +5723,7 @@ exports[`VDataTable.ts should render with item.expanded scoped slot 1`] = `
                   5
                 </div>
                 <input aria-label="$vuetify.dataTable.itemsPerPageText"
-                       id="input-115"
+                       id="input-110"
                        readonly="readonly"
                        type="text"
                        aria-readonly="false"
@@ -6049,7 +6049,7 @@ exports[`VDataTable.ts should render with showExpand 1`] = `
           <div role="button"
                aria-haspopup="listbox"
                aria-expanded="false"
-               aria-owns="list-69"
+               aria-owns="list-66"
                class="v-input__slot"
           >
             <div class="v-select__slot">
@@ -6058,7 +6058,7 @@ exports[`VDataTable.ts should render with showExpand 1`] = `
                   5
                 </div>
                 <input aria-label="$vuetify.dataTable.itemsPerPageText"
-                       id="input-69"
+                       id="input-66"
                        readonly="readonly"
                        type="text"
                        aria-readonly="false"
@@ -6384,7 +6384,7 @@ exports[`VDataTable.ts should render with showExpand 2`] = `
           <div role="button"
                aria-haspopup="listbox"
                aria-expanded="false"
-               aria-owns="list-69"
+               aria-owns="list-66"
                class="v-input__slot"
           >
             <div class="v-select__slot">
@@ -6393,7 +6393,7 @@ exports[`VDataTable.ts should render with showExpand 2`] = `
                   5
                 </div>
                 <input aria-label="$vuetify.dataTable.itemsPerPageText"
-                       id="input-69"
+                       id="input-66"
                        readonly="readonly"
                        type="text"
                        aria-readonly="false"
@@ -6746,7 +6746,7 @@ exports[`VDataTable.ts should render with showSelect 1`] = `
           <div role="button"
                aria-haspopup="listbox"
                aria-expanded="false"
-               aria-owns="list-94"
+               aria-owns="list-90"
                class="v-input__slot"
           >
             <div class="v-select__slot">
@@ -6755,7 +6755,7 @@ exports[`VDataTable.ts should render with showSelect 1`] = `
                   5
                 </div>
                 <input aria-label="$vuetify.dataTable.itemsPerPageText"
-                       id="input-94"
+                       id="input-90"
                        readonly="readonly"
                        type="text"
                        aria-readonly="false"
diff --git a/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VDataTableHeader.spec.ts.snap b/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VDataTableHeader.spec.ts.snap
index 51fc1e2ed59..ac2c2804d44 100644
--- a/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VDataTableHeader.spec.ts.snap
+++ b/packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VDataTableHeader.spec.ts.snap
@@ -587,18 +587,18 @@ exports[`VDataTableHeader.ts mobile should render with data-table-select header
             <div role="button"
                  aria-haspopup="listbox"
                  aria-expanded="false"
-                 aria-owns="list-74"
+                 aria-owns="list-69"
                  class="v-input__slot"
             >
               <div class="v-select__slot">
-                <label for="input-74"
+                <label for="input-69"
                        class="v-label theme--light"
                        style="left: 0px; position: absolute;"
                 >
                   Sort by
                 </label>
                 <div class="v-select__selections">
-                  <input id="input-74"
+                  <input id="input-69"
                          readonly="readonly"
                          type="text"
                          aria-readonly="false"
@@ -637,11 +637,11 @@ exports[`VDataTableHeader.ts mobile should work with multiSort 1`] = `
             <div role="button"
                  aria-haspopup="listbox"
                  aria-expanded="false"
-                 aria-owns="list-49"
+                 aria-owns="list-47"
                  class="v-input__slot"
             >
               <div class="v-select__slot">
-                <label for="input-49"
+                <label for="input-47"
                        class="v-label v-label--active theme--light"
                        style="left: 0px; position: absolute;"
                 >
@@ -661,7 +661,7 @@ exports[`VDataTableHeader.ts mobile should work with multiSort 1`] = `
                       </div>
                     </span>
                   </span>
-                  <input id="input-49"
+                  <input id="input-47"
                          readonly="readonly"
                          type="text"
                          aria-readonly="false"
@@ -702,18 +702,18 @@ exports[`VDataTableHeader.ts mobile should work with showGroupBy 1`] = `
             <div role="button"
                  aria-haspopup="listbox"
                  aria-expanded="false"
-                 aria-owns="list-43"
+                 aria-owns="list-42"
                  class="v-input__slot"
             >
               <div class="v-select__slot">
-                <label for="input-43"
+                <label for="input-42"
                        class="v-label theme--light"
                        style="left: 0px; position: absolute;"
                 >
                   Sort by
                 </label>
                 <div class="v-select__selections">
-                  <input id="input-43"
+                  <input id="input-42"
                          readonly="readonly"
                          type="text"
                          aria-readonly="false"
@@ -752,11 +752,11 @@ exports[`VDataTableHeader.ts mobile should work with sortBy correctly 1`] = `
             <div role="button"
                  aria-haspopup="listbox"
                  aria-expanded="false"
-                 aria-owns="list-57"
+                 aria-owns="list-54"
                  class="v-input__slot"
             >
               <div class="v-select__slot">
-                <label for="input-57"
+                <label for="input-54"
                        class="v-label v-label--active theme--light"
                        style="left: 0px; position: absolute;"
                 >
@@ -776,7 +776,7 @@ exports[`VDataTableHeader.ts mobile should work with sortBy correctly 1`] = `
                       </div>
                     </span>
                   </span>
-                  <input id="input-57"
+                  <input id="input-54"
                          readonly="readonly"
                          type="text"
                          aria-readonly="false"
@@ -817,11 +817,11 @@ exports[`VDataTableHeader.ts mobile should work with sortDesc correctly 1`] = `
             <div role="button"
                  aria-haspopup="listbox"
                  aria-expanded="false"
-                 aria-owns="list-65"
+                 aria-owns="list-61"
                  class="v-input__slot"
             >
               <div class="v-select__slot">
-                <label for="input-65"
+                <label for="input-61"
                        class="v-label v-label--active theme--light"
                        style="left: 0px; position: absolute;"
                 >
@@ -841,7 +841,7 @@ exports[`VDataTableHeader.ts mobile should work with sortDesc correctly 1`] = `
                       </div>
                     </span>
                   </span>
-                  <input id="input-65"
+                  <input id="input-61"
                          readonly="readonly"
                          type="text"
                          aria-readonly="false"
diff --git a/packages/vuetify/src/components/VMenu/VMenu.ts b/packages/vuetify/src/components/VMenu/VMenu.ts
index a9b80800552..a4a357bb42a 100644
--- a/packages/vuetify/src/components/VMenu/VMenu.ts
+++ b/packages/vuetify/src/components/VMenu/VMenu.ts
@@ -300,7 +300,7 @@ export default baseMixins.extend({
         props: {
           name: this.transition,
         },
-      }, this.showLazyContent(() => [content]))
+      }, [content])
     },
     genDirectives (): VNodeDirective[] {
       const directives: VNodeDirective[] = [{
@@ -360,17 +360,7 @@ export default baseMixins.extend({
         options.on.mouseleave = this.mouseLeaveHandler
       }
 
-      return this.$createElement(
-        'div',
-        options,
-        [this.$createElement(VThemeProvider, {
-          props: {
-            root: true,
-            light: this.light,
-            dark: this.dark,
-          },
-        }, this.getContentSlot())]
-      )
+      return this.$createElement('div', options, this.getContentSlot())
     },
     getTiles () {
       if (!this.$refs.content) return
@@ -479,7 +469,15 @@ export default baseMixins.extend({
 
     return h('div', data, [
       !this.activator && this.genActivator(),
-      this.genTransition(),
+      this.showLazyContent(() => [
+        this.$createElement(VThemeProvider, {
+          props: {
+            root: true,
+            light: this.light,
+            dark: this.dark,
+          },
+        }, [this.genTransition()]),
+      ]),
     ])
   },
 })
diff --git a/packages/vuetify/src/components/VMenu/__tests__/VMenu.spec.ts b/packages/vuetify/src/components/VMenu/__tests__/VMenu.spec.ts
index 80c9edf5f5b..921fd437f03 100644
--- a/packages/vuetify/src/components/VMenu/__tests__/VMenu.spec.ts
+++ b/packages/vuetify/src/components/VMenu/__tests__/VMenu.spec.ts
@@ -55,6 +55,23 @@ describe('VMenu.ts', () => {
     expect('Unable to locate target [data-app]').toHaveBeenTipped()
   })
 
+  it('should render multiple content nodes', async () => {
+    const wrapper = mountFunction({
+      propsData: {
+        eager: true,
+      },
+      scopedSlots: {
+        activator: '<button v-on="props.on"></button>',
+      },
+      slots: {
+        default: '<span>foo</span><span>bar</span>',
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+    expect('Unable to locate target [data-app]').toHaveBeenTipped()
+  })
+
   it('should round dimensions', async () => {
     const wrapper = mountFunction({
       propsData: {
diff --git a/packages/vuetify/src/components/VMenu/__tests__/__snapshots__/VMenu.spec.ts.snap b/packages/vuetify/src/components/VMenu/__tests__/__snapshots__/VMenu.spec.ts.snap
index 7127c83de9f..e37be2b0f78 100644
--- a/packages/vuetify/src/components/VMenu/__tests__/__snapshots__/VMenu.spec.ts.snap
+++ b/packages/vuetify/src/components/VMenu/__tests__/__snapshots__/VMenu.spec.ts.snap
@@ -1,5 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`VMenu.ts should render multiple content nodes 1`] = `
+<div class="v-menu">
+  <button>
+  </button>
+  <div role="menu"
+       class="v-menu__content theme--light "
+       style="max-height: auto; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
+  >
+    <span>
+      foo
+    </span>
+    <span>
+      bar
+    </span>
+  </div>
+</div>
+`;
+
 exports[`VMenu.ts should round dimensions 1`] = `"max-height: auto; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"`;
 
 exports[`VMenu.ts should update position dynamically 1`] = `"max-height: auto; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 8; display: none;"`;
diff --git a/packages/vuetify/src/components/VOverflowBtn/__tests__/__snapshots__/VOverflowBtn.spec.ts.snap b/packages/vuetify/src/components/VOverflowBtn/__tests__/__snapshots__/VOverflowBtn.spec.ts.snap
index 3f9a22055ba..af2da5a20ef 100644
--- a/packages/vuetify/src/components/VOverflowBtn/__tests__/__snapshots__/VOverflowBtn.spec.ts.snap
+++ b/packages/vuetify/src/components/VOverflowBtn/__tests__/__snapshots__/VOverflowBtn.spec.ts.snap
@@ -33,39 +33,6 @@ exports[`VOverflowBtn.js should use default autocomplete selections 1`] = `
         >
       </div>
       <div class="v-menu">
-        <div class="v-menu__content theme--light v-autocomplete__content"
-             style="max-height: 304px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
-        >
-          <div role="listbox"
-               tabindex="-1"
-               class="v-list v-select-list v-sheet v-sheet--tile theme--light theme--light"
-               id="list-1"
-          >
-            <div tabindex="0"
-                 aria-selected="true"
-                 id="list-item-5-0"
-                 role="option"
-                 class="v-list-item primary--text v-list-item--active v-list-item--link theme--light"
-            >
-              <div class="v-list-item__action">
-                <div class="v-simple-checkbox">
-                  <div class="v-input--selection-controls__ripple primary--text">
-                  </div>
-                  <i aria-hidden="true"
-                     class="v-icon notranslate material-icons theme--light primary--text"
-                  >
-                    $checkboxOn
-                  </i>
-                </div>
-              </div>
-              <div class="v-list-item__content">
-                <div class="v-list-item__title">
-                  foo
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
       </div>
     </div>
     <div class="v-text-field__details">
@@ -114,39 +81,6 @@ exports[`VOverflowBtn.js should use default autocomplete selections 2`] = `
         >
       </div>
       <div class="v-menu">
-        <div class="v-menu__content theme--light v-autocomplete__content"
-             style="max-height: 304px; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
-        >
-          <div role="listbox"
-               tabindex="-1"
-               class="v-list v-select-list v-sheet v-sheet--tile theme--light theme--light"
-               id="list-1"
-          >
-            <div tabindex="0"
-                 aria-selected="true"
-                 id="list-item-5-0"
-                 role="option"
-                 class="v-list-item primary--text v-list-item--active v-list-item--link theme--light"
-            >
-              <div class="v-list-item__action">
-                <div class="v-simple-checkbox">
-                  <div class="v-input--selection-controls__ripple primary--text">
-                  </div>
-                  <i aria-hidden="true"
-                     class="v-icon notranslate material-icons theme--light primary--text"
-                  >
-                    $checkboxOn
-                  </i>
-                </div>
-              </div>
-              <div class="v-list-item__content">
-                <div class="v-list-item__title">
-                  foo
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
       </div>
     </div>
     <div class="v-text-field__details">
diff --git a/packages/vuetify/src/components/VSelect/__tests__/__snapshots__/VSelect.spec.ts.snap b/packages/vuetify/src/components/VSelect/__tests__/__snapshots__/VSelect.spec.ts.snap
index 64aef3165ec..fb80740c9f0 100644
--- a/packages/vuetify/src/components/VSelect/__tests__/__snapshots__/VSelect.spec.ts.snap
+++ b/packages/vuetify/src/components/VSelect/__tests__/__snapshots__/VSelect.spec.ts.snap
@@ -220,12 +220,12 @@ exports[`VSelect.ts should render v-select correctly when not using scope slot 1
     <div role="button"
          aria-haspopup="listbox"
          aria-expanded="false"
-         aria-owns="list-35"
+         aria-owns="list-32"
          class="v-input__slot"
     >
       <div class="v-select__slot">
         <div class="v-select__selections">
-          <input id="input-35"
+          <input id="input-32"
                  readonly="readonly"
                  type="text"
                  aria-readonly="false"
@@ -265,12 +265,12 @@ exports[`VSelect.ts should render v-select correctly when not using v-list-item
     <div role="button"
          aria-haspopup="listbox"
          aria-expanded="false"
-         aria-owns="list-28"
+         aria-owns="list-26"
          class="v-input__slot"
     >
       <div class="v-select__slot">
         <div class="v-select__selections">
-          <input id="input-28"
+          <input id="input-26"
                  readonly="readonly"
                  type="text"
                  aria-readonly="false"
@@ -310,12 +310,12 @@ exports[`VSelect.ts should render v-select correctly when using v-list-item in i
     <div role="button"
          aria-haspopup="listbox"
          aria-expanded="false"
-         aria-owns="list-20"
+         aria-owns="list-19"
          class="v-input__slot"
     >
       <div class="v-select__slot">
         <div class="v-select__selections">
-          <input id="input-20"
+          <input id="input-19"
                  readonly="readonly"
                  type="text"
                  aria-readonly="false"
@@ -353,11 +353,11 @@ exports[`VSelect.ts should use slotted no-data 1`] = `
 <div role="listbox"
      tabindex="-1"
      class="v-list v-select-list v-sheet v-sheet--tile theme--light theme--light"
-     id="list-147"
+     id="list-134"
 >
   <div tabindex="0"
        aria-selected="false"
-       id="list-item-152-0"
+       id="list-item-139-0"
        role="option"
        class="v-list-item v-list-item--link theme--light"
   >
diff --git a/packages/vuetify/src/components/VSelect/__tests__/__snapshots__/VSelect2.spec.ts.snap b/packages/vuetify/src/components/VSelect/__tests__/__snapshots__/VSelect2.spec.ts.snap
index bdb017ee8ae..9a91ef14d86 100644
--- a/packages/vuetify/src/components/VSelect/__tests__/__snapshots__/VSelect2.spec.ts.snap
+++ b/packages/vuetify/src/components/VSelect/__tests__/__snapshots__/VSelect2.spec.ts.snap
@@ -6,7 +6,7 @@ exports[`VSelect.ts should be clearable with prop, dirty and multi select 1`] =
     <div role="button"
          aria-haspopup="listbox"
          aria-expanded="false"
-         aria-owns="list-104"
+         aria-owns="list-100"
          class="v-input__slot"
     >
       <div class="v-select__slot">
@@ -14,7 +14,7 @@ exports[`VSelect.ts should be clearable with prop, dirty and multi select 1`] =
           <div class="v-select__selection v-select__selection--comma">
             1
           </div>
-          <input id="input-104"
+          <input id="input-100"
                  readonly="readonly"
                  type="text"
                  aria-readonly="false"
@@ -66,7 +66,7 @@ exports[`VSelect.ts should be clearable with prop, dirty and single select 1`] =
     <div role="button"
          aria-haspopup="listbox"
          aria-expanded="false"
-         aria-owns="list-96"
+         aria-owns="list-93"
          class="v-input__slot"
     >
       <div class="v-select__slot">
@@ -74,7 +74,7 @@ exports[`VSelect.ts should be clearable with prop, dirty and single select 1`] =
           <div class="v-select__selection v-select__selection--comma">
             1
           </div>
-          <input id="input-96"
+          <input id="input-93"
                  readonly="readonly"
                  type="text"
                  aria-readonly="false"
diff --git a/packages/vuetify/src/components/VSelect/__tests__/__snapshots__/VSelect3.spec.ts.snap b/packages/vuetify/src/components/VSelect/__tests__/__snapshots__/VSelect3.spec.ts.snap
index 86a90a64854..b1874ad4cea 100644
--- a/packages/vuetify/src/components/VSelect/__tests__/__snapshots__/VSelect3.spec.ts.snap
+++ b/packages/vuetify/src/components/VSelect/__tests__/__snapshots__/VSelect3.spec.ts.snap
@@ -6,7 +6,7 @@ exports[`VSelect.ts should add color to selected index 1`] = `
     <div role="button"
          aria-haspopup="listbox"
          aria-expanded="false"
-         aria-owns="list-56"
+         aria-owns="list-50"
          class="v-input__slot"
     >
       <div class="v-select__slot">
@@ -14,7 +14,7 @@ exports[`VSelect.ts should add color to selected index 1`] = `
           <div class="v-select__selection v-select__selection--comma primary--text">
             foo
           </div>
-          <input id="input-56"
+          <input id="input-50"
                  readonly="readonly"
                  type="text"
                  aria-readonly="false"