neo.mjs 5.12.0 → 5.12.2

package/apps/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='5.12.0'
+         * @member {String} version='5.12.2'
          */
-        version: '5.12.0'
+        version: '5.12.2'
     }
 
     /**

package/examples/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='5.12.0'
+         * @member {String} version='5.12.2'
          */
-        version: '5.12.0'
+        version: '5.12.2'
     }
 
     /**

package/examples/button/base/MainContainer.mjs

@@ -170,6 +170,9 @@ class MainContainer extends ConfigurationViewport {
         }];
     }
 
+    /**
+     * @returns {Neo.component.Base}
+     */
     createExampleComponent() {
         return Neo.create({
             module   : Button,
@@ -182,15 +185,15 @@ class MainContainer extends ConfigurationViewport {
             width    : 150,
 
             menu: [{
-                handler: data => console.log('menu item click =>', data.component.id),
+                handler: data => console.log('menu item 1 click =>', data),
                 iconCls: 'fa fa-home',
                 text   : 'Item 1'
             }, {
-                handler: data => console.log('menu item click =>', data.component.id),
+                handler: data => console.log('menu item 2 click =>', data),
                 iconCls: 'fa fa-user',
                 text   : 'Item 2'
             }, {
-                handler: data => console.log('menu item click =>', data.component.id),
+                handler: data => console.log('menu item 3 click =>', data),
                 iconCls: 'fa fa-play',
                 text   : 'Item 3'
             }]
@@ -198,7 +201,7 @@ class MainContainer extends ConfigurationViewport {
             /*tooltips: [{
                 text: 'Hello World Tooltip'
             }]*/
-        });
+        })
     }
 }
 

package/examples/menu/list/MainContainer.mjs

@@ -45,7 +45,7 @@ class MainContainer extends ConfigurationViewport {
     createExampleComponent() {
         return Neo.create({
             module      : MenuList,
-            displayField: 'name',
+            displayField: 'text',
             store       : MainStore
         });
     }

package/examples/menu/list/MainStore.mjs

@@ -17,48 +17,48 @@ class MainStore extends Store {
         data: [{
             iconCls: 'fa fa-user',
             id     : 1,
-            name   : 'Item 1'
+            text   : 'Item 1'
         }, {
             iconCls: 'fa fa-home',
             id     : 2,
-            name   : 'Group 1',
+            text   : 'Group 1',
             items  : [{
                 iconCls: 'fa fa-home',
                 id     : 6,
-                name   : 'Item 1'
+                text   : 'Item 1'
             }, {
                 iconCls: 'fa fa-home',
                 id     : 7,
-                name   : 'Item 2'
+                text   : 'Item 2'
             }, {
                 iconCls: 'fa fa-home',
                 id     : 8,
-                name   : 'Item 3'
+                text   : 'Item 3'
             }]
         }, {
             iconCls: 'fa fa-cog',
             id     : 3,
-            name   : 'Item 2'
+            text   : 'Item 2'
         }, {
             iconCls: 'far fa-calendar',
             id     : 4,
-            name   : 'Item 3'
+            text   : 'Item 3'
         }, {
             iconCls: 'far fa-clock',
             id     : 5,
-            name   : 'Group 2',
+            text   : 'Group 2',
             items  : [{
                 iconCls: 'fa fa-clock',
                 id     : 9,
-                name   : 'Item 1'
+                text   : 'Item 1'
             }, {
                 iconCls: 'fa fa-clock',
                 id     : 10,
-                name   : 'Item 2'
+                text   : 'Item 2'
             }, {
                 iconCls: 'fa fa-clock',
                 id     : 11,
-                name   : 'Item 3'
+                text   : 'Item 3'
             }]
         }]
     }

package/examples/menu/panel/MainContainer.mjs

@@ -56,70 +56,70 @@ class MainContainer extends ConfigurationViewport {
             module: Menu,
 
             listConfig: {
-                displayField: 'name'
+                displayField: 'text'
             },
 
             listItems: [{
                 iconCls: 'fa fa-user',
                 id     : 1,
-                name   : 'Item 1'
+                text   : 'Item 1'
             }, {
                 iconCls: 'fa fa-home',
                 id     : 2,
-                name   : 'Group 1',
+                text   : 'Group 1',
                 items  : [{
                     iconCls: 'fa fa-home',
                     id     : 6,
-                    name   : 'Item 1'
+                    text   : 'Item 1'
                 }, {
                     iconCls: 'fa fa-home',
                     id     : 7,
-                    name   : 'Item 2'
+                    text   : 'Item 2'
                 }, {
                     iconCls: 'fa fa-home',
                     id     : 8,
-                    name   : 'Item 3'
+                    text   : 'Item 3'
                 }]
             }, {
                 iconCls: 'fa fa-cog',
                 id     : 3,
-                name   : 'Item 2'
+                text   : 'Item 2'
             }, {
                 iconCls: 'far fa-calendar',
                 id     : 4,
-                name   : 'Item 3'
+                text   : 'Item 3'
             }, {
                 iconCls: 'far fa-clock',
                 id     : 5,
-                name   : 'Group 2',
+                text   : 'Group 2',
                 items  : [{
                     iconCls: 'fa fa-clock',
                     id     : 9,
-                    name   : 'Item 1'
+                    text   : 'Item 1'
                 }, {
                     iconCls: 'fa fa-clock',
                     id     : 10,
-                    name   : 'Item 2'
+                    text   : 'Item 2'
                 }, {
                     iconCls: 'fa fa-clock',
                     id     : 11,
-                    name   : 'Group 1',
+                    text   : 'Group 1',
                     items  : [{
                         iconCls: 'far fa-clock',
                         id     : 12,
-                        name   : 'Item 1'
+                        text   : 'Item 1'
                     }, {
                         iconCls: 'far fa-clock',
                         id     : 13,
-                        name   : 'Item 2'
+                        text   : 'Item 2'
                     }, {
                         iconCls: 'far fa-clock',
                         id     : 14,
-                        name   : 'Item 3'
+                        text   : 'Item 3'
                     }]
                 }]
             }]
-        });
+        })
     }
 }
 

package/examples/table/container/MainContainer.mjs

@@ -79,9 +79,10 @@ class MainContainer extends ConfigurationViewport {
             valueLabelText: 'Cell & Column & Row'
         }, {
             module   : Checkbox,
+            checked  : me.exampleComponent.sortable,
             labelText: 'sortable',
             listeners: {change: me.onConfigChange.bind(me, 'sortable')},
-            value    : me.exampleComponent.sortable
+            style    : {marginTop: '10px'}
         }];
     }
 
@@ -90,7 +91,6 @@ class MainContainer extends ConfigurationViewport {
      */
     createExampleComponent() {
         return Neo.create(TableContainer, {
-            autoRender    : false,
             id            : 'myTableStoreContainer',
             selectionModel: CellModel,
             store         : MainStore,
@@ -101,6 +101,7 @@ class MainContainer extends ConfigurationViewport {
                 {dataField: 'githubId',  text: 'Github Id'},
                 {dataField: 'country',   text: 'Country'},
                 {
+                    text: 'Edit Action',
                     renderer: data => {
                         let button = Neo.create({
                             module  : Button,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "5.12.0",
+    "version": "5.12.2",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

package/src/DefaultConfig.mjs

@@ -236,12 +236,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '5.12.0'
+     * @default '5.12.2'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '5.12.0'
+    version: '5.12.2'
 };
 
 Object.assign(DefaultConfig, {

package/src/button/Base.mjs

@@ -186,6 +186,11 @@ class Base extends Component {
             click: value,
             scope: me.handlerScope || me
         });
+
+        me.menu && me.addDomListeners({
+            click: me.toggleMenu,
+            scope: me
+        })
     }
 
     /**
@@ -201,7 +206,7 @@ class Base extends Component {
         NeoArray.add(   iconNode.cls, value);
 
         iconNode.removeDom = !value || value === '';
-        this.update();
+        this.update()
     }
 
     /**
@@ -222,7 +227,7 @@ class Base extends Component {
         }
 
         iconNode.style.color = value;
-        this.update();
+        this.update()
     }
 
     /**
@@ -249,20 +254,51 @@ class Base extends Component {
     afterSetMenu(value, oldValue) {
         if (value) {
             import('../menu/List.mjs').then(module => {
-                let list = Neo.create({
-                    module  : module.default,
-                    appName : this.appName,
-                    floating: true,
-                    items   : value
+                let me = this;
+
+                me.menuList = Neo.create({
+                    module      : module.default,
+                    appName     : me.appName,
+                    displayField: 'text',
+                    floating    : true,
+                    hidden      : true,
+                    items       : value,
+                    parentId    : me.id
                 });
 
-                list.render(true);
-
-                console.log('afterSetMenu', list);
+                me.vdom.cn.push(me.menuList.vdom)
             })
         }
     }
 
+    /**
+     * Triggered after the mounted config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetMounted(value, oldValue) {
+        super.afterSetMounted(value, oldValue);
+
+        let me = this,
+            style;
+
+        if (value && me.menu) {
+            setTimeout(() => {
+                me.getDomRect().then(rect => {
+                    style = me.menuList.style || {};
+
+                    Object.assign(style, {
+                        right: 0,
+                        top  : rect.height + 'px'
+                    });
+
+                    me.menuList.style = style
+                })
+            }, 50)
+        }
+    }
+
     /**
      * Triggered after the pressed config got changed
      * @param {Boolean} value
@@ -288,7 +324,7 @@ class Base extends Component {
         value && me.addDomListeners({
             click: me.changeRoute,
             scope: me
-        });
+        })
     }
 
     /**
@@ -504,6 +540,23 @@ class Base extends Component {
             }
         }, rippleEffectDuration);
     }
+
+    /**
+     *
+     */
+    toggleMenu() {
+        let menuList = this.menuList,
+            hidden   = !menuList.hidden;
+
+        menuList.hidden = hidden;
+
+        if (!hidden) {
+            setTimeout(() => {
+                console.log('focus'); // todo: does not activate the key nav
+                menuList.focus()
+            }, 500)
+        }
+    }
 }
 
 Neo.applyClassConfig(Base);

package/src/component/Base.mjs

@@ -1106,14 +1106,11 @@ class Base extends CoreBase {
      * @param {String} id=this.id
      */
     focus(id=this.id) {
-        let me = this;
-
-        // remote method access
         Neo.main.DomAccess.focus({
-            id: id || me.id
+            id
         }).catch(err => {
-            console.log('Error attempting to receive focus for component', err, me);
-        });
+            console.log('Error attempting to receive focus for component', err, this);
+        })
     }
 
     /**
@@ -1191,7 +1188,7 @@ class Base extends CoreBase {
     getMountedParentId() {
         let parentId  = this.parentId,
             parent    = Neo.getComponent(parentId),
-            itemsRoot = parent?.getVdomItemsRoot();
+            itemsRoot = parent?.getVdomItemsRoot?.();
 
         return itemsRoot ? itemsRoot.id : parentId
     }

package/src/controller/Component.mjs

@@ -48,11 +48,11 @@ class Component extends Base {
         me.references = {};
 
         if (component.isConstructed) {
-            me.onComponentConstructed();
+            me.onComponentConstructed()
         } else {
             listenerId = component.on('constructed', () => {
                 component.un('constructed', listenerId);
-                me.onComponentConstructed();
+                me.onComponentConstructed()
             });
         }
     }
@@ -64,7 +64,7 @@ class Component extends Base {
      * @protected
      */
     beforeSetParent(value, oldValue) {
-        return value ? value : this.getParent();
+        return value || this.getParent()
     }
 
     /**
@@ -87,7 +87,7 @@ class Component extends Base {
      */
     getModel(sameLevelOnly=false) {
         let component = this.component;
-        return sameLevelOnly ? component.model : component.getModel();
+        return sameLevelOnly ? component.model : component.getModel()
     }
 
     /**
@@ -105,7 +105,7 @@ class Component extends Base {
         parentId        = me.component.parentId;
         parentComponent = parentId && Neo.getComponent(parentId);
 
-        return parentComponent?.getController() || null;
+        return parentComponent?.getController() || null
     }
 
     /**
@@ -125,7 +125,7 @@ class Component extends Base {
             }
         }
 
-        return component || null;
+        return component || null
     }
 
     /**
@@ -220,8 +220,8 @@ class Component extends Base {
                             }
                         }
                     }
-                });
-            });
+                })
+            })
         }
     }
 
@@ -241,7 +241,7 @@ class Component extends Base {
             }
         }
 
-        me.getParent()?.removeReference(component);
+        me.getParent()?.removeReference(component)
     }
 }
 

package/src/form/field/Text.mjs

@@ -1442,21 +1442,19 @@ class Text extends Base {
             }
         }
 
-        if (required && isEmpty) {
-            me._error = me.errorTextRequired;
-            returnValue = false;
-        } else if (Neo.isNumber(maxLength) && valueLength > maxLength) {
-            if (required || !isEmpty) {
-                me._error = me.errorTextMaxLength(errorParam);
+        if (isEmpty) {
+            if (required) {
+                me._error = me.errorTextRequired;
                 returnValue = false;
             }
-        } else if (Neo.isNumber(minLength) && valueLength < minLength) {
-            if (required || !isEmpty) {
+        } else {
+            if (Neo.isNumber(maxLength) && valueLength > maxLength) {
+                me._error = me.errorTextMaxLength(errorParam);
+                returnValue = false;
+            } else if (Neo.isNumber(minLength) && valueLength < minLength) {
                 me._error = me.errorTextMinLength(errorParam);
                 returnValue = false;
-            }
-        } else if (inputPattern && !inputPattern.test(value)) {
-            if (required || !isEmpty) {
+            } else if (inputPattern && !inputPattern.test(value)) {
                 me._error = me.errorTextInputPattern(errorParam);
                 returnValue = false;
             }

package/src/list/Base.mjs

@@ -641,6 +641,9 @@ class Base extends Component {
         let me     = this,
             record = me.store.get(me.getItemRecordId(node.id));
 
+        // pass the record to class extensions
+        data.record = record;
+
         if (!me.disableSelection && (!me.useHeaders || !record.isHeader)) {
             me.selectionModel?.select(node.id);
         }

package/src/main/mixin/DeltaUpdates.mjs

@@ -127,12 +127,12 @@ class DeltaUpdates extends Base {
                 startTag  = `<!-- ${delta.id} -->`;
                 reg       = new RegExp(startTag + '[\\s\\S]*?<!-- \/neo-vtext -->');
 
-                node.innerHTML = node.innerHTML.replace(reg, '');
+                node.innerHTML = node.innerHTML.replace(reg, '')
             } else {
                 // console.warn('du_removeNode: dom node not found for id', delta.id);
             }
         } else {
-            node.parentNode.removeChild(node);
+            node.remove()
         }
     }
 

package/src/manager/DomEvent.mjs

@@ -106,7 +106,7 @@ class DomEvent extends Base {
 
                                 if (!preventFire) {
                                     // multiple listeners would change the reference of data.component
-                                    data = Neo.clone(data, true);
+                                    data = Neo.clone(data, true, true);
 
                                     data.component = component;
                                     listener.fn.apply(listener.scope || globalThis, [data]);

package/src/menu/List.mjs

@@ -96,7 +96,12 @@ class List extends BaseList {
          * We are applying a z-index style which is 1 number higher to each sub-menu
          * @member {Number} zIndex_=100
          */
-        zIndex_: 100
+        zIndex_: 100,
+        /**
+         * @member {Object} _vdom
+         */
+        _vdom:
+        {tag: 'ul', tabIndex: -1, cn: []}
     }
 
     /**
@@ -109,7 +114,7 @@ class List extends BaseList {
         let cls = this.cls;
 
         NeoArray[value ? 'add' : 'remove'](cls, 'neo-floating');
-        this.cls = cls;
+        this.cls = cls
     }
 
     /**
@@ -122,7 +127,7 @@ class List extends BaseList {
         let store = this.store;
 
         oldValue && store.remove(oldValue);
-        value    && store.add(value);
+        value    && store.add(value)
     }
 
     /**
@@ -138,6 +143,7 @@ class List extends BaseList {
             if (me.isRoot) {
                 if (!value) {
                     me.focusTimeoutId = setTimeout(() => {
+                        console.log('unmount'); // todo: does not hide a top-level floating menu
                         me[me.floating ? 'unmount' : 'hideSubMenu']();
                     }, 20);
                 } else {
@@ -158,7 +164,7 @@ class List extends BaseList {
      * @protected
      */
     afterSetZIndex(value, oldValue) {
-        this.style = {...this.style, zIndex: value};
+        this.style = {...this.style, zIndex: value}
     }
 
     /**
@@ -168,19 +174,20 @@ class List extends BaseList {
      * @returns {Object|Object[]|String} Either a config object to assign to the item, a vdom cn array or a html string
      */
     createItemContent(record, index) {
-        let me     = this,
-            id     = record[me.store.keyProperty],
-            vdomCn = [{tag: 'span', cls: ['neo-content'], html: record[me.displayField]}];
+        let me      = this,
+            iconCls = record.iconCls,
+            id      = record[me.store.keyProperty],
+            vdomCn  = [{tag: 'span', cls: ['neo-content'], html: record[me.displayField]}];
 
-        if (record.iconCls && record.iconCls !== '') {
-            vdomCn.unshift({tag: 'i', cls: ['neo-menu-icon', 'neo-icon', record.iconCls], id: me.getIconId(id)});
+        if (iconCls && iconCls !== '') {
+            vdomCn.unshift({tag: 'i', cls: ['neo-menu-icon', 'neo-icon', iconCls], id: me.getIconId(id)});
         }
 
         if (me.hasChildren(record)) {
             vdomCn.push({tag: 'i', cls: ['neo-arrow-icon', 'neo-icon', 'fas fa-chevron-right'], id: me.getArrowIconId(id)});
         }
 
-        return vdomCn;
+        return vdomCn
     }
 
     /**
@@ -197,10 +204,10 @@ class List extends BaseList {
 
         Object.entries(subMenuMap).forEach(([key, value]) => {
             value.destroy();
-            subMenuMap[key] = null;
+            subMenuMap[key] = null
         });
 
-        super.destroy(...args);
+        super.destroy(...args)
     }
 
     /**
@@ -208,7 +215,7 @@ class List extends BaseList {
      * @returns {String}
      */
     getArrowIconId(recordId) {
-        return `${this.id}__arrow_icon__${recordId}`;
+        return `${this.id}__arrow_icon__${recordId}`
     }
 
     /**
@@ -216,7 +223,7 @@ class List extends BaseList {
      * @returns {String}
      */
     getIconId(recordId) {
-        return `${this.id}__icon__${recordId}`;
+        return `${this.id}__icon__${recordId}`
     }
 
     /**
@@ -225,7 +232,7 @@ class List extends BaseList {
      * @returns {String}
      */
     getMenuMapId(recordId) {
-        return `menu__${recordId}`;
+        return `menu__${recordId}`
     }
 
     /**
@@ -234,7 +241,7 @@ class List extends BaseList {
      * @returns {Boolean}
      */
     hasChildren(record) {
-        return Array.isArray(record.items) && record.items.length > 0;
+        return Array.isArray(record.items) && record.items.length > 0
     }
 
     /**
@@ -246,7 +253,7 @@ class List extends BaseList {
 
         if (activeSubMenu) {
             activeSubMenu.unmount();
-            me.activeSubMenu = null;
+            me.activeSubMenu = null
         }
     }
 
@@ -255,7 +262,7 @@ class List extends BaseList {
      * @param {Object[]} data.path
      */
     onFocusEnter(data) {
-        this.menuFocus = true;
+        this.menuFocus = true
     }
 
     /**
@@ -263,7 +270,17 @@ class List extends BaseList {
      * @param {Object[]} data.oldPath
      */
     onFocusLeave(data) {
-        this.menuFocus = false;
+        this.menuFocus = false
+    }
+
+    /**
+     * @param {Object} node
+     * @param {Object} data
+     */
+    onItemClick(node, data) {
+        super.onItemClick(node, data);
+
+        data.record.handler?.call(this, data)
     }
 
     /**
@@ -277,7 +294,7 @@ class List extends BaseList {
 
         if (me.activeSubMenu !== me.subMenuMap?.[me.getMenuMapId(recordId)]) {
             me.hideSubMenu();
-            me.hasChildren(record) && me.showSubMenu(nodeId, record);
+            me.hasChildren(record) && me.showSubMenu(nodeId, record)
         }
     }
 
@@ -305,26 +322,27 @@ class List extends BaseList {
 
                 Object.assign(menuStyle, style);
 
-                subMenu.setSilent({style: menuStyle});
+                subMenu.setSilent({style: menuStyle})
             } else {
                 subMenuMap[subMenuMapId] = subMenu = Neo.create({
-                    module     : List,
-                    appName    : me.appName,
-                    floating   : true,
-                    items      : record.items,
-                    isRoot     : false,
-                    parentId   : Neo.apps[me.appName].mainView.id,
-                    parentIndex: store.indexOf(record),
-                    parentMenu : me,
+                    module      : List,
+                    appName     : me.appName,
+                    displayField: me.displayField,
+                    floating    : true,
+                    items       : record.items,
+                    isRoot      : false,
+                    parentId    : Neo.apps[me.appName].mainView.id,
+                    parentIndex : store.indexOf(record),
+                    parentMenu  : me,
                     style,
-                    zIndex     : me.zIndex + 1
-                });
+                    zIndex      : me.zIndex + 1
+                })
             }
 
             me.activeSubMenu = subMenu;
             me.subMenuMap    = subMenuMap;
 
-            subMenu.render(true);
+            subMenu.render(true)
         });
     }
 
@@ -335,7 +353,7 @@ class List extends BaseList {
         this.selectionModel.deselectAll(true); // silent update
         this.hideSubMenu();
 
-        super.unmount();
+        super.unmount()
     }
 }
 

package/src/menu/Model.mjs

@@ -19,6 +19,9 @@ class Model extends BaseModel {
          * @member {Object[]} fields
          */
         fields: [{
+            name: 'handler',
+            type: 'Function'
+        }, {
             name: 'iconCls',
             type: 'String'
         }, {
@@ -28,7 +31,7 @@ class Model extends BaseModel {
             name: 'items', // optional
             type: 'Array'
         }, {
-            name: 'name',
+            name: 'text',
             type: 'String'
         }]
     }

package/src/table/View.mjs

@@ -296,12 +296,15 @@ class View extends Component {
             cellId   = me.getCellId(opts.record, field.name);
             cellNode = me.getVdomChild(cellId);
 
-            cellNode.innerHTML = field.value; // keep the vdom in sync
-
-            deltas.push({
-                id       : cellId,
-                innerHTML: field.value
-            })
+            // the vdom might not exist yet => nothing to do in this case
+            if (cellNode) {
+                cellNode.innerHTML = field.value; // keep the vdom in sync
+
+                deltas.push({
+                    id       : cellId,
+                    innerHTML: field.value
+                })
+            }
         });
 
         deltas.length > 0 && Neo.applyDeltas(me.appName, deltas);

package/src/tooltip/Base.mjs

@@ -97,7 +97,7 @@ class Base extends Container {
                 mouseleave: me.hideDelayed,
                 delegate  : me.delegate,
                 scope     : me
-            });
+            })
         }
     }
 
@@ -118,7 +118,7 @@ class Base extends Container {
             me.addDomListeners([
                 {mouseenter: me.onMouseEnter, scope: me},
                 {mouseleave: me.onMouseLeave, scope: me}
-            ]);
+            ])
         }
     }
 
@@ -177,7 +177,7 @@ class Base extends Container {
         let me = this;
 
         me.clearTimeout(['dismiss', 'hide', 'show']);
-        me.mounted && me.unmount();
+        me.mounted && me.unmount()
     }
 
     /**
@@ -190,7 +190,7 @@ class Base extends Container {
         if (me.hideDelay) {
             me.hideDelayTaskId = setTimeout(me.hide.bind(me), me.hideDelay, data);
         } else {
-            me.hide(data);
+            me.hide(data)
         }
     }
 
@@ -233,7 +233,7 @@ class Base extends Container {
             me.dismissDelayTaskId = setTimeout(me.hide.bind(me), me.dismissDelay, data);
         }
 
-        !me.mounted && me.mount();
+        !me.mounted && me.render(true)
     }
 
     /**
@@ -244,9 +244,9 @@ class Base extends Container {
         let me = this;
 
         if (me.showDelay) {
-            me.showDelayTaskId = setTimeout(me.show.bind(me), me.showDelay, data);
+            me.showDelayTaskId = setTimeout(me.show.bind(me), me.showDelay, data)
         } else {
-            me.show(data);
+            me.show(data)
         }
     }
 }