CODEWITHSUNDEEP
javascriptoffice-ui-fabric
Vishnu
Vishnu

Reputation: 2187

Contextual Menu issue in office-fabric-ui on second click

We are working on Office UI Fabric JS 1.2.0. Issue is with context menu having submenu items. When you open Second level, and then click anywhere on menu, first level menu was closing and second menu was re-aligning to Top-Left of page. We couldn't find the solution in next version of fabric also.

Upvotes: 1

Views: 547

Answers (1)

Vishnu
Vishnu

Reputation: 2187

The issue gets resolved after overriding two methods from fabric.js of ContextualHost as follows:

fabric.ContextualHost.prototype.disposeModal = function () {
    if (fabric.ContextualHost.hosts.length > 0) {
        window.removeEventListener("resize", this._resizeAction, false);
        document.removeEventListener("click", this._dismissAction, true);
        document.removeEventListener("keyup", this._handleKeyUpDismiss, true);
        this._container.parentNode.removeChild(this._container);
        if (this._disposalCallback) {
            this._disposalCallback();
        }
        // Dispose of all ContextualHosts
        var index = fabric.ContextualHost.hosts.indexOf(this);
        fabric.ContextualHost.hosts.splice(index, 1);

        //Following is original code removed
        //var i = ContextualHost.hosts.length;
        //while (i--) {
        //    ContextualHost.hosts[i].disposeModal();
        //    ContextualHost.hosts.splice(i, 1);
        //}
    }
};

fabric.ContextualHost.prototype._dismissAction = function (e) {

    var i = fabric.ContextualHost.hosts.length;
    while (i--) { //New added
        var currentHost = fabric.ContextualHost.hosts[i];
        if (!currentHost._container.contains(e.target) && e.target !== this._container) {
            if (currentHost._children !== undefined) {
                var isChild_1 = false;
                currentHost._children.map(function (child) {
                    if (child !== undefined) {
                        isChild_1 = child.contains(e.target);
                    }
                });
                if (!isChild_1) {
                    currentHost.disposeModal();
                }
            }
            else {
                currentHost.disposeModal();
            }
        }
    }
};

Hope this question + answer helps someone looking to override fabric.js original code.

Upvotes: 1

Related Questions