{"action":"created","issue":{"url":"https://api.github.com/repos/infor-design/enterprise-ng/issues/84","repository_url":"https://api.github.com/repos/infor-design/enterprise-ng","labels_url":"https://api.github.com/repos/infor-design/enterprise-ng/issues/84/labels{/name}","comments_url":"https://api.github.com/repos/infor-design/enterprise-ng/issues/84/comments","events_url":"https://api.github.com/repos/infor-design/enterprise-ng/issues/84/events","html_url":"https://github.com/infor-design/enterprise-ng/issues/84","id":329412656,"node_id":"MDU6SXNzdWUzMjk0MTI2NTY=","number":84,"title":"Context menu breaks after toggling the element DOM","user":{"login":"volante007","id":1101770,"node_id":"MDQ6VXNlcjExMDE3NzA=","avatar_url":"https://avatars1.githubusercontent.com/u/1101770?v=4","gravatar_id":"","url":"https://api.github.com/users/volante007","html_url":"https://github.com/volante007","followers_url":"https://api.github.com/users/volante007/followers","following_url":"https://api.github.com/users/volante007/following{/other_user}","gists_url":"https://api.github.com/users/volante007/gists{/gist_id}","starred_url":"https://api.github.com/users/volante007/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/volante007/subscriptions","organizations_url":"https://api.github.com/users/volante007/orgs","repos_url":"https://api.github.com/users/volante007/repos","events_url":"https://api.github.com/users/volante007/events{/privacy}","received_events_url":"https://api.github.com/users/volante007/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2018-06-05T11:24:09Z","updated_at":"2018-06-05T13:38:55Z","closed_at":null,"author_association":"NONE","body":"**Description**\r\nWhen an element using soho-context-menu is toggled using *ngIf, the connected soho-popupmenu is destroyed and removed from DOM when the soho-context-menu is destroyed. This causes issues when several elements share the same soho-popupmenu, or if the toggled element is later shown.\r\n\r\n**To Reproduce**\r\n1. Edit \\app\\context-menu\\context-menu.html sample to use *ngIf toggle\r\n```\r\n<div class=\"field\">\r\n    <label id=\"label1\" name=\"label1\" soho-label for=\"field1\" >{{normalText}}</label>\r\n    <input id=\"field1\" name=\"field1\" soho-context-menu menu=\"action-popupmenu\" value=\"Right Click Here\"\r\n           *ngIf=\"!hideInput\"\r\n           (selected)=\"onSelected()\"\r\n           (beforeopen)=\"onBeforeOpen()\"\r\n           (close)=\"onClose()\"\r\n           (open)=\"onOpen()\" />\r\n  </div>\r\n  <button soho-button=\"tertiary\" (click)=\"hideInput = !hideInput\">Toggle Input field</button>\r\n```\r\n2. Run the sample\r\n3. Right-click the various elements that share the same soho-popupmenu element (works fine)\r\n4. Remove input field by clicking the Toggle Input field button\r\n5. Re-add input field by clicking the Toggle Input field button again\r\n6. Right-click any of the elements that use the soho-popupmenu\r\n\r\n**Expected behavior**\r\nPopup-menu is shown on right-click\r\n\r\n**Actual behavior**\r\nPopup-menu is not shown. If right-clicking the toggled element, error is shown in console.\r\n\r\n**Screenshots**\r\nAttached a GIF showing the issue in sample\r\n\r\n**Additional context**\r\nI think sharing a menu between several different items is a common scenario, and this is no longer possible if any of the elements is removed from DOM (temporarily or not). In Homepages Menu widget, all the links / folders share the same context popup-menu, and when navigating between different links, context menu can no longer be used.\r\n\r\nThe issue was introduced when properly destroying the popup menu in context-menu-directive.ts.\r\nhttps://github.com/infor-design/enterprise-ng/commit/9ce090817f961043cf8fb806d732ab7315b9d2b0#diff-864e73c329d001149d6cca6689f37fc4\r\n\r\n(it used to set it to null only, but is now fully destroyed, unwrapped and removed from DOM with        this.contextMenu.destroy() )\r\n\r\n**Possible solution**\r\nWould it be possible to have an @Input to soho-context-menu, `unwrapOnDestroy` or similar, that defaults to false? If so, do not destroy and remove connected popupmenu from DOM.\r\n\r\n![toggle-menu](https://user-images.githubusercontent.com/1101770/40973120-525fb348-68c3-11e8-95a6-e3ac66abc901.gif)\r\n\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/infor-design/enterprise-ng/issues/comments/394712316","html_url":"https://github.com/infor-design/enterprise-ng/issues/84#issuecomment-394712316","issue_url":"https://api.github.com/repos/infor-design/enterprise-ng/issues/84","id":394712316,"node_id":"MDEyOklzc3VlQ29tbWVudDM5NDcxMjMxNg==","user":{"login":"volante007","id":1101770,"node_id":"MDQ6VXNlcjExMDE3NzA=","avatar_url":"https://avatars1.githubusercontent.com/u/1101770?v=4","gravatar_id":"","url":"https://api.github.com/users/volante007","html_url":"https://github.com/volante007","followers_url":"https://api.github.com/users/volante007/followers","following_url":"https://api.github.com/users/volante007/following{/other_user}","gists_url":"https://api.github.com/users/volante007/gists{/gist_id}","starred_url":"https://api.github.com/users/volante007/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/volante007/subscriptions","organizations_url":"https://api.github.com/users/volante007/orgs","repos_url":"https://api.github.com/users/volante007/repos","events_url":"https://api.github.com/users/volante007/events{/privacy}","received_events_url":"https://api.github.com/users/volante007/received_events","type":"User","site_admin":false},"created_at":"2018-06-05T13:38:55Z","updated_at":"2018-06-05T13:38:55Z","author_association":"NONE","body":"In sample:\r\n\r\n```\r\n <!-- Context menu used in all examples (except the menu button)-->\r\n  <ul soho-popupmenu id=\"action-popupmenu\" >\r\n    <li soho-popupmenu-item *ngFor=\"let menuEntry of contextEntries\" [isDisabled]=\"menuEntry.disabled\">\r\n      <a soho-popupmenu-label *ngIf=\"!menuEntry.url\" menuId=\"{{menuEntry.id}}\"  >{{menuEntry.displayString}}</a>\r\n      <a soho-popupmenu-label *ngIf=\"menuEntry.url\" menuUrl=\"{{menuEntry.url}}\" >{{menuEntry.displayString}}</a>\r\n    </li>\r\n  </ul>\r\n```\r\nI've not seen any samples of soho-popupmenu / soho-context-menu where the wrapper is included. But even if the wrapper is included, it will still be removed from DOM, not moved around?\r\n\r\n` wrapper.off().remove();`\r\n\r\nLine 2096 in teardown(), popupmenu.js"}}
{"actor":{"display_login":"volante007"}}