fix: select class not update #4194

components/select/index.tsx

@@ -1,12 +1,12 @@
-import { computed, defineComponent, inject, ref, VNodeChild, App, PropType, Plugin } from 'vue';
+import { computed, defineComponent, ref, VNodeChild, App, PropType, Plugin } from 'vue';
 import omit from 'omit.js';
 import classNames from '../_util/classNames';
 import RcSelect, { Option, OptGroup, SelectProps as RcSelectProps, BaseProps } from '../vc-select';
 import { OptionProps as OptionPropsType } from '../vc-select/Option';
-import { defaultConfigProvider } from '../config-provider';
 import getIcons from './utils/iconUtil';
 import PropTypes from '../_util/vue-types';
 import { tuple } from '../_util/type';
+import useConfigInject from '../_util/hooks/useConfigInject';
 
 type RawValue = string | number;
 
@@ -74,11 +74,10 @@ const Select = defineComponent({
   props: SelectProps(),
   SECRET_COMBOBOX_MODE_DO_NOT_USE: 'SECRET_COMBOBOX_MODE_DO_NOT_USE',
   emits: ['change', 'update:value'],
-  setup(props: any, { attrs, emit }) {
+  slots: ['notFoundContent', 'suffixIcon', 'itemIcon', 'removeIcon', 'clearIcon', 'dropdownRender'],
+  setup(props, { attrs, emit, slots, expose }) {
     const selectRef = ref(null);
 
-    const configProvider = inject('configProvider', defaultConfigProvider);
-
     const focus = () => {
       if (selectRef.value) {
         selectRef.value.focus();
@@ -104,60 +103,37 @@ const Select = defineComponent({
 
       return mode;
     });
-    const prefixCls = computed(() => {
+    const { prefixCls, direction, configProvider } = useConfigInject('select', props);
-      return configProvider.getPrefixCls('select', props.prefixCls);
-    });
     const mergedClassName = computed(() =>
-      classNames(
+      classNames({
-        {
         [`${prefixCls.value}-lg`]: props.size === 'large',
         [`${prefixCls.value}-sm`]: props.size === 'small',
-          [`${prefixCls.value}-rtl`]: props.direction === 'rtl',
+        [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
         [`${prefixCls.value}-borderless`]: !props.bordered,
-        },
+      }),
-        attrs.class,
-      ),
     );
     const triggerChange = (...args: any[]) => {
       emit('update:value', args[0]);
       emit('change', ...args);
     };
-    return {
+    expose({
-      selectRef,
-      mergedClassName,
-      mode,
-      focus,
       blur,
-      configProvider,
+      focus,
-      triggerChange,
+    });
-      prefixCls,
+    return () => {
-    };
-  },
-  render() {
-    const {
-      configProvider,
-      mode,
-      mergedClassName,
-      triggerChange,
-      prefixCls,
-      $slots: slots,
-      $props,
-    } = this as any;
-    const props: SelectTypes = $props;
       const {
         notFoundContent,
         listHeight = 256,
         listItemHeight = 24,
         getPopupContainer,
         dropdownClassName,
-      direction,
         virtual,
         dropdownMatchSelectWidth,
       } = props;
 
       const { renderEmpty, getPopupContainer: getContextPopupContainer } = configProvider;
 
-    const isMultiple = mode === 'multiple' || mode === 'tags';
+      const isMultiple = mode.value === 'multiple' || mode.value === 'tags';
 
       // ===================== Empty =====================
       let mergedNotFound: VNodeChild;
@@ -165,7 +141,7 @@ const Select = defineComponent({
         mergedNotFound = notFoundContent;
       } else if (slots.notFoundContent) {
         mergedNotFound = slots.notFoundContent();
-    } else if (mode === 'combobox') {
+      } else if (mode.value === 'combobox') {
         mergedNotFound = null;
       } else {
         mergedNotFound = renderEmpty('Select') as any;
@@ -174,9 +150,9 @@ const Select = defineComponent({
       // ===================== Icons =====================
       const { suffixIcon, itemIcon, removeIcon, clearIcon } = getIcons(
         {
-        ...this.$props,
+          ...props,
           multiple: isMultiple,
-        prefixCls,
+          prefixCls: prefixCls.value,
         },
         slots,
       );
@@ -189,37 +165,38 @@ const Select = defineComponent({
         'clearIcon',
         'size',
         'bordered',
-    ]) as any;
+      ]);
 
       const rcSelectRtlDropDownClassName = classNames(dropdownClassName, {
-      [`${prefixCls}-dropdown-${direction}`]: direction === 'rtl',
+        [`${prefixCls.value}-dropdown-${direction.value}`]: direction.value === 'rtl',
       });
       return (
         <RcSelect
-        ref="selectRef"
+          ref={selectRef}
           virtual={virtual}
           dropdownMatchSelectWidth={dropdownMatchSelectWidth}
           {...selectProps}
-        {...this.$attrs}
+          {...attrs}
           listHeight={listHeight}
           listItemHeight={listItemHeight}
-        mode={mode}
+          mode={mode.value}
-        prefixCls={prefixCls}
+          prefixCls={prefixCls.value}
-        direction={direction}
+          direction={direction.value}
           inputIcon={suffixIcon}
           menuItemSelectedIcon={itemIcon}
           removeIcon={removeIcon}
           clearIcon={clearIcon}
           notFoundContent={mergedNotFound}
-        class={mergedClassName}
+          class={[mergedClassName.value, attrs.class]}
           getPopupContainer={getPopupContainer || getContextPopupContainer}
           dropdownClassName={rcSelectRtlDropDownClassName}
           onChange={triggerChange}
-        dropdownRender={selectProps.dropdownRender || this.$slots.dropdownRender}
+          dropdownRender={selectProps.dropdownRender || slots.dropdownRender}
         >
           {slots.default?.()}
         </RcSelect>
       );
+    };
   },
 });
 /* istanbul ignore next */