fix: cannot select when use custom prefixCls #5023

Author: tangjinzhou

components/auto-complete/index.tsx

@@ -34,7 +34,7 @@ const AutoComplete = defineComponent({
     ...autoCompleteProps,
     prefixCls: PropTypes.string,
     showSearch: PropTypes.looseBool,
-    transitionName: PropTypes.string.def('ant-slide-up'),
+    transitionName: PropTypes.string,
     choiceTransitionName: PropTypes.string.def('zoom'),
     autofocus: PropTypes.looseBool,
     backfill: PropTypes.looseBool,

components/cascader/index.tsx

@@ -28,6 +28,7 @@ import { tuple, withInstall } from '../_util/type';
 import type { RenderEmptyHandler } from '../config-provider/renderEmpty';
 import { useInjectFormItemContext } from '../form/FormItemContext';
 import omit from '../_util/omit';
+import { getTransitionName } from '../_util/transition';
 
 export interface CascaderOptionType {
   value?: string | number;
@@ -113,7 +114,7 @@ const cascaderProps = {
   // onChange?: (value: string[], selectedOptions?: CascaderOptionType[]) => void;
   /** 选择后展示的渲染函数 */
   displayRender: PropTypes.func,
-  transitionName: PropTypes.string.def('ant-slide-up'),
+  transitionName: PropTypes.string,
   popupStyle: PropTypes.object.def(() => ({})),
   /** 自定义浮层类名 */
   popupClassName: PropTypes.string,
@@ -487,6 +488,7 @@ const Cascader = defineComponent({
     } = extraAttrs;
     const getPrefixCls = this.configProvider.getPrefixCls;
     const renderEmpty = this.configProvider.renderEmpty;
+    const rootPrefixCls = getPrefixCls();
     const prefixCls = getPrefixCls('cascader', customizePrefixCls);
     const inputPrefixCls = getPrefixCls('input', customizeInputPrefixCls);
 
@@ -636,6 +638,7 @@ const Cascader = defineComponent({
       ...onEvents,
       onPopupVisibleChange: this.handlePopupVisibleChange,
       onChange: this.handleChange,
+      transitionName: getTransitionName(rootPrefixCls, 'slide-up', props.transitionName),
     };
     return <VcCascader {...cascaderProps}>{input}</VcCascader>;
   },

components/menu/src/Menu.tsx

@@ -75,7 +75,7 @@ export default defineComponent({
   ],
   slots: ['expandIcon', 'overflowedIndicator'],
   setup(props, { slots, emit, attrs }) {
-    const { prefixCls, direction } = useConfigInject('menu', props);
+    const { prefixCls, direction, getPrefixCls } = useConfigInject('menu', props);
     const store = ref<Record<string, StoreMenuInfo>>({});
     const siderCollapsed = inject(SiderCollapsedKey, ref(undefined));
     const inlineCollapsed = computed(() => {
@@ -293,12 +293,12 @@ export default defineComponent({
         [`${prefixCls.value}-${props.theme}`]: true,
       };
     });
-
-    const defaultMotions = {
-      horizontal: { name: `ant-slide-up` },
+    const rootPrefixCls = computed(() => getPrefixCls());
+    const defaultMotions = computed(() => ({
+      horizontal: { name: `${rootPrefixCls.value}-slide-up` },
       inline: collapseMotion,
-      other: { name: `ant-zoom-big` },
-    };
+      other: { name: `${rootPrefixCls.value}-zoom-big` },
+    }));
 
     useProvideFirstLevel(true);
 
@@ -381,7 +381,7 @@ export default defineComponent({
       inlineCollapsed: mergedInlineCollapsed,
       antdMenuTheme: computed(() => props.theme),
       siderCollapsed,
-      defaultMotions: computed(() => (isMounted.value ? defaultMotions : null)),
+      defaultMotions: computed(() => (isMounted.value ? defaultMotions.value : null)),
       motion: computed(() => (isMounted.value ? props.motion : null)),
       overflowDisabled: ref(undefined),
       onOpenChange: onInternalOpenChange,

components/select/index.tsx

@@ -9,6 +9,7 @@ import { tuple } from '../_util/type';
 import useConfigInject from '../_util/hooks/useConfigInject';
 import omit from '../_util/omit';
 import { useInjectFormItemContext } from '../form/FormItemContext';
+import { getTransitionName } from '../_util/transition';
 
 type RawValue = string | number;
 
@@ -37,7 +38,7 @@ export const selectProps = () => ({
   size: PropTypes.oneOf(tuple('small', 'middle', 'large', 'default')),
   mode: PropTypes.oneOf(tuple('multiple', 'tags', 'SECRET_COMBOBOX_MODE_DO_NOT_USE')),
   bordered: PropTypes.looseBool.def(true),
-  transitionName: PropTypes.string.def('ant-slide-up'),
+  transitionName: PropTypes.string,
   choiceTransitionName: PropTypes.string.def(''),
 });
 
@@ -89,7 +90,11 @@ const Select = defineComponent({
 
       return mode;
     });
-    const { prefixCls, direction, configProvider } = useConfigInject('select', props);
+    const { prefixCls, direction, configProvider, getPrefixCls } = useConfigInject('select', props);
+    const rootPrefixCls = computed(() => getPrefixCls());
+    const transitionName = computed(() =>
+      getTransitionName(rootPrefixCls.value, 'slide-up', props.transitionName),
+    );
     const mergedClassName = computed(() =>
       classNames({
         [`${prefixCls.value}-lg`]: props.size === 'large',
@@ -189,6 +194,7 @@ const Select = defineComponent({
           id={id}
           dropdownRender={selectProps.dropdownRender || slots.dropdownRender}
           v-slots={{ option: slots.option }}
+          transitionName={transitionName.value}
         >
           {slots.default?.()}
         </RcSelect>

components/tree-select/index.tsx

@@ -57,7 +57,6 @@ const TreeSelect = defineComponent({
   name: 'ATreeSelect',
   inheritAttrs: false,
   props: initDefaultProps(treeSelectProps, {
-    transitionName: 'ant-slide-up',
     choiceTransitionName: '',
     listHeight: 256,
     treeIcon: false,
@@ -101,7 +100,15 @@ const TreeSelect = defineComponent({
       dropdownMatchSelectWidth,
       size,
       getPopupContainer,
+      getPrefixCls,
     } = useConfigInject('select', props);
+    const rootPrefixCls = computed(() => getPrefixCls());
+    const transitionName = computed(() =>
+      getTransitionName(rootPrefixCls.value, 'slide-up', props.transitionName),
+    );
+    const choiceTransitionName = computed(() =>
+      getTransitionName(rootPrefixCls.value, '', props.choiceTransitionName),
+    );
     const treePrefixCls = computed(() =>
       configProvider.getPrefixCls('select-tree', props.prefixCls),
     );
@@ -154,8 +161,6 @@ const TreeSelect = defineComponent({
         listItemHeight,
         multiple,
         treeIcon,
-        transitionName,
-        choiceTransitionName,
         treeLine,
         switcherIcon = slots.switcherIcon?.(),
         fieldNames = props.replaceFields,
@@ -197,7 +202,6 @@ const TreeSelect = defineComponent({
         },
         attrs.class,
       );
-      const rootPrefixCls = configProvider.getPrefixCls();
       const otherProps: any = {};
       if (props.treeData === undefined && slots.default) {
         otherProps.children = flattenChildren(slots.default());
@@ -227,8 +231,7 @@ const TreeSelect = defineComponent({
           getPopupContainer={getPopupContainer.value}
           treeMotion={null}
           dropdownClassName={mergedDropdownClassName.value}
-          choiceTransitionName={getTransitionName(rootPrefixCls, '', choiceTransitionName)}
-          transitionName={getTransitionName(rootPrefixCls, 'slide-up', transitionName)}
+          choiceTransitionName={choiceTransitionName.value}
           onChange={handleChange}
           onBlur={handleBlur}
           onSearch={handleSearch}
@@ -238,6 +241,7 @@ const TreeSelect = defineComponent({
             treeCheckable: () => <span class={`${prefixCls.value}-tree-checkbox-inner`} />,
           }}
           {...otherProps}
+          transitionName={transitionName.value}
         />
       );
     };