From 36b10bffae3ccd34539114f1786ddea8a7d5921f Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 9 Aug 2023 19:45:42 +0530
Subject: [PATCH] fix: added nested popover component to create sort and filter
 popover

frappe-ui popover doesn't work because if there is another popover inside popover if we click on second one the first gets closed there is not nested popover support
---
 frontend/src/components/NestedPopover.vue | 60 +++++++++++++++++++++++
 1 file changed, 60 insertions(+)
 create mode 100644 frontend/src/components/NestedPopover.vue

diff --git a/frontend/src/components/NestedPopover.vue b/frontend/src/components/NestedPopover.vue
new file mode 100644
index 00000000..48e5b3d5
--- /dev/null
+++ b/frontend/src/components/NestedPopover.vue
@@ -0,0 +1,60 @@
+<template>
+  <Popover v-slot="{ open }">
+    <PopoverButton
+      as="div"
+      ref="reference"
+      @click="updatePosition"
+      @focusin="updatePosition"
+      @keydown="updatePosition"
+      v-slot="{ open }"
+    >
+      <slot name="target" v-bind="{ open }" />
+    </PopoverButton>
+    <div v-show="open">
+      <PopoverPanel
+        v-slot="{ open, close }"
+        ref="popover"
+        static
+        class="z-[100]"
+      >
+        <slot name="body" v-bind="{ open, close }" />
+      </PopoverPanel>
+    </div>
+  </Popover>
+</template>
+
+<script setup>
+import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
+import { createPopper } from '@popperjs/core'
+import { nextTick, ref, onBeforeUnmount } from 'vue'
+
+const props = defineProps({
+  placement: {
+    type: String,
+    default: 'bottom-start',
+  },
+})
+
+const reference = ref(null)
+const popover = ref(null)
+
+let popper = ref(null)
+
+function setupPopper() {
+  if (!popper.value) {
+    popper.value = createPopper(reference.value.el, popover.value.el, {
+      placement: props.placement,
+    })
+  } else {
+    popper.value.update()
+  }
+}
+
+function updatePosition() {
+  nextTick(() => setupPopper())
+}
+
+onBeforeUnmount(() => {
+  popper.value?.destroy()
+})
+</script>