JS Hide drop-down menu once the mouse moves away

1.1 Problem

When clicking on the drop-down widget, a menu will appear. But if we want to collapse the menu, we must select an item or click elsewhere first. How can the menu be collapsed once the mouse moves away?

1.2 Solution

We can add the JS initialization event to the widget.

Note: This does not support mobile devices.

Design the report: add the drop-down box widget, and set the data dictionary of the options.

Add an after initialization event to the widget:

var self = this;
window.tryCollapse = function() {
    if (window.needCollapse) {
        if (self.isExpanded()) {
            self.collapse();
        }
        window.needCollapse = false;
    }
}
$('.view-container').children().bind('mouseout', function(e) {
    window.needCollapse = true;
    setTimeout(function() {
        window.tryCollapse();
    }, 100);
});
var btn = $('.fr-trigger-btn-up', this.element);
var view = this.$view;
btn.bind('click', function() {
    if (!self.isExpanded()) {
        return;
    }
    setTimeout(function() {
        $('.fr-combo-list-item', view).bind('mouseover', function() {
            window.needCollapse = false;
        });
    }, 100);
});

Save and preview the effect:

js-DropDownBox.cpt