feat: add select responsive

Author: tangjinzhou

components/select/index.tsx

@@ -20,7 +20,7 @@ export interface LabeledValue {
   label: VNodeChild;
 }
 export type SizeType = 'small' | 'middle' | 'large' | undefined;
-export type SelectValue = RawValue | RawValue[] | LabeledValue | LabeledValue[];
+export type SelectValue = RawValue | RawValue[] | LabeledValue | LabeledValue[] | undefined;
 
 export interface InternalSelectProps<VT> extends Omit<RcSelectProps<VT>, 'mode'> {
   suffixIcon?: VNodeChild;

components/select/style/index.less

@@ -37,6 +37,10 @@
     background: @input-disabled-bg;
     cursor: not-allowed;
 
+    .@{select-prefix-cls}-multiple& {
+      background: @select-multiple-disabled-background;
+    }
+
     input {
       cursor: not-allowed;
     }
@@ -66,7 +70,12 @@
   display: inline-block;
   cursor: pointer;
 
-  &:not(.@{select-prefix-cls}-disabled):hover &-selector {
+  &:not(&-customize-input) &-selector {
+    .select-selector();
+    .select-search-input-without-border();
+  }
+
+  &:not(&-disabled):hover &-selector {
     .hover();
   }
 
@@ -93,6 +102,7 @@
     color: @input-placeholder-color;
     white-space: nowrap;
     text-overflow: ellipsis;
+    pointer-events: none;
 
     // IE11 css hack. `*::-ms-backdrop,` is a must have
     @media all and (-ms-high-contrast: none) {
@@ -189,21 +199,21 @@
     outline: none;
     box-shadow: @box-shadow-base;
 
-    &.slide-up-enter.slide-up-enter-active&-placement-bottomLeft,
-    &.slide-up-appear.slide-up-appear-active&-placement-bottomLeft {
+    &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-bottomLeft,
+    &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-bottomLeft {
       animation-name: antSlideUpIn;
     }
 
-    &.slide-up-enter.slide-up-enter-active&-placement-topLeft,
-    &.slide-up-appear.slide-up-appear-active&-placement-topLeft {
+    &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-topLeft,
+    &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topLeft {
       animation-name: antSlideDownIn;
     }
 
-    &.slide-up-leave.slide-up-leave-active&-placement-bottomLeft {
+    &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-bottomLeft {
       animation-name: antSlideUpOut;
     }
 
-    &.slide-up-leave.slide-up-leave-active&-placement-topLeft {
+    &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-topLeft {
       animation-name: antSlideDownOut;
     }
 

components/select/style/multiple.less

@@ -1,5 +1,6 @@
 @import './index';
 
+@select-overflow-prefix-cls: ~'@{select-prefix-cls}-selection-overflow';
 @select-multiple-item-border-width: 1px;
 
 @select-multiple-padding: max(
@@ -13,13 +14,25 @@
  * since chrome may update to redesign with its align logic.
  */
 
+// =========================== Overflow ===========================
+.@{select-overflow-prefix-cls} {
+  position: relative;
+  display: flex;
+  flex: auto;
+  flex-wrap: wrap;
+  max-width: 100%;
+
+  &-item {
+    flex: none;
+    align-self: center;
+    max-width: 100%;
+  }
+}
+
 .@{select-prefix-cls} {
   &-multiple {
     // ========================= Selector =========================
     .@{select-prefix-cls}-selector {
-      .select-selector();
-      .select-search-input-without-border();
-
       display: flex;
       flex-wrap: wrap;
       align-items: center;
@@ -59,16 +72,17 @@
 
       height: @select-multiple-item-height;
       margin-top: @select-multiple-item-spacing-half;
-      margin-right: @input-padding-vertical-base;
       margin-bottom: @select-multiple-item-spacing-half;
-      padding: 0 (@padding-xs / 2) 0 @padding-xs;
       line-height: @select-multiple-item-height - @select-multiple-item-border-width * 2;
       background: @select-selection-item-bg;
       border: 1px solid @select-selection-item-border-color;
       border-radius: @border-radius-base;
       cursor: default;
       transition: font-size 0.3s, line-height 0.3s, height 0.3s;
       user-select: none;
+      margin-inline-end: @input-padding-vertical-base;
+      padding-inline-start: @padding-xs;
+      padding-inline-end: (@padding-xs / 2);
 
       .@{select-prefix-cls}-disabled& {
         color: @select-multiple-item-disabled-color;
@@ -81,7 +95,7 @@
         display: inline-block;
         margin-right: (@padding-xs / 2);
         overflow: hidden;
-        white-space: nowrap;
+        white-space: pre; // fix whitespace wrapping. custom tags display all whitespace within.
         text-overflow: ellipsis;
       }
 
@@ -90,10 +104,9 @@
         display: inline-block;
         color: @text-color-secondary;
         font-weight: bold;
-        font-size: @font-size-sm;
+        font-size: 10px;
         line-height: inherit;
         cursor: pointer;
-        .iconfont-size-under-12px(10px);
 
         > .@{iconfont-css-prefix} {
           vertical-align: -0.2em;
@@ -106,14 +119,24 @@
     }
 
     // ========================== Input ==========================
+    .@{select-overflow-prefix-cls}-item + .@{select-overflow-prefix-cls}-item {
+      .@{select-prefix-cls}-selection-search {
+        margin-inline-start: 0;
+      }
+    }
+
     .@{select-prefix-cls}-selection-search {
       position: relative;
-      margin-left: (@select-multiple-padding / 2);
+      max-width: 100%;
+      margin-top: @select-multiple-item-spacing-half;
+      margin-bottom: @select-multiple-item-spacing-half;
+      margin-inline-start: @input-padding-horizontal-base - @input-padding-vertical-base;
 
       &-input,
       &-mirror {
+        height: @select-multiple-item-height;
         font-family: @font-family;
-        line-height: @line-height-base;
+        line-height: @select-multiple-item-height;
         transition: all 0.3s;
       }
 
@@ -127,14 +150,9 @@
         top: 0;
         left: 0;
         z-index: 999;
-        white-space: nowrap;
+        white-space: pre; // fix whitespace wrapping caused width calculation bug
         visibility: hidden;
       }
-
-      // https://github.com/ant-design/ant-design/issues/22906
-      &:first-child .@{select-prefix-cls}-selection-search-input {
-        margin-left: 6.5px;
-      }
     }
 
     // ======================= Placeholder =======================
@@ -166,8 +184,8 @@
         }
 
         .@{select-prefix-cls}-selection-search {
-          height: @select-selection-height + @select-multiple-padding;
-          line-height: @select-selection-height + @select-multiple-padding;
+          height: @select-selection-height;
+          line-height: @select-selection-height;
 
           &-input,
           &-mirror {
@@ -186,10 +204,9 @@
       .@{select-prefix-cls}-selection-placeholder {
         left: @input-padding-horizontal-sm;
       }
-      // https://github.com/ant-design/ant-design/issues/22906
-      .@{select-prefix-cls}-selection-search:first-child
-        .@{select-prefix-cls}-selection-search-input {
-        margin-left: 3px;
+      // https://github.com/ant-design/ant-design/issues/29559
+      .@{select-prefix-cls}-selection-search {
+        margin-inline-start: 3px;
       }
     }
     &.@{select-prefix-cls}-lg {

components/select/style/rtl.less

@@ -66,9 +66,6 @@
   // ======================== Selections ========================
   .@{select-prefix-cls}-selection-item {
     .@{select-prefix-cls}-rtl& {
-      margin-right: 0;
-      margin-left: @input-padding-vertical-base;
-      padding: 0 @padding-xs 0 (@padding-xs / 2);
       text-align: right;
     }
     // It's ok not to do this, but 24px makes bottom narrow in view should adjust
@@ -83,11 +80,6 @@
 
   // ========================== Input ==========================
   .@{select-prefix-cls}-selection-search {
-    .@{select-prefix-cls}-rtl& {
-      margin-right: (@select-multiple-padding / 2);
-      margin-left: @input-padding-vertical-base;
-    }
-
     &-mirror {
       .@{select-prefix-cls}-rtl& {
         right: 0;
@@ -119,7 +111,7 @@
 }
 
 // single
-@selection-item-padding: ceil((@font-size-base * 1.25));
+@selection-item-padding: ceil(@font-size-base * 1.25);
 
 .@{select-prefix-cls}-single {
   // ========================= Selector =========================
@@ -150,18 +142,6 @@
     }
   }
 
-  // ========================== Input ==========================
-  // We only change the style of non-customize input which is only support by `combobox` mode.
-
-  // Not customize
-  &:not(.@{select-prefix-cls}-customize-input) {
-    .@{select-prefix-cls}-selector {
-      .@{select-prefix-cls}-rtl& {
-        padding: 0 @input-padding-horizontal-base;
-      }
-    }
-  }
-
   // ============================================================
   // ==                          Size                          ==
   // ============================================================
@@ -172,7 +152,7 @@
       // With arrow should provides `padding-right` to show the arrow
       &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-search {
         .@{select-prefix-cls}-rtl& {
-          right: 0;
+          right: @input-padding-horizontal-sm - 1px;
         }
       }
 

components/select/style/single.less

@@ -1,6 +1,6 @@
 @import './index';
 
-@selection-item-padding: ceil((@font-size-base * 1.25));
+@selection-item-padding: ceil(@font-size-base * 1.25);
 
 .@{select-prefix-cls}-single {
   // ========================= Selector =========================
@@ -76,10 +76,7 @@
   // Not customize
   &:not(.@{select-prefix-cls}-customize-input) {
     .@{select-prefix-cls}-selector {
-      .select-selector();
-      .select-search-input-without-border();
       width: 100%;
-
       height: @input-height-base;
       padding: 0 @input-padding-horizontal-base;
 

components/vc-overflow/Item.tsx

@@ -90,19 +90,17 @@ export default defineComponent({
         </Component>
       );
 
-      if (responsive) {
-        itemNode = (
-          <ResizeObserver
-            onResize={({ offsetWidth }) => {
-              internalRegisterSize(offsetWidth);
-            }}
-          >
-            {itemNode}
-          </ResizeObserver>
-        );
-      }
-
-      return itemNode;
+      // 使用 disabled  避免结构不一致 导致子组件 rerender
+      return (
+        <ResizeObserver
+          disabled={!responsive}
+          onResize={({ offsetWidth }) => {
+            internalRegisterSize(offsetWidth);
+          }}
+        >
+          {itemNode}
+        </ResizeObserver>
+      );
     };
   },
 });

components/vc-overflow/Overflow.tsx

@@ -370,12 +370,12 @@ const Overflow = defineComponent({
           )}
         </Component>
       );
-
-      if (isResponsive.value) {
-        overflowNode = <ResizeObserver onResize={onOverflowResize}>{overflowNode}</ResizeObserver>;
-      }
-
-      return overflowNode;
+      // 使用 disabled  避免结构不一致 导致子组件 rerender
+      return (
+        <ResizeObserver disabled={!isResponsive.value} onResize={onOverflowResize}>
+          {overflowNode}
+        </ResizeObserver>
+      );
     };
   },
 });

components/vc-select/OptionList.tsx

@@ -237,6 +237,9 @@ const OptionList = defineComponent<OptionListProps, { state?: any }>({
           // >>> Close
           case KeyCode.ESC: {
             props.onToggleOpen(false);
+            if (props.open) {
+              event.stopPropagation();
+            }
           }
         }
       },

components/vc-select/Select.tsx

@@ -46,7 +46,6 @@ import generateSelector, { SelectProps } from './generate';
 import { DefaultValueType } from './interface/generator';
 import warningProps from './utils/warningPropsUtil';
 import { defineComponent, ref } from 'vue';
-import { getSlot } from '../_util/props-util';
 import omit from 'lodash-es/omit';
 
 const RefSelect = generateSelector<SelectOptionsType>({
@@ -69,21 +68,27 @@ export type ExportedSelectProps<
 > = SelectProps<SelectOptionsType, ValueType>;
 
 const Select = defineComponent<Omit<ExportedSelectProps, 'children'>>({
-  setup() {
+  setup(props, { attrs, expose, slots }) {
     const selectRef = ref(null);
-    return {
-      selectRef,
+    expose({
       focus: () => {
         selectRef.value?.focus();
       },
       blur: () => {
         selectRef.value?.blur();
       },
+    });
+    return () => {
+      return (
+        <RefSelect
+          ref={selectRef}
+          {...(props as any)}
+          {...attrs}
+          children={slots.default?.() || []}
+        />
+      );
     };
   },
-  render() {
-    return <RefSelect ref="selectRef" {...this.$props} {...this.$attrs} children={getSlot(this)} />;
-  },
 });
 Select.inheritAttrs = false;
 Select.props = omit(RefSelect.props, ['children']);