浏览代码

fix: [Typo] Fix Typography under the js truncation strategy. When it is judged not to truncate, an unexpected tooltip will appear when the mouse moves into the content (#1788)

YyumeiZhang 2 年之前
父节点
当前提交
2968a470a7

+ 8 - 0
cypress/e2e/typography.spec.js

@@ -79,4 +79,12 @@ describe('typography', () => {
         cy.get('.semi-typography-ellipsis').eq(1).children('.semi-typography-ellipsis-expand').should('not.exist');
     });
 
+    it('js ellipsis, no truncate, no tooltip', () => {
+        cy.visit('http://127.0.0.1:6006/iframe.html?id=typography--js-ellipsis-no-tooltip&args=&viewMode=story');
+        cy.viewport(800, 1000);
+        cy.get('.semi-typography').trigger('mouseover');
+        cy.wait(1000);
+        cy.get('.semi-tooltip-content').should('not.exist');;
+    });
+
 });

+ 11 - 0
packages/semi-ui/typography/_story/typography.stories.jsx

@@ -809,3 +809,14 @@ export const TextNoWarning = () => {
     </div>
   )
 }
+
+export const JsEllipsisNoTooltip = () => (
+  <Title 
+    heading={5} 
+    ellipsis={{ showTooltip: true, suffix: ' ' }} 
+    // wordBreak 设置在 Title 的style里
+    style={{ width: 250, wordBreak: 'break-all' }}
+  >
+      data_tns
+  </Title>
+)

+ 1 - 0
packages/semi-ui/typography/base.tsx

@@ -327,6 +327,7 @@ export default class Base extends Component<BaseTypographyProps, BaseTypographyS
             pos
         );
         this.setState({
+            isOverflowed: false,
             ellipsisContent: content,
             isTruncated: children !== content,
         });