@king-design/intact 3.0.0-beta.0 → 3.0.0-beta.2

package/components/dialog/alert.vdt

@@ -19,12 +19,16 @@ const classNameObj = {
     <b:header />
     <b:body>
         <div class="k-dialog-tip-icon">
-            <Icon class={iconClassName || {
-                "ion-ios-checkmark": type === 'success',
-                "ion-ios-information": type === 'warning',
-                "ion-ios-close": type === 'error',
-                "ion-ios-help": type === 'confirm',
-            }} v-if={!hideIcon && !icon} />
+            <Icon 
+                v-if={!hideIcon && !icon}
+                class={iconClassName || {
+                    "k-icon-success-fill": type === 'success',
+                    "k-icon-warning-fill": type === 'warning',
+                    "k-icon-error-fill": type === 'error',
+                    "k-icon-question-fill": type === 'confirm',
+                }}
+                color={type === 'error' ? 'danger' : type === 'confirm' ? 'primary' : type}
+            />
             {icon}
         </div>
         <div class="k-alert-dialog-wrapper">

package/components/dialog/index.spec.ts

@@ -87,7 +87,7 @@ describe('Dialog', () => {
         }
 
         const [instance] = mount(Demo);
-        expect(getElement('.k-dialog-footer')!.innerText).to.eql('dialog footer 确定取消');
+        expect(getElement('.k-dialog-footer')!.innerText).to.eql('dialog footer 取消确定');
     });
 
     it('basic test', async () => {
@@ -114,7 +114,7 @@ describe('Dialog', () => {
         dispatchEvent(document, 'keydown', {keyCode: 27});
         expect(instance.get('show')).be.false;
         await wait(500);
-        expect(document.body.getAttribute('style')).to.be.null;
+        expect(!!document.body.getAttribute('style')).to.be.false;
     });
 
     it('methods test', async () => {
@@ -156,7 +156,7 @@ describe('Dialog', () => {
             unmount();
         }
         await wait(500);
-        expect(document.body.getAttribute('style')).to.be.null;
+        expect(!!document.body.getAttribute('style')).to.be.false;
     });
 
     it('async close', async () => {
@@ -193,7 +193,7 @@ describe('Dialog', () => {
         Dialog.success({content: 'test'}).then(cb);
         await wait();
         let dialog = expectDialog();
-        dialog.querySelector<HTMLElement>('.k-btn')!.click();
+        dialog.querySelector<HTMLElement>('.k-dialog-ok')!.click();
         await wait();
         expect(cb.callCount).to.eql(1);
 
@@ -209,7 +209,7 @@ describe('Dialog', () => {
         Dialog.error({title: 'error', content: 'test'});
         await wait();
         dialog = expectDialog();
-        dialog.querySelector<HTMLElement>('.k-btn')!.click();
+        dialog.querySelector<HTMLElement>('.k-dialog-ok')!.click();
 
         const cb2 = sinon.spy();
         Dialog.confirm({content: 'test', closable: false}).then(() => {}, cb2);
@@ -218,7 +218,7 @@ describe('Dialog', () => {
         overlay.click();
         await wait();
         expect(cb2.callCount).to.eql(0);
-        getElement('.k-dialog')!.querySelector<HTMLElement>('.k-btn')!.click();
+        getElement('.k-dialog')!.querySelector<HTMLElement>('.k-dialog-ok')!.click();
     });
 
     it('should double check for closing dialog', async () => {

package/components/dialog/styles.ts

@@ -23,7 +23,7 @@ const defaults = {
         border: `1px solid #e2e5e8`,
         closeTop: '9px',
         closeRight: '-9px',
-        closeIconFontSize: '16px',
+        closeIconFontSize: '22px',
     },
 
     // body

package/components/dropdown/demos/basic.md

@@ -16,7 +16,7 @@ import {Dropdown, DropdownMenu, DropdownItem, Button, Icon} from 'kpc';
 <div>
     <Dropdown>
         <Button type="primary">
-            hover <Icon class="ion-ios-arrow-down" />
+            hover <Icon class="k-icon-down" />
         </Button>
         <DropdownMenu>
             <DropdownItem>item 1</DropdownItem>

package/components/dropdown/demos/checkbox.md

@@ -10,7 +10,7 @@ import {Dropdown, DropdownMenu, DropdownItem, Checkbox, Button, Icon} from 'kpc'
 
 <div>
     <Dropdown>
-        <Button>More<Icon class="ion-ios-arrow-right" /></Button>
+        <Button>More<Icon class="k-icon-right" /></Button>
         <DropdownMenu class="checkbox-menu">
             <DropdownItem hideOnSelect={false}>
                 <Checkbox v-model="checked"

package/components/dropdown/demos/disabled.md

@@ -13,7 +13,7 @@ import {Icon} from 'kpc';
 <div>
     <Dropdown disabled>
         <Button type="primary">
-            disabled <Icon class="ion-ios-arrow-down" />
+            disabled <Icon class="k-icon-down" />
         </Button>
         <DropdownMenu>
             <DropdownItem>item 1</DropdownItem>
@@ -24,7 +24,7 @@ import {Icon} from 'kpc';
 
     <Dropdown>
         <Button type="primary">
-            disabled item <Icon class="ion-ios-arrow-down" />
+            disabled item <Icon class="k-icon-down" />
         </Button>
         <DropdownMenu>
             <DropdownItem>item 1</DropdownItem>

package/components/dropdown/demos/nested.md

@@ -12,7 +12,7 @@ import {Dropdown, DropdownMenu, DropdownItem, Button, Icon} from 'kpc';
 <div>
     <Dropdown trigger="click">
         <Button type="primary">
-            click <Icon class="ion-ios-arrow-down" />
+            click <Icon class="k-icon-down" />
         </Button>
         <DropdownMenu class="dropdown-demo">
             <DropdownItem>item 1</DropdownItem>
@@ -21,13 +21,13 @@ import {Dropdown, DropdownMenu, DropdownItem, Button, Icon} from 'kpc';
             <Dropdown position={{my: 'left top', at: 'right top'}} class="dropdown-demo">
                 <DropdownItem>
                     <span>hover</span>
-                    <i class="ion-ios-arrow-right"></i>
+                    <Icon class="k-icon-right" />
                 </DropdownItem>
                 <DropdownMenu class="dropdown-demo">
                     <Dropdown position={{my: 'left top', at: 'right top'}}>
                         <DropdownItem>
                             <span>hover</span>
-                            <i class="ion-ios-arrow-right"></i>
+                            <Icon class="k-icon-right" />
                         </DropdownItem>
                         <DropdownMenu class="dropdown-demo">
                             <DropdownItem>item 1</DropdownItem>
@@ -40,13 +40,13 @@ import {Dropdown, DropdownMenu, DropdownItem, Button, Icon} from 'kpc';
             <Dropdown trigger="click" position={{my: 'left top', at: 'right top'}}>
                 <DropdownItem>
                     <span>click</span>
-                    <i class="ion-ios-arrow-right"></i>
+                    <Icon class="k-icon-right" />
                 </DropdownItem>
                 <DropdownMenu class="dropdown-demo">
                     <Dropdown trigger="click" position={{my: 'left top', at: 'right top'}}>
                         <DropdownItem>
                             <span>click</span>
-                            <i class="ion-ios-arrow-right"></i>
+                            <Icon class="k-icon-right" />
                         </DropdownItem>
                         <DropdownMenu class="dropdown-demo">
                             <DropdownItem>item 1</DropdownItem>
@@ -64,7 +64,7 @@ import {Dropdown, DropdownMenu, DropdownItem, Button, Icon} from 'kpc';
 
 ```styl
 /.dropdown-demo.k-dropdown-menu
-    .ion-ios-arrow-right
+    .k-icon
         float right
         height 32px
         &:before

package/components/dropdown/demos/position.md

@@ -12,7 +12,7 @@ import {Dropdown, DropdownMenu, DropdownItem, Button, Icon} from 'kpc';
 <div>
     <Dropdown position={{my: 'left top', at: 'left bottom+5'}}>
         <Button type="primary">
-            left <Icon class="ion-ios-arrow-down" />
+            left <Icon class="k-icon-down" />
         </Button>
         <DropdownMenu>
             <DropdownItem>item 1</DropdownItem>
@@ -23,7 +23,7 @@ import {Dropdown, DropdownMenu, DropdownItem, Button, Icon} from 'kpc';
 
     <Dropdown position={{my: 'right top', at: 'right bottom+5'}}>
         <Button type="primary">
-            right <Icon class="ion-ios-arrow-down" />
+            right <Icon class="k-icon-down" />
         </Button>
         <DropdownMenu>
             <DropdownItem>item 1</DropdownItem>
@@ -34,7 +34,7 @@ import {Dropdown, DropdownMenu, DropdownItem, Button, Icon} from 'kpc';
 
     <Dropdown position="top">
         <Button type="primary">
-            top center <Icon class="ion-ios-arrow-down" />
+            top center <Icon class="k-icon-down" />
         </Button>
         <DropdownMenu>
             <DropdownItem>item 1</DropdownItem>

package/components/dropdown/demos/tooltip.md

@@ -19,7 +19,7 @@ import {Dropdown, DropdownMenu, DropdownItem, Button, Tooltip} from 'kpc';
             <Tooltip content="disabled">
                 <DropdownItem disabled>item 3</DropdownItem>
             </Tooltip>
-            <Dropdown position={{my: 'left top', at: 'right top'}}>
+            <Dropdown position={{my: 'left top', at: 'right top'}} trigger="click">
                 <Tooltip content="This is a nested Dropdown.">
                     <DropdownItem>item 4</DropdownItem>
                 </Tooltip>

package/components/dropdown/demos/trigger.md

@@ -14,7 +14,7 @@ import {Dropdown, DropdownMenu, DropdownItem, Button, Icon, Input} from 'kpc';
 <div>
     <Dropdown>
         <Button type="primary">
-            hover <Icon class="ion-ios-arrow-down" />
+            hover <Icon class="k-icon-down" />
         </Button>
         <DropdownMenu>
             <DropdownItem>item 1</DropdownItem>
@@ -25,7 +25,7 @@ import {Dropdown, DropdownMenu, DropdownItem, Button, Icon, Input} from 'kpc';
 
     <Dropdown trigger="click">
         <Button type="primary">
-            click <Icon class="ion-ios-arrow-down" />
+            click <Icon class="k-icon-down" />
         </Button>
         <DropdownMenu>
             <DropdownItem>item 1</DropdownItem>

package/components/dropdown/dropdown.ts

@@ -11,7 +11,7 @@ import {
     createVNode,
     nextTick,
 } from 'intact';
-import {bind, isTextChildren} from '../utils';
+import {bind, isTextChildren, getRestProps} from '../utils';
 import {EMPTY_OBJ, isFunction, noop} from 'intact-shared';
 import {Options, position, Feedback} from '../position';
 import {cx} from '@emotion/css';
@@ -21,6 +21,7 @@ import {Portal, PortalProps} from '../portal';
 import {useShowHideEvents} from '../../hooks/useShowHideEvents';
 import {usePosition, FeedbackCallback} from './usePosition';
 import type {Events} from '../types';
+import { Virtual } from '../virtual';
 
 export type Position = Options 
 export type PositionShorthand = 'left' | 'bottom' | 'right' | 'top'
@@ -35,6 +36,7 @@ export interface DropdownProps {
     disabled?: boolean
     value?: boolean
     position?: Position | 'left' | 'bottom' | 'right' | 'top'
+    collison?: Position['collision']
     of?: 'self' | 'parent' | Event
     container?: PortalProps['container']
 }
@@ -45,6 +47,8 @@ export interface DropdownEvents {
     hide: []
     mouseenter: [MouseEvent]
     mouseleave: [MouseEvent]
+    click: [MouseEvent]
+    contextmenu: [MouseEvent]
     positioned: [Feedback]
 }
 
@@ -58,11 +62,11 @@ const typeDefs: Required<TypeDefs<DropdownProps>> = {
     // Event is undefined in NodeJs
     of: ['self', 'parent', typeof Event === 'undefined' ? undefined : Event],
     container: [String, Function],
+    collison: ['none', 'fit', 'flip', 'flipfit', Array],
 };
 
 const defaults = (): Partial<DropdownProps> => ({
     trigger: 'hover',
-    position: {},
     of: 'self',
 });
 
@@ -72,6 +76,8 @@ const events: Events<DropdownEvents> = {
     hide: true,
     mouseenter: true,
     mouseleave: true,
+    click: true,
+    contextmenu: true,
     positioned: true,
 };
 
@@ -105,31 +111,18 @@ export class Dropdown<
         }
 
         const [trigger, menu] = children as DropdownChildren;
-        const triggerType = this.get('trigger');
-        const props = this.initEventCallbacks(triggerType); 
-
-        const clonedTrigger = isTextChildren(trigger) ? 
-            createVNode('span', null, trigger) :
-            directClone(trigger);
-        const triggerProps = this.triggerProps = this.normalizeTriggerProps(trigger.props || EMPTY_OBJ);
-        // add a className for opening status
-        let className = trigger.className || triggerProps.className;
+        const props = this.initEventCallbacks(); 
+        let {className, value, container} = this.get();
         className = cx({
-            [className]: className,
-            'k-dropdown-open': this.get('value'),
+            'k-dropdown-open': value,
+            [className!]: !!className,
         });
-
-        clonedTrigger.props = {...triggerProps, ...props, className};
-        clonedTrigger.className = className;
-
+    
         this.menuVNode = menu;
 
         return [
-            clonedTrigger,
-            // wrap the root dropdown menu to Portal to render into body
-            this.alwaysPortal || !this.rootDropdown ?
-                h(Portal, {children: menu, container: this.get('container')}) :
-                menu
+            h(Virtual, {...props, ...getRestProps(this), className}, trigger),
+            h(Portal, {children: menu, container})
         ];
     };
 
@@ -139,10 +132,7 @@ export class Dropdown<
     public showedDropdown: Dropdown | null = null;
     public positionHook = usePosition();
 
-    protected alwaysPortal = false;
-
-    private timer: number | undefined = undefined;
-    private triggerProps: any = null;
+    protected timer: number | undefined = undefined;
 
     init() {
         provide(DROPDOWN, this);
@@ -173,6 +163,12 @@ export class Dropdown<
         clearTimeout(this.timer);
         this.set('value', true);
 
+        // should show parent dropdown
+        const parentDropdown = this.dropdown;
+        if (parentDropdown) {
+            parentDropdown.show();
+        }
+
         if (shouldFocus) {
             nextTick(() => {
                 this.focusFirst();
@@ -184,9 +180,15 @@ export class Dropdown<
         if (this.get('disabled')) return;
         if (!this.get('value')) return;
 
+        const showedDropdown = this.showedDropdown;
+        if (showedDropdown) {
+            showedDropdown.hide(immediately);
+        }
+
         if (immediately) {
             this.set('value', false);
         } else {
+            clearTimeout(this.timer);
             this.timer = window.setTimeout(() => {
                 this.set('value', false);
             }, 200);
@@ -204,29 +206,27 @@ export class Dropdown<
 
     @bind
     private onEnter(e: MouseEvent) {
-        this.callOriginalCallback(e.type === 'click' ? 'ev-click' : 'ev-mouseenter', e);
-
         this.show();
+        this.trigger(e.type as 'mouseenter', e);
     }
 
     @bind 
     private onContextMenu(e: MouseEvent) {
-        this.callOriginalCallback('ev-contextmenu', e);
-
         e.preventDefault();
         this.set('of', e);
         this.show();
+        this.trigger('contextmenu', e);
     }
 
     @bind 
     private onLeave(e: MouseEvent) {
-        this.callOriginalCallback('ev-mouseleave', e);
-
         this.hide();
+        this.trigger(e.type as 'mouseleave', e);
     }
 
-    private initEventCallbacks(trigger: DropdownProps['trigger']) {
-        const props: Record<string, Function> = {};
+    private initEventCallbacks() {
+        const trigger = this.get('trigger');
+        const props: Record<string, Function | string> = {};
 
         switch (trigger) {
             case 'focus':
@@ -247,56 +247,15 @@ export class Dropdown<
 
         return props;
     }
-
-    private callOriginalCallback(name: string, e: MouseEvent) {
-        const callback = this.triggerProps[name];
-        const callbackOnDropdown = this.get<Function>(name);
-        if (isFunction(callback)) callback(e);
-        if (isFunction(callbackOnDropdown)) callbackOnDropdown(e);
-    }
-
-    private normalizeTriggerProps(props: any) {
-        // if use kpc in react or vue, normalize props by Wrapper.props.vnode;
-        const vnode = props.vnode;
-        if (!vnode) return props;
-
-        // maybe we render the intact component in react slot property, in this case
-        // the $isReact is false. so use the vnode $$typeof field as gauge
-        if (vnode.$$typeof || (this as any).$isVueNext) {
-            const _props = vnode.props;
-            if (!_props) return props;
-
-            return {
-                vnode,
-                'ev-click': _props.onClick,
-                'ev-mouseenter': _props.onMouseEnter,
-                'ev-mouseleave': _props.onMouseLeave,
-                'ev-contextmenu': _props.onContextMenu,
-                className: _props.className || _props.class /* vue-next */,
-            };
-        } else if ((this as any).$isVue) {
-            const data = vnode.data;
-            const on = data && data.on || EMPTY_OBJ;
-            const ret: Record<string, any> = {vnode};
-            ['click', 'mouseenter', 'mouseleave', 'contextmenu'].forEach(event => {
-                const method = on[event];
-                if (method) {
-                    ret[`ev-${event}`] = method;
-                }
-            });
-            return ret;
-        }
-
-        return props;
-    }
 }
 
 function useDocumentClickForDropdown(dropdown: Dropdown) {
     const elementRef = () => findDomFromVNode(dropdown.menuVNode!, true) as Element;
     const [addDocumentClick, removeDocumentClick] = useDocumentClick(elementRef, (e) => {
-        // case 1: if click an trigger and the trigger type is hover, ignore it
-        // case 2: if right click on trigger and the trigger type is contextmenu, ignore it
-        // case 3: if click on trigger and the trigger type is focus, do nothing 
+        // case 1: if click a trigger and its trigger type is hover, ignore it
+        // case 2: if right click on a trigger and its trigger type is contextmenu, ignore it
+        // case 3: if click on a trigger and its trigger type is focus, do nothing 
+        // case 3: if click on sub-dropdown, we should also show the parent dropdown, so ignore it
         const trigger = dropdown.get('trigger');
         if (trigger === 'focus') return;
 
@@ -310,6 +269,8 @@ function useDocumentClickForDropdown(dropdown: Dropdown) {
             }
         }
 
+        if (isSubDropdownElement(e.target as Element, dropdown)) return;
+
         dropdown.hide(true);
     }, true);
 
@@ -317,6 +278,17 @@ function useDocumentClickForDropdown(dropdown: Dropdown) {
     dropdown.on('hide', removeDocumentClick);
 }
 
+function isSubDropdownElement(elem: Element, dropdown: Dropdown): boolean {
+    const showedDropdown = dropdown.showedDropdown;
+    if (!showedDropdown) return false;
+
+    const subMenuElement = findDomFromVNode(showedDropdown.menuVNode!, true) as Element;
+    if (containsOrEqual(subMenuElement, elem)) {
+        return true;
+    }
+    return isSubDropdownElement(elem, showedDropdown);
+}
+
 function useHideLastMenuOnShow(dropdown: Dropdown) {
     const parentDropdown = dropdown.dropdown;
     dropdown.on('show', () => {

package/components/dropdown/index.spec.ts

@@ -4,6 +4,7 @@ import {Dropdown, DropdownMenu, DropdownItem} from '../dropdown';
 import BasicDemo from '~/components/dropdown/demos/basic';
 import NestedDemo from '~/components/dropdown/demos/nested';
 import ContextMenuDemo from '~/components/dropdown/demos/contextmenu';
+import TooltipDemo from '~/components/dropdown/demos/tooltip'; 
 
 describe('Dropdown', () => {
     afterEach((done) => {
@@ -72,7 +73,8 @@ describe('Dropdown', () => {
         expect(dropdown.parentNode).to.exist;
     });
 
-    it('nested dropdown', async () => {
+    it('nested dropdown', async function() {
+        this.timeout(0);
         const [instance, element] = mount(NestedDemo);
 
         (element.firstElementChild as HTMLElement).click();
@@ -89,6 +91,20 @@ describe('Dropdown', () => {
         await wait(500);
         const hoverSubDropdown = getElement('.k-dropdown-menu')!;
         expect(hoverSubDropdown.innerHTML).to.matchSnapshot();
+
+        const [hoverItem1] = hoverSubDropdown.querySelectorAll<HTMLElement>('.k-dropdown-item');
+        dispatchEvent(hoverItem, 'mouseleave');
+        dispatchEvent(hoverItem1, 'mouseenter');
+        await wait(500);
+        const hoverSubDropdown1 = getElement('.k-dropdown-menu')!;
+        expect(hoverSubDropdown1.textContent).to.eql('item 1item 2');
+
+        const [hoverItem2] = hoverSubDropdown1.querySelectorAll<HTMLElement>('.k-dropdown-item');
+        dispatchEvent(hoverItem1, 'mouseleave');
+        dispatchEvent(hoverItem2, 'mouseenter');
+        await wait(1000);
+        const hoverSubDropdown2 = getElement('.k-dropdown-menu')!;
+        expect(hoverSubDropdown2 === hoverSubDropdown1).to.be.true;
     });
 
     it('hide on click document', async () => {
@@ -281,13 +297,13 @@ describe('Dropdown', () => {
         expect(parent.scrollTop).to.eql(item.offsetHeight * 2 - 40);
     });
 
-    it('trigger: focus', async() => {
+    it('focus trigger type', async () => {
         class Demo extends Component {
             static template = `
                 const {Dropdown, DropdownMenu, DropdownItem} = this;
                 <div>
                     <Dropdown trigger="focus">
-                        <input ref="trigger" />
+                        <input ref="trigger" ev-focusin={this.onFocus} />
                         <DropdownMenu>
                             <DropdownItem>test1</DropdownItem>
                             <DropdownItem>test2</DropdownItem>
@@ -298,12 +314,14 @@ describe('Dropdown', () => {
             private Dropdown = Dropdown;
             private DropdownItem = DropdownItem;
             private DropdownMenu = DropdownMenu;
+            public onFocus = sinon.spy((e: MouseEvent) => console.log(e));
         }
         const [instance] = mount(Demo);
 
         dispatchEvent(instance.refs.trigger, 'focusin');
         await wait(500);
         expect(getElement('.k-dropdown-menu')).to.be.exist;
+        expect(instance.onFocus.callCount).to.eql(1);
 
         // clicking anywhere should not hide menu
         dispatchEvent(document, 'click');
@@ -314,4 +332,35 @@ describe('Dropdown', () => {
         await wait(700);
         expect(getElement('.k-dropdown-menu')).to.not.be.exist;
     });
+
+    it('wrap by tooltip', async () => {
+        const [instance, element] = mount(TooltipDemo);
+
+        dispatchEvent(element.firstChild as HTMLElement, 'mouseenter');
+        await wait();
+        const dropdown = getElement('.k-dropdown-menu')!;
+        const [item1, item2, item3, item4] = dropdown.querySelectorAll('.k-dropdown-item');
+
+        dispatchEvent(item1, 'mouseenter');
+        await wait();
+        expect(getElement('.k-tooltip-content')!.textContent).to.eql('item 1')
+
+        dispatchEvent(item1, 'mouseleave');
+        dispatchEvent(item3, 'mouseenter');
+        await wait();
+        expect(getElement('.k-tooltip-content')!.textContent).to.eql('disabled')
+
+        dispatchEvent(item3, 'mouseleave');
+        dispatchEvent(item4, 'mouseenter');
+        await wait();
+        expect(getElement('.k-tooltip-content')!.textContent).to.eql('This is a nested Dropdown.');
+
+        dispatchEvent(item4, 'click');
+        await wait();
+        expect(getElement('.k-dropdown-menu')!.textContent).to.eql('item 1item 2');
+
+        dispatchEvent(item4, 'mouseleave');
+        await wait(800);
+        expect(getElement('.k-dropdown-menu')).to.not.be.exist;
+    });
 });

package/components/dropdown/item.ts

@@ -5,6 +5,7 @@ import {useItemKeyboard, MenuKeyboardMethods} from './useKeyboard';
 import {Dropdown, DROPDOWN} from './dropdown';
 import {DropdownMenu, DROPDOWN_MENU} from './menu';
 import {IgnoreClickEvent} from '../../hooks/useDocumentClick';
+import { Dropdown as ExportDropdown, DropdownMenu as ExportDropdownMenu } from '.';
 
 export interface DropdownItemProps {
     disabled?: boolean
@@ -52,21 +53,31 @@ export class DropdownItem extends Component<DropdownItemProps, DropdownItemEvent
     select() {
         if (this.parentDropdown) return;
 
+        // trigger select event firstly for Cascader update values
+        this.trigger('select');
+
         if (this.get('hideOnSelect')) {
             // hide all dropdowns
             let dropdown = this.dropdown;
             do { dropdown!.hide(true); }
             while (dropdown = dropdown!.dropdown);
         }
-
-        this.trigger('select');
     }
 
     hasSubMenu() {
-        // TODO: wrapped by Tooltip
-        const parent = this.$senior;
-        if (parent instanceof Dropdown) {
-            return parent
+        // wrapped by Dropdown rather than DropdownMenu
+        let parent = this.$senior;
+        while (parent) {
+            // Tooltip extends Dropdown, it's also a instance of Dropdown
+            // so use constructor to detect
+            // if (parent instanceof DropdownMenu) {
+            if (parent.constructor === ExportDropdownMenu) {
+                return; 
+            }
+            if (parent.constructor === ExportDropdown) {
+                return parent;
+            }
+            parent = parent.$senior;
         }
     }
 
@@ -104,4 +115,4 @@ function useKeyboardForDropdownItem(instance: DropdownItem) {
             instance.select();
         },
     });
-}
+}