fix(VDialog): allow nested elements to overflow scroll (#13548)

Co-authored-by: Jonathan Bowman <[email protected]>

Author: jonathanrbowman

Diff for: packages/vuetify/src/mixins/overlayable/index.ts

@@ -156,9 +156,21 @@ export default Vue.extend<Vue & Toggleable & Stackable & options>().extend({
       const style = window.getComputedStyle(el)
       return ['auto', 'scroll'].includes(style.overflowY!) && el.scrollHeight > el.clientHeight
     },
-    shouldScroll (el: Element, delta: number) {
-      if (el.scrollTop === 0 && delta < 0) return true
-      return el.scrollTop + el.clientHeight === el.scrollHeight && delta > 0
+    shouldScroll (el: Element, delta: number): boolean {
+      if (el.hasAttribute('data-app')) return false
+
+      const alreadyAtTop = el.scrollTop === 0
+      const alreadyAtBottom = el.scrollTop + el.clientHeight === el.scrollHeight
+      const scrollingUp = delta < 0
+      const scrollingDown = delta > 0
+
+      if (!alreadyAtTop && scrollingUp) return true
+      if (!alreadyAtBottom && scrollingDown) return true
+      if ((alreadyAtTop || alreadyAtBottom)) {
+        return this.shouldScroll(el.parentNode as Element, delta)
+      }
+
+      return false
     },
     isInside (el: Element, parent: Element): boolean {
       if (el === parent) {
@@ -178,7 +190,7 @@ export default Vue.extend<Vue & Toggleable & Stackable & options>().extend({
         // getSelection returns null in firefox in some edge cases, can be ignored
         const selected = window.getSelection()!.anchorNode as Element
         if (dialog && this.hasScrollbar(dialog) && this.isInside(selected, dialog)) {
-          return this.shouldScroll(dialog, delta)
+          return !this.shouldScroll(dialog, delta)
         }
         return true
       }
@@ -190,7 +202,7 @@ export default Vue.extend<Vue & Toggleable & Stackable & options>().extend({
         if (el === document.documentElement) return true
         if (el === this.$refs.content) return true
 
-        if (this.hasScrollbar(el as Element)) return this.shouldScroll(el as Element, delta)
+        if (this.hasScrollbar(el as Element)) return !this.shouldScroll(el as Element, delta)
       }
 
       return true