From f29b188c8461aea9e4427b2a7bdd4f5412ae3073 Mon Sep 17 00:00:00 2001
From: msidolphin <msidolphin@outlook.com>
Date: Mon, 31 May 2021 14:29:25 +0800
Subject: [PATCH] fix: fix popper in dialog isn't enough space to position
 problem (#2102)

Co-authored-by: yangyu8 <yangyu8@kingsoft.com>
---
 packages/popper/src/use-popper/build-modifiers.ts | 5 ++++-
 packages/popper/src/use-popper/defaults.ts        | 8 +++++++-
 packages/popper/src/use-popper/popper-options.ts  | 2 ++
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/popper/src/use-popper/build-modifiers.ts b/packages/popper/src/use-popper/build-modifiers.ts
index 38b16a3048..9a519dba1e 100644
--- a/packages/popper/src/use-popper/build-modifiers.ts
+++ b/packages/popper/src/use-popper/build-modifiers.ts
@@ -1,10 +1,11 @@
-import type { StrictModifiers } from '@popperjs/core'
+import type { StrictModifiers, Placement } from '@popperjs/core'
 
 interface ModifierProps {
   offset?: number
   arrow?: HTMLElement
   arrowOffset?: number
   gpuAcceleration?: boolean
+  fallbackPlacements?: Array<Placement>
 }
 
 export default function buildModifier(props: ModifierProps, externalModifiers: StrictModifiers[] = []) {
@@ -14,6 +15,7 @@ export default function buildModifier(props: ModifierProps, externalModifiers: S
     arrowOffset,
     offset,
     gpuAcceleration,
+    fallbackPlacements,
   } = props
 
   const modifiers: Array<StrictModifiers> = [
@@ -38,6 +40,7 @@ export default function buildModifier(props: ModifierProps, externalModifiers: S
       name: 'flip',
       options: {
         padding: 5,
+        fallbackPlacements: fallbackPlacements ?? [],
       },
     },
     {
diff --git a/packages/popper/src/use-popper/defaults.ts b/packages/popper/src/use-popper/defaults.ts
index 0b4f7c48e2..232a0e7a17 100644
--- a/packages/popper/src/use-popper/defaults.ts
+++ b/packages/popper/src/use-popper/defaults.ts
@@ -1,4 +1,4 @@
-import type { PropType } from 'vue'
+import type { PropType  } from 'vue'
 import type { Placement, PositioningStrategy, Instance as PopperInstance, Options } from '@popperjs/core'
 
 export enum Effect {
@@ -35,9 +35,11 @@ export type IPopperOptions = {
   visible: boolean
   stopPopperMouseEvent: boolean
   gpuAcceleration: boolean
+  fallbackPlacements: Array<Placement>
 }
 
 export const DEFAULT_TRIGGER = 'hover'
+const DEFAULT_FALLBACK_PLACEMENTS = ['auto']
 
 export default {
   // the arrow size is an equailateral triangle with 10px side length, the 3rd side length ~ 14.1px
@@ -144,4 +146,8 @@ export default {
     type: Boolean,
     default: true,
   },
+  fallbackPlacements: {
+    type: Array as PropType<Placement[]>,
+    default: DEFAULT_FALLBACK_PLACEMENTS,
+  },
 }
diff --git a/packages/popper/src/use-popper/popper-options.ts b/packages/popper/src/use-popper/popper-options.ts
index 776400b59f..2c17f2696f 100644
--- a/packages/popper/src/use-popper/popper-options.ts
+++ b/packages/popper/src/use-popper/popper-options.ts
@@ -10,6 +10,7 @@ interface IUsePopperProps {
   offset: number
   placement: Placement
   gpuAcceleration: boolean
+  fallbackPlacements: Array<Placement>
 }
 
 interface IUsePopperState {
@@ -27,6 +28,7 @@ export default function usePopperOptions(props: IUsePopperProps, state: IUsePopp
         arrowOffset: props.arrowOffset,
         offset: props.offset,
         gpuAcceleration: props.gpuAcceleration,
+        fallbackPlacements: props.fallbackPlacements,
       }, props.popperOptions?.modifiers),
     }
   })