fix(Tooltip): can not hide tooltip when v-show if false in Vue, close #…

…363
ksc-fe · Oct 25, 2019 · 072bcdf · 072bcdf
1 parent 2bf7772
commit 072bcdf
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 5 deletions.
diff --git a/components/dropdown/dropdown.js b/components/dropdown/dropdown.js
@@ -13,12 +13,18 @@ export default class Dropdown extends Intact {
         const vNode = data.get('children');
         const isShow = data.get('_isShow');
         const className = vNode.className || vNode.props.className;
-        const classNames = _className({
-            [className]: className,
-            'k-dropdown-open': isShow, 
-        });
+        const extraProps = {
+            className: _className({
+                [className]: className,
+                'k-dropdown-open': isShow, 
+            }),
+        };
+        const style = data.get('style');
+        if (style) {
+            extraProps.style = style;
+        }
 
-        return clone(vNode, {className: classNames});
+        return clone(vNode, extraProps);
     }
 
     static propTypes = {

diff --git a/components/tooltip/index.spec.js b/components/tooltip/index.spec.js
@@ -4,6 +4,8 @@ import TriggerDemo from '~/components/tooltip/demos/trigger';
 import ContentDemo from '~/components/tooltip/demos/content';
 import ConfirmDemo from '~/components/tooltip/demos/confirm';
 import AlwaysDemo from '~/components/tooltip/demos/always';
+import Vue from 'vue';
+import Tooltip from 'kpc/components/tooltip';
 import {mount, unmount, dispatchEvent, getElement, wait} from 'test/utils';
 
 describe('Tooltip', () => {
@@ -147,4 +149,43 @@ describe('Tooltip', () => {
         instance.element.querySelector('.k-tooltip').click();
         expect(getElement('.k-tooltip-content')).eql(content);
     });
+
+    it('should hide tooltip when v-show is false in Vue', async () => {
+        const Test = {
+            template: `
+                <div>
+                    <Tooltip content="hello" v-show="show">
+                        <div style="font-size: 12px;">hover</div>
+                    </Tooltip>
+                </div>
+            `,
+            components: {
+                Tooltip
+            },
+            data() {
+                return {show: false};
+            }
+        };
+
+        const container = document.createElement('div');
+        document.body.appendChild(container);
+
+        const app = new Vue({
+            render: h => h('Test', {ref: 'test'}),
+            components: {Test},
+        }).$mount(container);
+
+        expect(app.$el.innerHTML).to.matchSnapshot();
+
+        app.$refs.test.show = true;
+        await wait();
+        expect(app.$el.innerHTML).to.matchSnapshot();
+
+
+        app.$refs.test.show = false;
+        await wait();
+        expect(app.$el.innerHTML).to.matchSnapshot();
+
+        document.body.removeChild(app.$el);
+    });
 });