From 4c4be7da3ab006ddfb7160f7a8b8bba6c0eb0597 Mon Sep 17 00:00:00 2001
From: MaySoMusician <maysomusician@gmail.com>
Date: Thu, 29 Apr 2021 16:27:05 +0900
Subject: [PATCH] fix: make CPopper's modifiers to be correctly merged

---
 .../chakra-ui-core/src/CPopper/CPopper.js     | 23 ++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/packages/chakra-ui-core/src/CPopper/CPopper.js b/packages/chakra-ui-core/src/CPopper/CPopper.js
index d495e05b..44fd5c0e 100644
--- a/packages/chakra-ui-core/src/CPopper/CPopper.js
+++ b/packages/chakra-ui-core/src/CPopper/CPopper.js
@@ -42,6 +42,27 @@ function flipPlacement (placement) {
   }
 }
 
+/**
+ * Call _.merge() for each item of `object` array with the corresponding
+ * item of `source` array
+ * @param {*} object The destination Modifiers array.
+ * @param {*} source The source array.
+ * @returns Returns merged `array`
+ */
+function mergeModifiers (object, source) {
+  if (!Array.isArray(object)) throw new Error('`object` must be an array')
+
+  const _source = Array.isArray(source) ? source : [source]
+
+  object.forEach((o) => {
+    const { name } = o
+    const _s = _source.find(s => s.name === name)
+    if (_s) merge(o, _s)
+  })
+
+  return object
+}
+
 /**
  * CPopper component
  *
@@ -153,7 +174,7 @@ const CPopper = {
       return ref
     },
     computedModifiers () {
-      return merge([
+      return mergeModifiers([
         this.usePortal && {
           name: 'preventOverflow',
           options: {