fix: QPopover hide condition in reposition (quasarframework#2045)

Author: rstoenescu

dev/components/components/popover-test.vue

@@ -0,0 +1,49 @@
+<template>
+<div class="row" style="padding: 1500px 0">
+  <div class="col" style="height:2000px; width:100px; background-color:red;">
+    <q-context-menu>
+      <q-list link separator style="min-width: 150px; max-height: 300px;">
+        <q-item v-close-overlay>
+          <q-item-main label="Test" />
+        </q-item>
+      </q-list>
+    </q-context-menu>
+  </div>
+
+  <div class="col" style="margin-top: 500px; height:2000px; width:100px; background-color:red;">
+    <q-context-menu>
+      <q-list link separator style="min-width: 150px; max-height: 300px;">
+        <q-item v-close-overlay>
+          <q-item-main label="Test" />
+        </q-item>
+      </q-list>
+    </q-context-menu>
+  </div>
+
+  <div class="col" style="margin-bottom: 500px; height:2000px; width:100px; background-color:red;">
+    <q-context-menu>
+      <q-list link separator style="min-width: 150px; max-height: 300px;">
+        <q-item v-close-overlay>
+          <q-item-main label="Test" />
+        </q-item>
+      </q-list>
+    </q-context-menu>
+  </div>
+</div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+    }
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="stylus">
+@import '~variables'
+
+</style>

dev/components/web-tests/fast-test.vue

@@ -1,14 +1,35 @@
 <template>
-  <div class="layout-padding">
-    <!--
-      This is for fast tests.
-      Use this page but don't add it into your commits (leave it outside
-      of your commit).
+<div class="row" style="padding: 1500px 0">
+  <div class="col" style="height:2000px; width:100px; background-color:red;">
+    <q-context-menu>
+      <q-list link separator style="min-width: 150px; max-height: 300px;">
+        <q-item v-close-overlay>
+          <q-item-main label="Test" />
+        </q-item>
+      </q-list>
+    </q-context-menu>
+  </div>
+
+  <div class="col" style="margin-top: 500px; height:2000px; width:100px; background-color:red;">
+    <q-context-menu>
+      <q-list link separator style="min-width: 150px; max-height: 300px;">
+        <q-item v-close-overlay>
+          <q-item-main label="Test" />
+        </q-item>
+      </q-list>
+    </q-context-menu>
+  </div>
 
-      For some test that you think it should be persistent,
-      make a new *.vue file here or in another folder under /dev/components.
-    -->
+  <div class="col" style="margin-bottom: 500px; height:2000px; width:100px; background-color:red;">
+    <q-context-menu>
+      <q-list link separator style="min-width: 150px; max-height: 300px;">
+        <q-item v-close-overlay>
+          <q-item-main label="Test" />
+        </q-item>
+      </q-list>
+    </q-context-menu>
   </div>
+</div>
 </template>
 
 <script>

src/components/popover/QPopover.js

@@ -129,11 +129,9 @@ export default {
       if (this.fit) {
         this.$el.style.minWidth = width(this.anchorEl) + 'px'
       }
-      const
-        { top, bottom } = this.anchorEl.getBoundingClientRect(),
-        { height } = window.innerHeight
+      const { top, bottom } = this.anchorEl.getBoundingClientRect()
 
-      if (bottom < 0 || top > height) {
+      if (bottom < 0 || top > window.innerHeight) {
         return this.hide()
       }