From 4657e729ef4498584f9c0e5b768c251ec37a7e19 Mon Sep 17 00:00:00 2001
From: tjz <415800467@qq.com>
Date: Sat, 3 Feb 2018 19:48:03 +0800
Subject: [PATCH] fix

---
 components/menu/MenuItem.vue       | 24 ++++++++++++++----------
 components/trigger/Popup.vue       | 24 +++++++++++-------------
 components/trigger/demo/simple.vue | 20 ++++++++++----------
 components/trigger/index.vue       | 13 ++++++++++++-
 4 files changed, 47 insertions(+), 34 deletions(-)

diff --git a/components/menu/MenuItem.vue b/components/menu/MenuItem.vue
index 575367a77..d40fed1e9 100644
--- a/components/menu/MenuItem.vue
+++ b/components/menu/MenuItem.vue
@@ -32,16 +32,20 @@ export default {
       },
       on: {},
     }
-    return <Tooltip
-      {...toolTipProps}
-    >
-      <template slot='title'>
-        {inlineCollapsed && props.level === 1 ? cloneVNodes($slots.default, true) : ''}
-      </template>
-      <Item {...itemProps} ref='menuItem'>
-        {$slots.default}
-      </Item>
-    </Tooltip>
+    return (
+      inlineCollapsed && props.level === 1
+        ? <Tooltip {...toolTipProps}>
+          <template slot='title'>
+            { cloneVNodes($slots.default, true) }
+          </template>
+          <Item {...itemProps} ref='menuItem'>
+            {$slots.default}
+          </Item>
+        </Tooltip>
+        : <Item {...itemProps} ref='menuItem'>
+          {$slots.default}
+        </Item>
+    )
   },
 }
 
diff --git a/components/trigger/Popup.vue b/components/trigger/Popup.vue
index ee4207c75..131b074e3 100644
--- a/components/trigger/Popup.vue
+++ b/components/trigger/Popup.vue
@@ -31,24 +31,22 @@ export default {
   },
   mounted () {
     this.$nextTick(() => {
-      this._container = this.getContainer()
-      this._container.appendChild(this.$el)
       this.initAlign = true
     })
   },
   beforeDestroy () {
     this.$el.remove()
   },
-  beforeUpdate () {
-    this.$nextTick(() => {
-      const newContainer = this.getContainer()
-      if (newContainer !== this._container) {
-        this._container = newContainer
-        this._container.appendChild(this.$el)
-        this.$refs.alignInstance.forceAlign()
-      }
-    })
-  },
+  // beforeUpdate () {
+  //   this.$nextTick(() => {
+  //     const newContainer = this.getContainer()
+  //     if (newContainer !== this._container) {
+  //       this._container = newContainer
+  //       this._container.appendChild(this.$el)
+  //       this.$refs.alignInstance.forceAlign()
+  //     }
+  //   })
+  // },
   watch: {
     visible (val) {
       if (val) {
@@ -217,7 +215,7 @@ export default {
   render () {
     const { destroyPopup, getMaskElement, getPopupElement, initAlign } = this
     return (
-      <div style='position: absolute; top: 0px; left: 0px; width: 100%;'>
+      <div>
         {initAlign ? (
           getMaskElement(),
           destroyPopup
diff --git a/components/trigger/demo/simple.vue b/components/trigger/demo/simple.vue
index 10287e047..ab19cd728 100644
--- a/components/trigger/demo/simple.vue
+++ b/components/trigger/demo/simple.vue
@@ -58,7 +58,7 @@ export default {
       },
       offsetX: undefined,
       offsetY: undefined,
-      transitionName: '',
+      transitionName: 'rc-trigger-popup-zoom',
       destroyPopupOnHide: false,
     }
   },
@@ -159,7 +159,7 @@ export default {
         </label>
         &nbsp;&nbsp;&nbsp;&nbsp;
         <label>
-          a-checkbox
+          <a-checkbox
             value='rc-trigger-popup-zoom'
             onChange={this.onTransitionChange}
             checked={state.transitionName === 'rc-trigger-popup-zoom'}
@@ -172,7 +172,7 @@ export default {
         trigger:
 
         <label>
-          a-checkbox
+          <a-checkbox
             value='hover'
             checked={!!trigger.hover}
             onChange={this.onTriggerChange}
@@ -180,7 +180,7 @@ export default {
           hover
         </label>
         <label>
-          a-checkbox
+          <a-checkbox
             value='focus'
             checked={!!trigger.focus}
             onChange={this.onTriggerChange}
@@ -188,7 +188,7 @@ export default {
           focus
         </label>
         <label>
-          a-checkbox
+          <a-checkbox
             value='click'
             checked={!!trigger.click}
             onChange={this.onTriggerChange}
@@ -196,7 +196,7 @@ export default {
           click
         </label>
         <label>
-          a-checkbox
+          <a-checkbox
             value='contextMenu'
             checked={!!trigger.contextMenu}
             onChange={this.onTriggerChange}
@@ -205,7 +205,7 @@ export default {
         </label>
         &nbsp;&nbsp;&nbsp;&nbsp;
         <label>
-          a-checkbox
+          <a-checkbox
             checked={!!state.destroyPopupOnHide}
             onChange={this.handleDestroyPopupOnHide}
           />
@@ -214,7 +214,7 @@ export default {
 
         &nbsp;&nbsp;&nbsp;&nbsp;
         <label>
-          a-checkbox
+          <a-checkbox
             checked={!!state.mask}
             onChange={this.onMask}
           />
@@ -223,7 +223,7 @@ export default {
 
         &nbsp;&nbsp;&nbsp;&nbsp;
         <label>
-          a-checkbox
+          <a-checkbox
             checked={!!state.maskClosable}
             onChange={this.onMaskClosable}
           />
@@ -270,7 +270,7 @@ export default {
           <div slot='popup' style={{ border: '1px solid red', padding: '10px', background: 'white' }}>
               i am a popup
           </div>
-          <a href='#' style={{ margin: '20px' }} onClick={preventDefault}>trigger</a>
+          <a-button onClick={preventDefault}>trigger</a-button>
         </Trigger>
       </div>
     </div>)
diff --git a/components/trigger/index.vue b/components/trigger/index.vue
index 9ca1c93ce..655cbf31e 100644
--- a/components/trigger/index.vue
+++ b/components/trigger/index.vue
@@ -114,6 +114,7 @@ export default {
     if (this._component) {
       this._component.$destroy()
       this._component = null
+      this.popupContainer.remove()
     }
   },
   methods: {
@@ -329,6 +330,7 @@ export default {
       }
       if (!this._component) {
         const div = document.createElement('div')
+        this.getContainer().appendChild(div)
         this._component = new Vue({
           data () {
             return {
@@ -360,9 +362,18 @@ export default {
 
     getContainer () {
       const { $props: props } = this
+      const popupContainer = document.createElement('div')
+      // Make sure default popup container will never cause scrollbar appearing
+      // https://github.com/react-component/trigger/issues/41
+      popupContainer.style.position = 'absolute'
+      popupContainer.style.top = '0'
+      popupContainer.style.left = '0'
+      popupContainer.style.width = '100%'
       const mountNode = props.getPopupContainer
         ? props.getPopupContainer(this.$el) : props.getDocument().body
-      return mountNode
+      mountNode.appendChild(popupContainer)
+      this.popupContainer = popupContainer
+      return popupContainer
     },
 
     setPopupVisible (sPopupVisible) {