bug fixed #457

Author: huangshuwei

packages/ve-contextmenu/src/index.jsx

@@ -156,10 +156,13 @@ export default {
 
     watch: {
         options: {
-            handler: function () {
-                this.rootContextmenuId = this.getRandomIdWithPrefix();
-                this.createInternalOptions();
-                this.createPanelOptions({ options: this.internalOptions });
+            handler: function (val) {
+                if (Array.isArray(val) && val.length > 0) {
+                    this.rootContextmenuId = this.getRandomIdWithPrefix();
+                    this.createInternalOptions();
+                    this.createPanelOptions({ options: this.internalOptions });
+                    this.addRootContextmenuPanelToBody();
+                }
             },
             immediate: true,
         },
@@ -327,14 +330,16 @@ export default {
             event.preventDefault();
             const { rootContextmenuId } = this;
 
-            // refresh contextmenu
-            this.resetContextmenu();
-            this.showContextmenuPanel({
-                event,
-                contextmenuId: rootContextmenuId,
-                isRootContextmenu: true,
-            });
-            this.isPanelsEmptyed = false;
+            if (rootContextmenuId) {
+                // refresh contextmenu
+                this.resetContextmenu();
+                this.showContextmenuPanel({
+                    event,
+                    contextmenuId: rootContextmenuId,
+                    isRootContextmenu: true,
+                });
+                this.isPanelsEmptyed = false;
+            }
         },
 
         // show contextmenu panel
@@ -507,9 +512,11 @@ export default {
 
         // add root contextmenu panel to body
         addRootContextmenuPanelToBody() {
-            this.addContextmenuPanelToBody({
-                contextmenuId: this.rootContextmenuId,
-            });
+            if (this.rootContextmenuId) {
+                this.addContextmenuPanelToBody({
+                    contextmenuId: this.rootContextmenuId,
+                });
+            }
         },
 
         // register contextmenu event

packages/ve-table/src/index.jsx

@@ -1948,11 +1948,9 @@ export default {
         this.parentRendered = true;
 
         // set contextmenu event target
-        if (this.hasContextmenu) {
-            this.contextmenuEventTarget = this.$el.querySelector(
-                `.${clsName("body")}`,
-            );
-        }
+        this.contextmenuEventTarget = this.$el.querySelector(
+            `.${clsName("body")}`,
+        );
 
         // create hook instance
         this.hooks = new Hooks();

tests/unit/specs/ve-contextmenu.spec.js

@@ -163,6 +163,67 @@ describe("veContextmenu", () => {
         wrapper.destroy();
     });
 
+    it("contextmenu async contextmenu option", async () => {
+        const wrapper = mount(
+            {
+                render() {
+                    return (
+                        <div>
+                            <ve-contextmenu
+                                eventTarget={document.querySelector(
+                                    "#contextmenu-target",
+                                )}
+                                options={this.options}
+                            />
+                        </div>
+                    );
+                },
+                data() {
+                    return {
+                        options: [],
+                    };
+                },
+            },
+            // need attach to documnet
+            { attachTo: document.body },
+        );
+
+        const contextmenuTargetEl = document.querySelector(
+            "#contextmenu-target",
+        );
+
+        //trigger element hover
+        const event = new MouseEvent("contextmenu", {
+            view: window, // window
+            bubbles: true,
+            cancelable: true,
+        });
+
+        contextmenuTargetEl.dispatchEvent(event);
+
+        await later();
+
+        const contextmenuPoppers = document.querySelectorAll(
+            ".ve-contextmenu-popper",
+        );
+        expect(contextmenuPoppers.length).toBe(0);
+
+        wrapper.vm.options = OPTIONS;
+
+        await later();
+
+        contextmenuTargetEl.dispatchEvent(event);
+
+        await later();
+
+        const contextmenuPoppers2 = document.querySelectorAll(
+            ".ve-contextmenu-popper",
+        );
+        expect(contextmenuPoppers2.length).toBe(1);
+
+        wrapper.destroy();
+    });
+
     it("contextmenu eventTarget", async () => {
         const wrapper = mount(
             {