when open a contextMenu should close other contextMenu

[dd1994]

I have a list, when right click a list item, open a menu, but it should like browser's behavior, when open a contextMenu should close other contextMenu, if not, multiple contextMenu is weird, see the following picture.(sorry for my poor English, hope you already understand)

[michitaro]

I understand your demand.
There should not be 2 or more context menus at the same time. That true.

[michitaro]

done. Try 2.10.0.
https://michitaro.github.io/vue-menu/?Sample3

[dd1994]

awesome! It works fun👏

[dd1994]

I don't know why, when I upgrade to 2.10.0, it cause errors, back to 2.8.x is ok

code is like this:

// export as vioTheme
import { StyleFactory } from '@hscmap/vue-menu';

export default StyleFactory(
    (() => {
        const base = {
            backgroundColor: 'rgba(255, 255, 255, 1)',
            color: 'black',
            boxShadow: '0 2pt 6pt rgba(0, 0, 0, 0.5)',
            lineHeight: '21px'
        };
        return {
            menu: base,
            menubar: base,
            separator: { backgroundColor: 'rgba(127, 127, 127, 0.5)' },
            active: { backgroundColor: '#0275d8', color: '#fff' },
            disabled: { opacity: '0.5' },
            animation: false
        };
    })()
);

HTML:

        <div class="chart-editor-key-columns">
            <header>维度</header>
            <vioTheme class="context-menu-wrapper">
                <ul ref="key-columns">
                    <li
                        slot="reference"
                        v-for="(column, i) in keyColumns"
                        :key="i"
                        :class="{
                            'chart-editor-key-columns-checked': keyColumnCheckedStatus[i],
                            'chart-editor-key-columns-using-dimension': usingListFromDimension.some(e => e === column.name),
                            'chart-editor-key-columns-using-group': usingListFromGroup.some(e => e === column.name)
                        }"
                        draggable="true"
                        @dragstart="dragstartHandler(column, i, $event)"
                        @dragend="dragendHandler"
                    >
                        <hsc-menu-context-menu @contextmenu.native.stop :menuZIndex="999">
                            <div class="context-menu-sub-wrapper" @click="columnClickHandler(i)">
                                <i :class="getIconClassesByType(column.cast || column.type)" class="column-type-icon"></i>
                                <Tooltip placement="top" :content="`${column.alias}(${column.name})`" :delay="300">
                                    <span class="column-alias" slot="reference">{{ column.alias || column.name }}</span>
                                </Tooltip>
                                <Tooltip placement="top" content="点击快速进行智能分析" :delay="300" v-if="showIntelligentAnalysisIcon(column) && columnHasOneModel(column)">
                                    <i class="iconfont icon-chart intelligent_analysis_icon" :class="intelligentAnalysisIconClass" slot="reference" @click.stop="setIntelligentAnalysis(column)"></i>
                                </Tooltip>
                                <el-popover v-if="showIntelligentAnalysisIcon(column) && columnHasMultiModel(column)" placement="right" width="200" trigger="click">
                                    <div>请选择:</div>
                                    <div v-for="model in findColumnModel(column, dataModel)" :key="model" class="select-model" @click="setIntelligentAnalysis(column, model)">{{ DataModelsNameMap[model] }}</div>
                                    <i class="iconfont icon-chart intelligent_analysis_icon" :class="intelligentAnalysisIconClass" @click.stop="" slot="reference"></i>
                                </el-popover>
                                <Tooltip v-if="showDiscardIntelligentAnalysisIcon(column)" placement="top" content="点击取消智能分析" :delay="300">
                                    <i class="iconfont icon-chart intelligent_analysis_icon" @click.stop="discardIntelligentAnalysis(column)" slot="reference"></i>
                                </Tooltip>
                            </div>
                            <template slot="contextmenu">
                                <hsc-menu-item label="数据模型" :sync="true" v-if="!isSetIntelligentAnalysis && type !== 'sql'">
                                    <hsc-menu-item :label="`${getSelectedDataModelTag(column, DataModels.sellerId)}商家ID`" :sync="true" @click="setDataModel(column, DataModels.sellerId)"> </hsc-menu-item>
                                    <hsc-menu-item :label="`${getSelectedDataModelTag(column, DataModels.buyerId)}买家ID`" :sync="true" @click="setDataModel(column, DataModels.buyerId)"> </hsc-menu-item>
                                    <!-- <hsc-menu-item label="地理角色" :sync="true">
                                        <hsc-menu-item :label="`${getSelectedDataModelTag(column, DataModels.longitude)}经度`" @click="setDataModel(column, DataModels.longitude)" />
                                        <hsc-menu-item :label="`️️️${getSelectedDataModelTag(column, DataModels.latitude)}️纬度`" @click="setDataModel(column, DataModels.latitude)" />
                                        <hsc-menu-item :label="`${getSelectedDataModelTag(column, DataModels.position)}位置`" @click="setDataModel(column, DataModels.position)" />
                                        <hsc-menu-item :label="`${getSelectedDataModelTag(column, DataModels.geographicValue)}关联值`" @click="setDataModel(column, DataModels.geographicValue)" />
                                    </hsc-menu-item> -->
                                </hsc-menu-item>
                            </template>
                        </hsc-menu-context-menu>
                    </li>
                </ul>
            </vioTheme>
        </div>

[michitaro]

I could not reproduce the problem.
Could you provide a minimal repository that reproduce the problem?

Do you use this library with electron?
If so, this can be related to #5.

[dd1994]

2.8.3 is OK, 2.8.4 is broken

[michitaro]

Thank you for the information, but I couldn't find the cause of the problem.
Could you make changes on this so that it reproduce the problem? The repository contains minimal code for vue-menu things.
I can't debug them until the error occurs in my laptop.

[michitaro]

Can I have your package-lock.json and package.json? I have an interest in the dependencies.

[dd1994]

thank you @michitaro , but sorry for that I can't reproduce the problem when contains minimal code. maybe I will write a context menu components for myself. Thanks for being so patient anyway.

[dd1994]

{
    "name": "vio",
    "version": "1.0.0",
    "description": "sd",
    "main": "index.js",
    "scripts": {
        "kv": "kv dev",
        "dev": "kv dev & node start.js",
        "watch": "nodemon --inspect start.js",
        "test:unit": "jest",
        "test:e2e": "npm run cypress:run",
        "cypress:open": "cypress open",
        "cypress:run": "cypress run",
        "ts:build": "tsc || echo done",
        "ts:watch": "tsc -w",
        "ts": "npm run ts:watch",
        "build": "npm run clean && npm run ts:build && npm run gen-wrapper && npm run pre-compile",
        "clean": "ls -a && rm -rf .tmp && rm -rf build",
        "pre-compile": "NODE_ENV=dev node start build",
        "gen-wrapper": "touch wrapper.ejs",
        "trace": "node start close && node start &> trace.txt",
        "doc": "typedoc --includeDeclarations --excludeExternals --ignoreCompilerErrors --out ./_/dev_doc ./service",
        "format": "npx prettier --tab-width 4 --single-quote --write \"pages/**/*.{ts,less,vue}\" \"db/**/*.ts\" \"service/**/*.ts\" \"config/*.js\"",
        "test:datasource": "mocha test/dataSource/test.spec.js --timeout 80000"
    },
    "nodemonConfig": {
        "ignore": [
            "build/*",
            "pages/*",
            "test/*",
            ".tmp/*",
            ".minicodetmp/*",
            "buildFileInfo.json"
        ],
        "delay": "2500"
    },
    "repository": {
        "type": "git",
        "url": "ssh://[email protected]:60022/n/vio.git"
    },
    "keywords": [
        "VIO",
        "Weidian"
    ],
    "author": "VIO",
    "license": "ISC",
    "dependencies": {
        "@vdian/agentools": "^1.0.22",
        "@vdian/commons": "^1.1.7",
        "@vdian/midlog": "0.0.23",
        "@vdian/qcloud": "1.0.2",
        "@vdian/redis-client": "0.0.6",
        "@vdian/rocker-dao": "^1.3.2",
        "@vdian/rocker-mvc": "^1.3.18",
        "@vdian/rocker-mvc-render-plugin": "^0.4.7",
        "@vdian/rocker-wdr": "0.0.6",
        "@vdian/rocketmq": "0.0.7",
        "@vdian/rpc": "^0.2.9",
        "@vdian/tracer": "0.0.14",
        "@vdian/vc-common-comlib": "^0.1.1",
        "@vdian/vc-spec": "^0.2.1",
        "@vdian/vc-sql-comlib": "^0.1.0",
        "@vdian/vip-client": "^1.0.3",
        "@vdian/hotpot": "^0.1.19",
        "axios": "^0.18.0",
        "backstab": "0.0.1",
        "core-js": "^2.5.3",
        "elasticsearch": "^15.3.0",
        "filepaths": "^0.3.0",
        "formidable": "^1.1.1",
        "fs-path": "0.0.24",
        "is-number": "^7.0.0",
        "koa": "^2.6.2",
        "lodash": "^4.17.5",
        "mkdirp": "^0.5.1",
        "moment": "^2.20.0",
        "node-schedule": "^1.3.0",
        "node-xlsx": "^0.12.1",
        "pinyin": "^2.8.3",
        "pinyin-engine": "^1.1.0",
        "qs": "^6.5.2",
        "ramda": "^0.26.1",
        "redis": "^2.8.0",
        "request": "^2.83.0",
        "request-promise-native": "^1.0.5",
        "resize-detector": "^0.2.0",
        "rulejs": "^0.2.0",
        "socket.io": "^2.1.1",
        "socket.io-client": "^2.1.1",
        "uuid": "^3.1.0",
        "simple-array-diff": "^1.1.0",
        "d3-force-graph": "latest"
    },
    "devDependencies": {
        "regenerator-runtime": "^0.12.0",
        "@types/chai": "^4.1.4",
        "@types/lodash": "^4.14.105",
        "@types/mocha": "^5.2.4",
        "@types/node": "^7.0.60",
        "@types/ramda": "github:types/npm-ramda#dist",
        "@types/jquery": "^3.3.10",
        "@types/koa": "^2.0.46",
        "@types/request": "^2.47.1",
        "@types/socket.io": "^1.4.36",
        "@types/webpack-env": "^1.13.6",
        "@vue/test-utils": "^1.0.0-beta.25",
        "babel-jest": "^23.6.0",
        "babel-plugin-dynamic-import-node": "^2.2.0",
        "mini-css-extract-plugin": "^0.4.0",
        "chai": "^4.1.2",
        "cypress": "3.1.0",
        "husky": "^1.3.1",
        "jest": "^23.6.0",
        "mocha": "^5.2.0",
        "nodemon": "^1.18.9",
        "power-assert": "^1.6.1",
        "prettier": "1.16.1",
        "pretty-quick": "^1.8.0",
        "ts-jest": "^23.10.4",
        "typedoc": "^0.12.0",
        "typescript": "^2.7.2",
        "vue-jest": "^3.0.0",
        "less": "^2.7.3",
        "d3": "^3.5.17",
        "d3-array": "^1.2.4",
        "dc": "^2.2.0",
        "3d-force-graph": "^1.39.0",
        "force-graph": "^1.8.0",
        "@antv/data-set": "^0.8.9",
        "@antv/g2": "3.2.8",
        "@antv/g2-plugin-slider": "2.1.0",
        "simple-web-worker": "^1.2.0",
        "monaco-editor": "^0.14.3",
        "monaco-editor-webpack-plugin": "^1.5.2",
        "html-webpack-plugin": "^3.2.0",
        "three": "^0.95.0",
        "stats-webpack-plugin": "^0.7.0",
        "uglifyjs-webpack-plugin": "^2.0.1",
        "raw-loader": "^0.5.1",
        "xlsx": "^0.12.13",
        "vue": "^2.5.17",
        "promise.prototype.finally": "^3.1.0",
        "vue-class-component": "^6.3.2",
        "vue-codemirror": "^4.0.3",
        "vue-grid-layout": "^2.1.10",
        "vue-property-decorator": "^7.3.0",
        "vue-server-renderer": "^2.5.16",
        "vuex": "^2.5.0",
        "element-ui": "^1.4.13",
        "@vdian/vda-loader": "^2.5.0",
        "@vdian/vc-designer": "^2.0.0-alpha.35",
        "@vdian/vue.ex": "^1.3.4",
        "popper.js": "^1.14.3",
        "numbro": "^1.11.1",
        "blueimp-md5": "^2.10.0",
        "codemirror": "^5.33.0",
        "codemirror-minified": "^5.37.0",
        "@babel/core": "^7.0.0-beta.53",
        "@babel/preset-env": "^7.0.0-beta.53",
        "@babel/traverse": "^7.2.3",
        "babel-loader": "^8.0.0-beta.4",
        "babylon": "^6.18.0",
        "@hscmap/vue-menu": "2.8.1"
    },
    "husky": {
        "hooks": {
            "pre-commit": "pretty-quick --staged"
        }
    },
    "jest": {
        "verbose": true,
        "moduleFileExtensions": [
            "js",
            "json",
            "vue",
            "ts"
        ],
        "transform": {
            "^.+\\.js$": "babel-jest",
            "^.+\\.vue$": "vue-jest",
            "^.+\\.tsx?$": "ts-jest"
        },
        "transformIgnorePatterns": [
            "node_modules/(?!(@vdian/hotpot))"
        ],
        "testRegex": "(/__tests__/.*)\\.spec\\.(jsx?|tsx?)$",
        "globals": {
            "vue-jest": {
                "babelConfig": {
                    "presets": [
                        [
                            "env",
                            {
                                "modules": false
                            }
                        ]
                    ],
                    "plugins": [
                        "syntax-dynamic-import"
                    ],
                    "env": {
                        "test": {
                            "plugins": [
                                "dynamic-import-node"
                            ],
                            "presets": [
                                [
                                    "env",
                                    {
                                        "targets": {
                                            "node": "current"
                                        }
                                    }
                                ]
                            ]
                        }
                    }
                }
            },
            "ts-jest": {
                "diagnostics": false
            }
        }
    }
}

[dd1994]

here is the package.json, I re-install many times so the package.lock.json may deosn't matter(and it's too large to paset here). I use the local npm registry in my company, so some of package dependence you can't install it(it's private)