fix(dropdown): menu overflow

Tencent · Dec 8, 2022 · 5944b0c · 5944b0c
1 parent cbbe935
commit 5944b0c
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 6 deletions.
diff --git a/src/dropdown/dropdown-menu.tsx b/src/dropdown/dropdown-menu.tsx
@@ -1,6 +1,8 @@
 import { CreateElement } from 'vue';
 import { ScopedSlotReturnValue } from 'vue/types/vnode';
-import { defineComponent, h } from '@vue/composition-api';
+import {
+  defineComponent, h, ref, onMounted,
+} from '@vue/composition-api';
 import { ChevronRightIcon as TdChevronRightIcon, ChevronLeftIcon as TdChevronLeftIcon } from 'tdesign-icons-vue';
 import isFunction from 'lodash/isFunction';
 
@@ -17,7 +19,8 @@ export default defineComponent({
   setup(props, { emit }) {
     const dropdownClass = usePrefixClass('dropdown');
     const dropdownMenuClass = usePrefixClass('dropdown__menu');
-
+    const menuRef = ref<HTMLElement>();
+    const isOverMaxHeight = ref(false);
     const handleItemClick = (
       optionItem: { disabled: boolean; children: unknown },
       options: { data: DropdownOption; context: { e: MouseEvent } },
@@ -30,10 +33,19 @@ export default defineComponent({
       emit('click', data, context);
     };
 
+    onMounted(() => {
+      if (menuRef.value) {
+        const menuHeight = parseInt(window?.getComputedStyle(menuRef.value).height, 10);
+        if (menuHeight >= props.maxHeight) isOverMaxHeight.value = true;
+      }
+    });
+
     return {
       dropdownClass,
       dropdownMenuClass,
       handleItemClick,
+      menuRef,
+      isOverMaxHeight,
     };
   },
   methods: {
@@ -141,7 +153,14 @@ export default defineComponent({
   render() {
     return (
       <div
-        class={[this.dropdownMenuClass, `${this.dropdownMenuClass}--${this.direction}`]}
+        class={[
+          this.dropdownMenuClass,
+          `${this.dropdownMenuClass}--${this.direction}`,
+          {
+            [`${this.dropdownMenuClass}--overflow`]: this.isOverMaxHeight,
+          },
+        ]}
+        ref="menuRef"
         style={{
           maxHeight: `${this.maxHeight}px`,
         }}

diff --git a/src/dropdown/dropdown.tsx b/src/dropdown/dropdown.tsx
@@ -13,7 +13,7 @@ export default defineComponent({
   props: { ...props },
   setup(props: TdDropdownProps, { emit }) {
     const dropdownClass = usePrefixClass('dropdown');
-    const isPopupVisible = ref(false);
+    const isPopupVisible = ref(true);
 
     const handleMenuClick = (data: DropdownOption, context: { e: MouseEvent }) => {
       if (props.hideAfterItemClick) {
@@ -25,7 +25,7 @@ export default defineComponent({
     };
 
     const handleVisibleChange = (visible: boolean, context: PopupVisibleChangeContext) => {
-      isPopupVisible.value = visible;
+      // isPopupVisible.value = visible;
       props.popupProps?.onVisibleChange?.(visible, context);
     };
 

diff --git a/src/popup/popup.tsx b/src/popup/popup.tsx
@@ -236,7 +236,6 @@ export default mixins(classPrefixMixins).extend({
       const triggerEl = this.$el as HTMLElement;
       const overlayEl = this.$refs?.overlay as HTMLElement;
 
-      if (!triggerEl || !overlayEl) return;
       if (typeof overlayStyle === 'function') {
         return overlayStyle(triggerEl, overlayEl);
       }