fix: cascader auto adjust overflow, close #5482
							parent
							
								
									6d2bcf0ab8
								
							
						
					
					
						commit
						d5270e9a9d
					
				| 
						 | 
				
			
			@ -6,7 +6,9 @@ import { computed, ref, defineComponent } from 'vue';
 | 
			
		|||
import type { VueNode } from '../_util/type';
 | 
			
		||||
import type { DropdownRender, Placement, RenderDOMFunc } from './BaseSelect';
 | 
			
		||||
 | 
			
		||||
const getBuiltInPlacements = (adjustX: number) => {
 | 
			
		||||
const getBuiltInPlacements = (dropdownMatchSelectWidth: number | boolean) => {
 | 
			
		||||
  // Enable horizontal overflow auto-adjustment when a custom dropdown width is provided
 | 
			
		||||
  const adjustX = dropdownMatchSelectWidth === true ? 0 : 1;
 | 
			
		||||
  return {
 | 
			
		||||
    bottomLeft: {
 | 
			
		||||
      points: ['tl', 'bl'],
 | 
			
		||||
| 
						 | 
				
			
			@ -43,14 +45,6 @@ const getBuiltInPlacements = (adjustX: number) => {
 | 
			
		|||
  };
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
const getAdjustX = (
 | 
			
		||||
  adjustXDependencies: Pick<SelectTriggerProps, 'autoAdjustOverflow' | 'dropdownMatchSelectWidth'>,
 | 
			
		||||
) => {
 | 
			
		||||
  const { autoAdjustOverflow, dropdownMatchSelectWidth } = adjustXDependencies;
 | 
			
		||||
  if (!!autoAdjustOverflow) return 1;
 | 
			
		||||
  // Enable horizontal overflow auto-adjustment when a custom dropdown width is provided
 | 
			
		||||
  return typeof dropdownMatchSelectWidth !== 'number' ? 0 : 1;
 | 
			
		||||
};
 | 
			
		||||
export interface RefTriggerProps {
 | 
			
		||||
  getPopupElement: () => HTMLDivElement;
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			@ -72,7 +66,6 @@ export interface SelectTriggerProps {
 | 
			
		|||
  getPopupContainer?: RenderDOMFunc;
 | 
			
		||||
  dropdownAlign: object;
 | 
			
		||||
  empty: boolean;
 | 
			
		||||
  autoAdjustOverflow?: boolean;
 | 
			
		||||
  getTriggerDOMNode: () => any;
 | 
			
		||||
  onPopupVisibleChange?: (visible: boolean) => void;
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -90,7 +83,6 @@ const SelectTrigger = defineComponent<SelectTriggerProps, { popupRef: any }>({
 | 
			
		|||
    dropdownStyle: PropTypes.object,
 | 
			
		||||
    placement: String,
 | 
			
		||||
    empty: { type: Boolean, default: undefined },
 | 
			
		||||
    autoAdjustOverflow: { type: Boolean, default: undefined },
 | 
			
		||||
    prefixCls: String,
 | 
			
		||||
    popupClassName: String,
 | 
			
		||||
    animation: String,
 | 
			
		||||
| 
						 | 
				
			
			@ -107,13 +99,8 @@ const SelectTrigger = defineComponent<SelectTriggerProps, { popupRef: any }>({
 | 
			
		|||
  } as any,
 | 
			
		||||
  setup(props, { slots, attrs, expose }) {
 | 
			
		||||
    const builtInPlacements = computed(() => {
 | 
			
		||||
      const { autoAdjustOverflow, dropdownMatchSelectWidth } = props;
 | 
			
		||||
      return getBuiltInPlacements(
 | 
			
		||||
        getAdjustX({
 | 
			
		||||
          autoAdjustOverflow,
 | 
			
		||||
          dropdownMatchSelectWidth,
 | 
			
		||||
        }),
 | 
			
		||||
      );
 | 
			
		||||
      const { dropdownMatchSelectWidth } = props;
 | 
			
		||||
      return getBuiltInPlacements(dropdownMatchSelectWidth);
 | 
			
		||||
    });
 | 
			
		||||
    const popupRef = ref();
 | 
			
		||||
    expose({
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in New Issue