fix: tooltip content autoFocus fix complete (#685), close #675

* fix: tooltip content autoFocus fix complete

* fix: fix cypress

Co-authored-by: He Cheng <[email protected]>

.vscode/settings.json

@@ -11,14 +11,12 @@
         "editor.formatOnPaste": false
     },
     "[javascriptreact]": {
-        "editor.defaultFormatter": "carlsirce.vscode-eden-plugin",
         "editor.defaultFormatter": "dbaeumer.vscode-eslint"
     },
     "[less]": {
         "editor.defaultFormatter": "michelemelluso.code-beautifier"
     },
     "[typescriptreact]": {
-        "editor.defaultFormatter": "carlsirce.vscode-eden-plugin",
         "editor.defaultFormatter": "dbaeumer.vscode-eslint"
     },
     "typescript.updateImportsOnFileMove.enabled": "always",
@@ -46,4 +44,4 @@
         "backtop",
         "Splited"
     ]
-}
+}

cypress/integration/tooltip.spec.js

@@ -15,15 +15,72 @@ describe('tooltip', () => {
         const viewportHeight = 660;
         const triggerWidth = 200;
         const triggerHeight = 32;
-        const leftTopPosition = { offset: { top: 0, left: 0 }}; 
-        const rightBottomPosition = { offset: { top: -viewportHeight + triggerHeight, left: -viewportWidth + triggerWidth }};
+        const leftTopPosition = { offset: { top: 0, left: 0 } }; 
+        const rightBottomPosition = { offset: { top: -viewportHeight + triggerHeight, left: -viewportWidth + triggerWidth } };
         cy.visit('http://127.0.0.1:6006/iframe.html?id=tooltip--left-top-over-auto-adjust-overflow&args=&viewMode=story');
         cy.viewport(viewportWidth, viewportHeight);
         const dataSelector = `[data-cy=leftTopOver]`;
         cy.get(dataSelector).scrollIntoView(leftTopPosition);
-        cy.get(dataSelector).click({force: true});
+        cy.get(dataSelector).click({ force: true });
         cy.get('[x-placement="leftTopOver"]').should('have.length', 1);
         cy.get(dataSelector).scrollIntoView(rightBottomPosition);
         cy.get('[x-placement="rightBottomOver"]').should('have.length', 1);
     });
+});
+
+describe('tooltip', () => {
+    it('autoFocusHover', () => {
+        cy.visit('http://127.0.0.1:6006/iframe.html?id=tooltip--auto-focus-content-demo&args=&viewMode=story');
+        const dataSelector = `[data-cy=hover]`;
+        const input = `[data-cy=hoverInput]`;
+        cy.get(dataSelector).trigger('mouseover');
+        cy.get(input).should('be.focused');
+    });
+    it('autoFocusHoverNoMotion', () => {
+        cy.visit('http://127.0.0.1:6006/iframe.html?id=tooltip--auto-focus-content-demo&args=&viewMode=story');
+        const dataSelector = `[data-cy=hoverNoMotion]`;
+        const input = `[data-cy=hoverNoMotionInput]`;
+        cy.get(dataSelector).trigger('mouseover');
+        cy.get(input).should('be.focused');
+    });
+    it('autoFocusClick', () => {
+        cy.visit('http://127.0.0.1:6006/iframe.html?id=tooltip--auto-focus-content-demo&args=&viewMode=story');
+        const dataSelector = `[data-cy=click]`;
+        const input = `[data-cy=clickInput]`;
+        cy.get(dataSelector).click({ force: true });
+        cy.get(input).should('be.focused');
+    });
+    it('autoFocusClickNoMotion', () => {
+        cy.visit('http://127.0.0.1:6006/iframe.html?id=tooltip--auto-focus-content-demo&args=&viewMode=story');
+        const dataSelector = `[data-cy=clickNoMotion]`;
+        const input = `[data-cy=clickNoMotionInput]`;
+        cy.get(dataSelector).click({ force: true });
+        cy.get(input).should('be.focused');
+    });
+    it('autoFocusControlled', () => {
+        cy.visit('http://127.0.0.1:6006/iframe.html?id=tooltip--auto-focus-content-demo&args=&viewMode=story');
+        const trigger = `[data-cy=controlled]`;
+        const disableBtn = `[data-cy=controlledDisableBtn]`;
+        const input = `[data-cy=controlledInput]`;
+
+        // 校验受控功能
+        cy.get(disableBtn).click({ force: true });
+        cy.get(input).should('not.exist');
+
+        cy.get(trigger).click({ force: true });
+        cy.get(input).should('be.focused');
+    });
+    it('autoFocusControlledNoMotion', () => {
+        cy.visit('http://127.0.0.1:6006/iframe.html?id=tooltip--auto-focus-content-demo&args=&viewMode=story');
+        const trigger = `[data-cy=controlledNoMotion]`;
+        const disableBtn = `[data-cy=controlledNoMotionDisableBtn]`;
+        const input = `[data-cy=controlledNoMotionInput]`;
+
+        // 校验受控功能
+        cy.get(disableBtn).click({ force: true });
+        cy.get(input).should('not.exist');
+
+        cy.get(trigger).click({ force: true });
+        cy.get(input).should('be.focused');
+    });
 });

packages/semi-ui/tooltip/index.tsx

@@ -513,7 +513,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
                             <div
                                 className={classNames(className, animateCls)}
                                 style={{
-                                    // visibility: 'visible',
+                                    visibility: 'visible',
                                     ...animateStyle,
                                     transformOrigin,
                                     ...style,
@@ -532,7 +532,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
                 }
             </TooltipTransition>
         ) : (
-            <div className={className} {...portalEventSet} x-placement={placement} style={style}>
+            <div className={className} {...portalEventSet} x-placement={placement} style={{ visibility: motion ? undefined : 'visible', ...style }}>
                 {content}
                 {icon}
             </div>