ElemeFE / ElemeFE/element

[Bug Fixed]Dropdown don't need preventOverflow in some case

Open
#22,634 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
Vue
Stars
54k
Forks
14.4k
PR merge metrics
No merged PRs in 30d

Description

Hi! 👋

Firstly, thanks for your work on this project! 🙂

# Fix the problem

![CleanShot 2023-08-04 at 15 36 11](https://github.com/ElemeFE/element/assets/16633962/0303aaa5-5a85-4924-8b25-48dbcbd71fac)

The dropdown height is more large than viewport height, in this case, we don't need to preventOverflow.

Today I used [patch-package](https://github.com/ds300/patch-package) to patch `element-ui@2.12.0` for the project I'm working on.

Here is the diff that solved my problem:

```diff
diff --git a/node_modules/element-ui/lib/utils/popper.js b/node_modules/element-ui/lib/utils/popper.js
index 4550020..b8633f6 100644
--- a/node_modules/element-ui/lib/utils/popper.js
+++ b/node_modules/element-ui/lib/utils/popper.js
@@ -726,6 +726,16 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
},
bottom: function bottom() {
var top = popper.top;
+ // here will make popper be more top
+ // but after preventOverflow, it will be flipped
+ // so when flipped top < 0, we don't need to flipped, so we don't need to be more top
+ // use `data.instance._reference.getBoundingClientRect().top` rather than `data.offsets.reference.top`
+ // because `data.offsets.reference.top` is the distance to the top of document
+ // not the distance to the top of viewport
+ const flippedTop = data.instance._reference.getBoundingClientRect().top - popper.height;
+ if (flippedTop < 0) {
+ return { top: top };
+ }
if (popper.bottom > data.boundaries.bottom) {
top = Math.min(popper.top, data.boundaries.bottom - popper.height);
}
```

This issue body was [partially generated by patch-package](https://github.com/ds300/patch-package/issues/296).

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.