From b0565a14835a86fe15318ed9ab30ce051194c0b0 Mon Sep 17 00:00:00 2001
From: Zack Krida <zackkrida@pm.me>
Date: Wed, 11 May 2022 17:01:18 -0400
Subject: [PATCH] Make the popover positioning strategy configurable (#1415)

* Switch popper.js to use fixed positioning strategy

* Make the popover positioning strategy configurable

* Update pot file
---
 src/components/VFilters/VFilterChecklist.vue     |  1 +
 src/components/VPopover/VPopover.vue             | 14 ++++++++++++++
 src/components/VPopover/VPopoverContent.types.js |  9 +++++++++
 src/composables/use-popper.js                    |  9 +++++++--
 src/locales/po-files/openverse.pot               |  8 ++++----
 5 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/src/components/VFilters/VFilterChecklist.vue b/src/components/VFilters/VFilterChecklist.vue
index 822e2b9ce1..f4f600a124 100644
--- a/src/components/VFilters/VFilterChecklist.vue
+++ b/src/components/VFilters/VFilterChecklist.vue
@@ -24,6 +24,7 @@
       <!-- License explanation -->
       <VPopover
         v-if="filterType === 'licenses'"
+        strategy="fixed"
         :label="$t('browse-page.aria.license-explanation').toString()"
       >
         <template #trigger="{ a11yProps }">
diff --git a/src/components/VPopover/VPopover.vue b/src/components/VPopover/VPopover.vue
index e309088d20..a71d9ffe4d 100644
--- a/src/components/VPopover/VPopover.vue
+++ b/src/components/VPopover/VPopover.vue
@@ -23,6 +23,7 @@
       :visible="visibleRef"
       :trigger-element="triggerRef"
       :placement="placement"
+      :strategy="strategy"
       :hide-on-esc="hideOnEsc"
       :hide-on-click-outside="hideOnClickOutside"
       :auto-focus-on-show="autoFocusOnShow"
@@ -99,6 +100,19 @@ export default defineComponent({
         String
       ),
     },
+    /**
+     * The positioning strategy of the popover. If your reference element is in a fixed container
+     * use the fixed strategy; otherwise use the default, absolute strategy.
+     *
+     * @see https://popper.js.org/docs/v2/constructors/#strategy
+     *
+     * @default 'absolute'
+     */
+    strategy: {
+      type: /** @type {import('@nuxtjs/composition-api').PropType<import('@popperjs/core').PositioningStrategy>} */ (
+        String
+      ),
+    },
     /**
      * The label of the popover content. Must be provided if `labelledBy` is empty.
      *
diff --git a/src/components/VPopover/VPopoverContent.types.js b/src/components/VPopover/VPopoverContent.types.js
index 3f9ade4814..554bb88e2e 100644
--- a/src/components/VPopover/VPopoverContent.types.js
+++ b/src/components/VPopover/VPopoverContent.types.js
@@ -39,6 +39,15 @@ export const propTypes = {
     default: 'bottom-end',
     validate: (v) => popoverPlacements.includes(v),
   },
+  strategy: {
+    type: /** @type {import('@nuxtjs/composition-api').PropType<import('@popperjs/core').PositioningStrategy>} */ (
+      String
+    ),
+    default: 'absolute',
+    // todo: Use the actual PositioningStrategy type instead of manually writing these values,
+    // when this file is updated to TypeScript.
+    validate: (v) => ['absolute', 'fixed'].includes(v),
+  },
   zIndex: {
     type: Number,
   },
diff --git a/src/composables/use-popper.js b/src/composables/use-popper.js
index b9f01ca5cc..916649ca90 100644
--- a/src/composables/use-popper.js
+++ b/src/composables/use-popper.js
@@ -18,6 +18,7 @@ export function usePopper({ popoverRef, popoverPropsRefs }) {
     [
       popoverPropsRefs.visible,
       popoverPropsRefs.placement,
+      popoverPropsRefs.strategy,
       popoverPropsRefs.triggerElement,
       popoverRef,
     ],
@@ -26,12 +27,16 @@ export function usePopper({ popoverRef, popoverPropsRefs }) {
      * @param {unknown} _
      * @param {(cb: () => void) => void} onInvalidate
      */
-    ([visible, placement, triggerElement, popover], _, onInvalidate) => {
+    (
+      [visible, placement, strategy, triggerElement, popover],
+      _,
+      onInvalidate
+    ) => {
       if (!(triggerElement && popover)) return
 
       popperInstanceRef.value = createPopper(triggerElement, popover, {
         placement,
-        strategy: 'absolute',
+        strategy,
         modifiers: [
           {
             name: 'eventListeners',
diff --git a/src/locales/po-files/openverse.pot b/src/locales/po-files/openverse.pot
index ff21927479..6baab4e26f 100644
--- a/src/locales/po-files/openverse.pot
+++ b/src/locales/po-files/openverse.pot
@@ -4,7 +4,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: Openverse \n"
 "Report-Msgid-Bugs-To: https://github.com/wordpress/openverse/issues \n"
-"POT-Creation-Date: 2022-05-11T02:19:06+00:00\n"
+"POT-Creation-Date: 2022-05-11T19:21:48+00:00\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
@@ -142,7 +142,7 @@ msgid "Close"
 msgstr ""
 
 #. Do not translate words between ### ###.
-#: src/components/VFilters/VFilterChecklist.vue:138
+#: src/components/VFilters/VFilterChecklist.vue:139
 msgctxt "modal.close-named"
 msgid "Close ###name###"
 msgstr ""
@@ -764,7 +764,7 @@ msgctxt "browse-page.aria.remove-filter"
 msgid "remove filter"
 msgstr ""
 
-#: src/components/VFilters/VFilterChecklist.vue:27
+#: src/components/VFilters/VFilterChecklist.vue:28
 msgctxt "browse-page.aria.license-explanation"
 msgid "license explanation"
 msgstr ""
@@ -926,7 +926,7 @@ msgctxt "filters.license-explanation.more.read-more"
 msgid "Read more"
 msgstr ""
 
-#: src/components/VFilters/VFilterChecklist.vue:118
+#: src/components/VFilters/VFilterChecklist.vue:119
 msgctxt "filters.search-by.title"
 msgid "Search By"
 msgstr ""