fix(cdk:popper): use shift middleware to keep popper in view (#1329)

IDuxFE · Dec 2, 2022 · 8152be1 · 8152be1
1 parent d0fb7fd
commit 8152be1
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/packages/cdk/popper/__tests__/__snapshots__/popper.spec.ts.snap b/packages/cdk/popper/__tests__/__snapshots__/popper.spec.ts.snap
@@ -12,12 +12,12 @@ exports[`usePopper > options > autoAdjust work 2`] = `
 
 exports[`usePopper > options > offset work 1`] = `
 "<div id=\\"trigger\\">Trigger</div>
-<div id=\\"overlay\\" style=\\"position: absolute; left: 4px; top: -4px;\\" data-popper-reference-hidden=\\"\\" data-popper-placement=\\"top\\">Popper</div>"
+<div id=\\"overlay\\" style=\\"position: absolute; left: 0px; top: -4px;\\" data-popper-reference-hidden=\\"\\" data-popper-placement=\\"top\\">Popper</div>"
 `;
 
 exports[`usePopper > options > offset work 2`] = `
 "<div id=\\"trigger\\">Trigger</div>
-<div id=\\"overlay\\" style=\\"position: absolute; left: 8px; top: -8px;\\" data-popper-reference-hidden=\\"\\" data-popper-placement=\\"top\\">Popper</div>"
+<div id=\\"overlay\\" style=\\"position: absolute; left: 0px; top: -8px;\\" data-popper-reference-hidden=\\"\\" data-popper-placement=\\"top\\">Popper</div>"
 `;
 
 exports[`usePopper > options > placement work 1`] = `

diff --git a/packages/cdk/popper/src/convertOptions.ts b/packages/cdk/popper/src/convertOptions.ts
@@ -5,9 +5,6 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import type { BaseOptions } from './composables/useOptions'
-import type { PopperPlacement } from './types'
-
 import { kebabCase } from 'lodash-es'
 
 import {
@@ -16,11 +13,14 @@ import {
   type Placement,
   flip,
   offset as offsetMiddleware,
+  shift,
 } from '@floating-ui/dom'
 
+import { type BaseOptions } from './composables/useOptions'
 import { arrow } from './middlewares/arrow'
 import { referenceHidden } from './middlewares/refenceHidden'
 import { updatePlacement } from './middlewares/updatePlacement'
+import { type PopperPlacement } from './types'
 
 export interface ExtraOptions {
   arrowElement: HTMLElement | undefined
@@ -41,6 +41,7 @@ export function convertOptions(baseOptions: BaseOptions, extraOptions: ExtraOpti
         crossAxis: offset[0],
       }),
       autoAdjust && flip({ padding: 4 }),
+      autoAdjust && shift(),
       ...middlewares,
       referenceHidden(),
       updatePlacement(_updatePlacement),