fix: memory leak when positioning with popper (#1094)

* fix: memory leak when positioning with popper
* docs: update calculate position docs

Co-authored-by: Jeff <sagalbot@gmail.com>

docs/.vuepress/components/PositionedWithPopper.vue

@@ -22,7 +22,7 @@ import { createPopper } from '@popperjs/core';
 export default {
   data: () => ({countries, placement: 'top'}),
   methods: {
-    withPopper (dropdownList, component, {width},) {
+    withPopper (dropdownList, component, {width}) {
       /**
        * We need to explicitly define the dropdown width since
        * it is usually inherited from the parent with CSS.
@@ -39,7 +39,7 @@ export default {
        * wrapper so that we can set some styles for when the dropdown is placed
        * above.
        */
-      createPopper(component.$refs.toggle, dropdownList, {
+      const popper = createPopper(component.$refs.toggle, dropdownList, {
         placement: this.placement,
         modifiers: [
           {
@@ -56,6 +56,12 @@ export default {
             },
           }]
       });
+
+      /**
+       * To prevent memory leaks Popper needs to be destroyed.
+       * If you return function, it will be called just before dropdown is removed from DOM.
+       */
+      return () => popper.destroy();
     }
   }
 };

docs/api/props.md

@@ -128,6 +128,9 @@ transition: {
 
 When `appendToBody` is true, this function is responsible for positioning the drop down list.
 
+If a function is returned from `calculatePosition`, it will be called when the drop down list
+is removed from the DOM. This allows for any garbage collection you may need to do.
+
 See [Dropdown Position](../guide/positioning.md) for more details.
 
 ```js
@@ -139,6 +142,7 @@ calculatePosition: {
      * @param width {string} calculated width in pixels of the dropdown menu
      * @param top {string} absolute position top value in pixels relative to the document
      * @param left {string} absolute position left value in pixels relative to the document
+     * @return {function|void}
      */
     default(dropdownList, component, {width, top, left}) {
       dropdownList.style.top = top;