Use another way fix #41

close ant-design/ant-design#5092
react-component · Feb 28, 2017 · a50ae98
1 parent da5bbc2
commit a50ae98
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 10 deletions.
diff --git a/assets/index.less b/assets/index.less
@@ -2,14 +2,12 @@
 
 .@{triggerPrefixCls} {
   position: absolute;
-  left: -9999px;
-  top: -9999px;
   z-index: 1050;
 
   &-hidden {
     display: none;
   }
-  
+
   .effect() {
     animation-duration: 0.3s;
     animation-fill-mode: both;
@@ -64,4 +62,4 @@
   }
 }
 
-@import "./index/Mask";
+@import "./index/Mask";
diff --git a/src/Popup.jsx b/src/Popup.jsx
@@ -76,6 +76,8 @@ const Popup = React.createClass({
       this.currentAlignClassName = null;
     }
     const newStyle = {
+      top: 0,
+      left: 0,
       ...style,
       ...this.getZIndexStyle(),
     };

diff --git a/src/Trigger.jsx b/src/Trigger.jsx
@@ -68,12 +68,6 @@ const Trigger = React.createClass({
       getContainer(instance) {
         const { props } = instance;
         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(findDOMNode(instance)) : props.getDocument().body;
         mountNode.appendChild(popupContainer);

diff --git a/tests/index.js b/tests/index.js
@@ -624,6 +624,51 @@ describe('rc-trigger', function main() {
   }
 
   describe('github issues', () => {
+    // https://github.com/react-component/trigger/issues/42
+    // just working on `npm run chrome-test` when scrollbar is on
+    it('popup node position should not be affected by scrollbar', () => {
+      document.documentElement.style.width = '100%';
+      document.documentElement.style.height = '100%';
+      document.body.style.width = '100%';
+      document.body.style.height = '100%';
+      document.body.style.margin = '0px';
+      document.body.style.padding = '0px';
+      div.style.position = '';
+      div.style.height = '100%';
+      div.style.margin = '0px';
+      div.style.padding = '0px';
+
+      const trigger = ReactDOM.render(
+        <Trigger
+          action={['click']}
+          popupAlign={placementAlignMap.top}
+          popup={<span>1</span>}
+          mouseEnterDelay={0}
+          mouseLeaveDelay={0}
+        >
+          <div style={{ position: 'absolute', right: 150, display: 'inline-block', top: 150 }}>trigger</div>
+        </Trigger>
+      , div);
+      const domNode = ReactDOM.findDOMNode(trigger);
+      Simulate.click(domNode);
+      const firstLeft = trigger.getPopupDomNode().style.left;
+      Simulate.click(domNode);
+      Simulate.click(domNode);
+      const secondLeft = trigger.getPopupDomNode().style.left;
+      expect(firstLeft).to.equal(secondLeft);
+
+      document.documentElement.style.width = '';
+      document.documentElement.style.height = '';
+      document.body.style.width = '';
+      document.body.style.height = '';
+      document.body.style.margin = '0';
+      document.body.style.padding = '0';
+      div.style.position = 'relative';
+      div.style.height = '100%';
+      div.style.margin = '0';
+      div.style.padding = '0';
+    });
+
     // https://github.com/ant-design/ant-design/issues/5047
     // https://github.com/react-component/trigger/pull/43
     it('render text without break lines', () => {
@@ -654,5 +699,22 @@ describe('rc-trigger', function main() {
       // height should be same, should not have break lines inside words
       expect(popupNodeHeightOfOneWord).to.equal(popupNodeHeightOfSeveralWords);
     });
+
+    // https://github.com/ant-design/ant-design/issues/5092
+    it('popup node height should be 100% as body', () => {
+      const trigger = ReactDOM.render(
+        <Trigger
+          popupVisible
+          popupAlign={placementAlignMap.top}
+          popup={<span>i am a pop up</span>}
+          popupStyle={{ height: '100%' }}
+        >
+          <div>trigger</div>
+        </Trigger>
+      , div);
+
+      // height should be same, should not have break lines inside words
+      expect(trigger.getPopupDomNode().offsetHeight).to.above(0);
+    });
   });
 });