Merge pull request #1166 from Adslot/fix-text-ellipsis

fix: fix text ellipsis showing popover all the time
Adslot · Jun 17, 2021 · 5b492c8 · 5b492c8
2 parents 688e6c1 + 78fe942
commit 5b492c8
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 7 deletions.
diff --git a/src/components/TextEllipsis/index.jsx b/src/components/TextEllipsis/index.jsx
@@ -30,6 +30,10 @@ class TextEllipsisComponent extends React.PureComponent {
     truncated: false,
   };
 
+  componentDidMount() {
+    this.setTruncate();
+  }
+
   componentDidUpdate() {
     this.setTruncate();
   }
@@ -50,7 +54,7 @@ class TextEllipsisComponent extends React.PureComponent {
     return (
       <Popover
         {...popoverProps}
-        isOpen={truncated}
+        {...(truncated === false ? { triggers: 'disabled' } : {})}
         popoverContent={this.props.children}
         className="aui--text-ellipsis-wrapper"
       >

diff --git a/www/examples/TextEllipsis.mdx b/www/examples/TextEllipsis.mdx
@@ -4,12 +4,21 @@ import DesignNotes from '../containers/DesignNotes.jsx';
 ## Text Ellipsis
 
 ```jsx live=true
-<div style={{ width: 300 }}>
-  <TextEllipsis>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-  </TextEllipsis>
+<div>
+  <div style={{ width: 500 }}>
+    <TextEllipsis>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </TextEllipsis>
+  </div>
+
+  <br />
+  <br />
+
+  <div style={{ width: 500 }}>
+    <TextEllipsis>no popover for short text</TextEllipsis>
+  </div>
 </div>
 ```