Merge pull request #43 from react-component/fix-text-auto-layout

fix text auto layout bug

src/Trigger.jsx

@@ -65,8 +65,9 @@ const Trigger = React.createClass({
         // 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 = '-9999px';
-        popupContainer.style.left = '-9999px';
+        popupContainer.style.top = '0';
+        popupContainer.style.left = '0';
+        popupContainer.style.width = '100%';
         const mountNode = instance.props.getPopupContainer ?
           instance.props.getPopupContainer(findDOMNode(instance)) : document.body;
         mountNode.appendChild(popupContainer);

tests/index.js

@@ -622,4 +622,37 @@ describe('rc-trigger', function main() {
       });
     });
   }
+
+  describe('github issues', () => {
+    // https://github.com/ant-design/ant-design/issues/5047
+    // https://github.com/react-component/trigger/pull/43
+    it('render text without break lines', () => {
+      const trigger = ReactDOM.render(
+        <Trigger
+          popupVisible
+          popupAlign={placementAlignMap.top}
+          popup={<span>i am a pop up</span>}
+          popupClassName="no-fix-width"
+        >
+          <div>trigger</div>
+        </Trigger>
+      , div);
+      const popupNodeHeightOfSeveralWords = trigger.getPopupDomNode().offsetHeight;
+
+      const trigger2 = ReactDOM.render(
+        <Trigger
+          popupVisible
+          popupAlign={placementAlignMap.top}
+          popup={<span>iamapopup</span>}
+          popupClassName="no-fix-width"
+        >
+          <div>trigger</div>
+        </Trigger>
+      , div);
+      const popupNodeHeightOfOneWord = trigger2.getPopupDomNode().offsetHeight;
+
+      // height should be same, should not have break lines inside words
+      expect(popupNodeHeightOfOneWord).to.equal(popupNodeHeightOfSeveralWords);
+    });
+  });
 });

tests/test.less

@@ -2,6 +2,10 @@
   width: 100px;
 }
 
+.no-fix-width.rc-trigger-popup {
+  width: auto;
+}
+
 .target {
   width: 100px;
   height: 100px;