From 266b593938718789e4ab299d3e495194d2b273f2 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 7 Dec 2020 18:13:13 +0300
Subject: [PATCH] Basic collision detection

---
 .../cascadeselect/CascadeSelect.vue           |  2 +-
 .../cascadeselect/CascadeSelectSub.vue        | 19 ++++++++++++++++++-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/components/cascadeselect/CascadeSelect.vue b/src/components/cascadeselect/CascadeSelect.vue
index 01c262bb1..95993d2c0 100644
--- a/src/components/cascadeselect/CascadeSelect.vue
+++ b/src/components/cascadeselect/CascadeSelect.vue
@@ -18,7 +18,7 @@
                     <CascadeSelectSub :options="options" :selectionPath="selectionPath" class="p-cascadeselect-items" 
                         :optionLabel="optionLabel" :optionValue="optionValue" :level="0" :templates="$slots"
                         :optionGroupLabel="optionGroupLabel" :optionGroupChildren="optionGroupChildren" 
-                        @option-select="onOptionSelect" @optiongroup-select="onOptionGroupSelect" :dirty="dirty" />
+                        @option-select="onOptionSelect" @optiongroup-select="onOptionGroupSelect" :dirty="dirty" :root="true" />
                 </div>
             </div>
         </transition>
diff --git a/src/components/cascadeselect/CascadeSelectSub.vue b/src/components/cascadeselect/CascadeSelectSub.vue
index c6dc9e4ff..637bc1ec1 100644
--- a/src/components/cascadeselect/CascadeSelectSub.vue
+++ b/src/components/cascadeselect/CascadeSelectSub.vue
@@ -19,6 +19,7 @@
 
 <script>
 import ObjectUtils from '../utils/ObjectUtils';
+import DomHandler from '../utils/DomHandler';
 import Ripple from '../ripple/Ripple';
 
 export default {
@@ -34,7 +35,8 @@ export default {
         optionGroupChildren: Array,
         parentActive: Boolean,
         dirty: Boolean,
-        templates: null
+        templates: null,
+        root: Boolean
     },
     data() {
         return {
@@ -50,6 +52,10 @@ export default {
                 }
             }
         }
+
+        if (!this.root) {
+            this.position();
+        }
     },
     watch: {
         parentActive(newValue) {
@@ -156,6 +162,17 @@ export default {
             }
 
             event.preventDefault();
+        },
+        position() {
+            const parentItem = this.$el.parentElement;
+            const containerOffset = DomHandler.getOffset(parentItem);
+            const viewport = DomHandler.getViewport();
+            const sublistWidth = this.$el.offsetParent ? this.$el.offsetWidth : DomHandler.getHiddenElementOuterWidth(this.$el);
+            const itemOuterWidth = DomHandler.getOuterWidth(parentItem.children[0]);
+
+            if ((parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth) > (viewport.width - DomHandler.calculateScrollbarWidth())) {
+                this.$el.style.left = '-100%';
+            }
         }
     },
     directives: {