第二次单击时 office-fabric-ui 中的上下文菜单问题

Question

我们正在开发 Office UI Fabric JS 1.2.0。问题在于具有子菜单项的上下文菜单。当您打开二级菜单，然后单击菜单上的任意位置时，一级菜单关闭，二级菜单重新对齐到页面左上角。我们也无法在下一个版本的 fabric 中找到解决方案。

Answer 1

在重写 ContextualHost 的 fabric.js 中的两个方法后问题得到解决，如下所示：

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();
            }
        }
    }
};

希望这个问题 + 答案能帮助那些想要覆盖 fabric.js 原始代码的人。

第二次单击时 office-fabric-ui 中的上下文菜单问题

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

javascript

office-ui-fabric