refactor(placable): use a measure element for better

positioning robustness

packages/base/SelectMenu/src/SelectMenu.vue

@@ -6,7 +6,6 @@
       'n-base-select-menu--multiple': multiple,
       [`n-${theme}-theme`]: theme
     }"
-
     :style="{
       width: width && (width + 'px')
     }"

packages/common/AutoComplete/src/main.vue

@@ -11,20 +11,20 @@
     </slot>
     <div
       ref="contentContainer"
-      v-clickoutside="handleClickOutsideMenu"
+      class="n-positioning-container"
-      class="n-detached-content-container n-select-detached-content-container"
       :class="{
         [namespace]: namespace
       }"
     >
       <div
         ref="content"
-        class="n-detached-content-content"
+        class="n-positioning-content"
       >
         <transition name="n-select-menu--transition">
           <n-base-select-menu
             v-if="active"
             ref="contentInner"
+            v-clickoutside="handleClickOutsideMenu"
             auto-pending-first-option
             class="n-select-menu"
             :theme="synthesizedTheme"

packages/common/Cascader/src/CascaderMenu.vue

@@ -1,8 +1,8 @@
 <template>
   <div
-    class="n-detached-content-container"
+    class="n-positioning-container"
   >
-    <div ref="content" class="n-detached-content">
+    <div ref="content" class="n-positioning-content">
       <transition name="n-cascader-menu--transition">
         <div
           v-if="active"

packages/common/Cascader/src/CascaderSelectMenu.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="n-detached-content-container">
+  <div class="n-positioning-container">
-    <div ref="content" class="n-detached-content">
+    <div ref="content" class="n-positioning-content">
       <transition name="n-cascader-menu--transition">
         <n-base-select-menu
           v-if="active"
@@ -15,6 +15,7 @@
           :is-option-selected="isSelected"
           @mousedown.native.prevent="() => {}"
           @menu-toggle-option="handleSelectMenuToggleOption"
+          @menu-visible="handleMenuVisible"
         />
       </transition>
     </div>
@@ -188,6 +189,9 @@ export default {
         const pendingOptionData = this.$refs.contentInner.getPendingOptionData()
         this.handleSelectOptionCheck(pendingOptionData)
       }
+    },
+    handleMenuVisible () {
+      this.updatePosition()
     }
   }
 }

packages/common/DatePicker/src/DatePicker.vue

@@ -54,19 +54,19 @@
     </n-input>
     <div
       ref="contentContainer"
-      class="n-detached-content-container n-date-picker-detached-content-container"
+      class="n-positioning-container"
       :class="{
         [namespace]: namespace
       }"
     >
       <div
         ref="content"
-        v-clickoutside="handleClickOutside"
+        class="n-positioning-content"
-        class="n-dateched-content"
       >
         <datetime-panel
           v-if="type === 'datetime'"
           ref="panel"
+          v-clickoutside="handleClickOutside"
           :value="value"
           :active="active"
           :actions="actions"
@@ -80,6 +80,7 @@
         <date-panel
           v-else-if="type === 'date'"
           ref="panel"
+          v-clickoutside="handleClickOutside"
           :value="value"
           :active="active"
           :actions="actions"
@@ -92,6 +93,7 @@
         <daterange-panel
           v-else-if="type === 'daterange'"
           ref="panel"
+          v-clickoutside="handleClickOutside"
           :value="value"
           :active="active"
           :actions="actions"
@@ -105,6 +107,7 @@
         <datetimerange-panel
           v-else-if="type === 'datetimerange'"
           ref="panel"
+          v-clickoutside="handleClickOutside"
           :value="value"
           :active="active"
           :actions="actions"

packages/common/Drawer/src/main.vue

@@ -1,6 +1,6 @@
 <template>
   <n-base-portal ref="portal">
-    <div class="n-detached-content-container">
+    <div class="n-detached-content-container" style="z-index: 1000;">
       <div
         class="n-drawer-container"
         :class="{

packages/common/Dropdown/src/DropdownMenu.vue

@@ -97,17 +97,17 @@ export default {
       }
     }
   },
-  created () {
+  // created () {
-    console.log('dropdown menu created')
+  //   console.log('dropdown menu created')
-  },
+  // },
-  beforeDestroy () {
+  // beforeDestroy () {
-    console.log('dropdown menu beforeDestroy')
+  //   console.log('dropdown menu beforeDestroy')
-  },
+  // },
-  destroyed () {
+  // destroyed () {
-    console.log('dropdown menu destroyed')
+  //   console.log('dropdown menu destroyed')
-  },
+  // },
   mounted () {
-    console.log('dropdown menu mounted')
+    // console.log('dropdown menu mounted')
     if (this.defaultFocus && this.focusable) {
       this.$el.focus()
     }
@@ -220,6 +220,9 @@ export default {
           isOptionSelected: () => false,
           theme: this.synthesizedTheme
         },
+        style: {
+          overflow: 'visible'
+        },
         on: {
           'menu-toggle-option': option => {
             this.handleSelectOption(option.value)

packages/common/Popover/src/PopoverContent.js

@@ -227,7 +227,7 @@ export default {
   },
   render (h) {
     return h('div', {
-      staticClass: 'n-detached-content-container',
+      staticClass: 'n-positioning-container',
       class: {
         [this.containerClass]: true,
         [this.namespace]: this.namespace
@@ -235,7 +235,7 @@ export default {
       ref: 'contentContainer'
     }, [
       h('div', {
-        staticClass: 'n-detached-content',
+        staticClass: 'n-positioning-content',
         ref: 'content'
       }, [
         h('transition', {

packages/common/Select/src/Select.vue

@@ -41,15 +41,14 @@
     />
     <div
       ref="contentContainer"
-      v-clickoutside="handleClickOutsideMenu"
+      class="n-positioning-container"
-      class="n-detached-content-container n-select-detached-content-container"
       :class="{
         [namespace]: namespace
       }"
     >
       <div
         ref="content"
-        class="n-detached-content-content"
+        class="n-positioning-content"
       >
         <transition
           name="n-select-menu--transition"
@@ -58,6 +57,7 @@
           <n-base-select-menu
             v-if="active"
             ref="contentInner"
+            v-clickoutside="handleClickOutsideMenu"
             class="n-select-menu"
             auto-pending-first-option
             :theme="synthesizedTheme"

packages/common/Slider/src/main.vue

@@ -68,14 +68,14 @@
     </div>
     <div
       ref="contentContainer"
-      class="n-detached-content-container n-slider-detached-content-container"
+      class="n-positioning-container"
       :class="{
         [namespace]: namespace
       }"
     >
       <div
         ref="content"
-        class="n-detached-content"
+        class="n-positioning-content"
       >
         <transition name="n-fade-in-scale-up--transition">
           <div

packages/common/TimePicker/src/main.vue

@@ -21,9 +21,9 @@
     />
     <div
       ref="contentContainer"
-      class="n-detached-content-container n-time-picker-detached-content-container"
+      class="n-positioning-container"
       :class="{
-        'n-detached-content-container--absolute-positioned': positionModeisAbsolute,
+        'n-positioning-container--absolute': positionModeisAbsolute,
         [namespace]: namespace
       }"
     >

packages/mixins/placeable.js

@@ -4,12 +4,33 @@ import getParentNode from '../utils/dom/getParentNode'
 import getScrollParent from '../utils/dom/getScrollParent'
 import { getAdjustedPlacementOfTrackingElement, getTransformOriginByPlacement, getPosition } from '../utils/dom/calcPlacementTransform'
 
+let viewMeasurerInitialized = false
+let viewMeasurer = null
+
+if (!viewMeasurerInitialized && !document.getElementById('n-view-measurer')) {
+  viewMeasurer = document.createElement('div')
+  viewMeasurer.id = 'n-view-measurer'
+  viewMeasurer.style = `
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    pointer-events: none;
+    visibility: hidden;
+  `
+  viewMeasurerInitialized = true
+  document.body.appendChild(viewMeasurer)
+}
+
 function getActivatorEl (componentInstance) {
-  return componentInstance.$refs.activator.$el || componentInstance.$refs.activator
+  const refs = componentInstance.$refs
+  return refs.activator.$el || refs.activator
 }
 
 function getContentEl (componentInstance) {
-  return componentInstance.$refs.content.$el || componentInstance.$refs.content
+  const refs = componentInstance.$refs
+  return refs.content.$el || refs.content
 }
 
 function getContentInner (instance) {
@@ -17,25 +38,37 @@ function getContentInner (instance) {
   return (contentInnerRef && contentInnerRef.$el) || contentInnerRef || null
 }
 
-function getActivatorRect (manuallyPositioned, x, y, trackedElement) {
+function getViewBoundingRect () {
+  const containerBoundingRect = viewMeasurer.getBoundingClientRect()
+  return {
+    left: containerBoundingRect.left,
+    top: containerBoundingRect.top,
+    right: containerBoundingRect.right,
+    bottom: containerBoundingRect.bottom,
+    width: containerBoundingRect.width,
+    height: containerBoundingRect.height
+  }
+}
+
+function getActivatorRect (manuallyPositioned, x, y, trackedElement, viewBoundingRect) {
   if (manuallyPositioned) {
     return {
       top: y,
       left: x,
       height: 0,
       width: 0,
-      right: window.innerWidth - x,
+      right: viewBoundingRect.width - x,
-      bottom: window.innerHeight - y
+      bottom: viewBoundingRect.height - y
     }
   } else {
     const activatorRect = trackedElement.getBoundingClientRect()
     return {
-      left: parseInt(activatorRect.left),
+      left: activatorRect.left - viewBoundingRect.left,
-      top: parseInt(activatorRect.top),
+      top: activatorRect.top - viewBoundingRect.top,
-      bottom: parseInt(window.innerHeight - activatorRect.bottom),
+      bottom: viewBoundingRect.height + viewBoundingRect.top - activatorRect.bottom,
-      right: parseInt(window.innerWidth - activatorRect.right),
+      right: viewBoundingRect.width + viewBoundingRect.left - activatorRect.right,
-      width: parseInt(activatorRect.width),
+      width: activatorRect.width,
-      height: parseInt(activatorRect.height)
+      height: activatorRect.height
     }
   }
 }
@@ -177,14 +210,16 @@ export default {
   },
   methods: {
     _getTrackingElement () {
-      if (this.$refs && this.$refs.content) {
+      const refs = this.$refs
+      if (refs && refs.content) {
         this.trackingElement = getContentEl(this)
       } else if (this.getTrackingElement) {
         this.trackingElement = this.getTrackingElement()
       }
     },
     _getTrackedElement () {
-      if (this.$refs && this.$refs.activator) {
+      const refs = this.$refs
+      if (refs && refs.activator) {
         this.trackedElement = getActivatorEl(this)
       } else if (this.getTrackedElement) {
         this.trackedElement = this.getTrackedElement()
@@ -221,7 +256,8 @@ export default {
         }
       }
       // debugger
-      const activatorRect = getActivatorRect(this.manuallyPositioned, this.x, this.y, this.trackedElement)
+      const viewBoundingRect = getViewBoundingRect()
+      const activatorRect = getActivatorRect(this.manuallyPositioned, this.x, this.y, this.trackedElement, viewBoundingRect)
       const contentInner = getContentInner(this)
       if (this.widthMode === 'activator' && contentInner) {
         contentInner.style.minWidth = activatorRect.width + 'px'

playground/pg2.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      .fixed-el {
+        position: fixed;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        background-color: red;
+      }
+      .test-el {
+        position: absolute;
+        left: 400px;
+        top: 200px;
+        height: 100px;
+        width: 100px;
+        background-color: yellowgreen;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="fixed-el">123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890-12345678901234567890123456789012345678901234567890
+      <div class="test-el"></div>
+    </div>
+  </body>
+</html>

styles/BaseSelectMenu.scss

@@ -44,6 +44,7 @@
       border-radius: 6px;
       transition: background-color .3s $--n-ease-in-out-cubic-bezier;
       font-size: $--n-secondary-text-color;
+      overflow: hidden;
       @include b(base-select-menu-option-wrapper) {
         position: relative;
         width: 100%;

styles/Select.scss

@@ -42,9 +42,6 @@
         font-size: 15px;
       }
     }
-    @include b(select-detached-content-container) {
-      transform: translateZ(0);
-    }
     @include b(select-menu) {
       @include fade-in-scale-up-transition(select-menu, $original-transition: (background-color .3s $--n-ease-in-out-cubic-bezier));
     }

styles/base.scss

@@ -35,24 +35,20 @@ input {
   font-size: inherit;
 }
 
-.n-detached-content-container {
+.n-positioning-container {
   position: fixed;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
-  width: 0;
+  pointer-events: none;
-  overflow: visible;
+  transform: translateZ(0);
 }
 
-.n-detached-content-container.n-detached-content-container--absolute-positioned {
+.n-positioning-container.n-positioning-container--absolute {
   position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  width: 0;
-  overflow: visible;
 }
 
-.n-detached-content {
+.n-positioning-content {
-  position: fixed;
+  pointer-events: all;
 }

styles/mixins/mixins.scss

@@ -125,17 +125,4 @@ $theme-names: "dark", "light";
   @if not $common-css-attrs-generated {
     @content;
   }
-}
-
-@mixin detachedContentWrapper {
-  position: fixed;
-  left: 0;
-  top: 0;
-  width: 0;
-  height: 0;
-  overflow: visible;
-}
-
-@mixin detachedContent {
-  position: fixed;
 }