After attaching an event to a widget, the other widget components lose functionality

So I have my widget select widget that when an icon is clicked, it will display the widget that corresponds to that icon. I ran into an issue where I needed to have the widget select hide when it is no longer in focus. So to remedy this I implemented on property for widgets and used the onBlur event. However as soon as I did this the icons lost their functionality. Is the on property completely overwriting the click actions of the icons? Below is the code I have, thank you!

widget_select = webix.ui({
        view:"window",
        id:"widget_select",
        height:200, width:350,
        left:25, top:150,
        head:{
            view: "toolbar", margin:-4, cols:[
                {view:"label", label:"Widget Select"},
                {view: "icon", icon: "times-circle", css:"alter",
                    click:"$$('widget_select').hide();"}
            ]
        },
        body:{
            cols:[
                {
                    view:"icon", icon:"calendar", id:"icon_cal", width:50, height:50,
                    click:function(){
                        makeWidget('calendar');
                        $$('icon_cal').disable();
                        $$('widget_select').hide();
                    }
                },
                {
                    view: "icon", icon: "edit", id: "icon_sticky" ,width:50, height:50,
                    click:function(){
                        makeWidget('sticky');
                        $$('icon_sticky').disable();
                        $$('widget_select').hide();
                    }
                },
                {
                    view: "icon", icon: "picture-o", id: "icon_pic", width:50, height:50,
                    click:function(){
                        makeWidget('picture');
                        $$('icon_pic').disable();
                        $$('widget_select').hide();
                    }
                },
                {
                    view: "icon", icon: "envelope", id:"icon_notify", width:50, height:50,
                    click:function(){
                        makeWidget('notification');
                        $$('icon_notify').disable();
                        $$('widget_select').hide();
                    }
                }
            ]
        },
        on: {
            'onBlur': function(){
                this.hide();
            }
        }
    });

Due to the sequence of events, window’s onBlur fires before button’s onItemClick, as the focus moves from window to button. But in such case the button gets hidden before it is focused, so onItemClick fails as well.

If such use-case can’t be avoided, I suggest you use the global onFocusChange which stores two parameters: focus target and its source view.
But please note that it will be the exact components: window’s head toolbar or inner buttons will be considered as well. А simplified checkup can look like

 webix.attachEvent("onFocusChange", function(to, from){  
     if (!to || to.getTopParentView().name !== "window"){
             widget_select.hide()
     }
 });

Thank you!

So the fix works, but as soon as I implement “position: ‘top’” for the widget I created above, it will send back an Uncaught RangeError error after the default position top animation is finished. It only does this though when the widget select has “position: ‘top’” in it. Any suggestions?

AFAICS, the animation in position:'top' affects the focus and causes a loop.
It’s possible to avoid it using (un)blockEvent API:

     if (!to || to.getTopParentView().name !== "window"){
        webix.blockEvent();
        $$("widget_select").hide();
        webix.unblockEvent();
     }