fix: Select align issue (#51694)

* fix: item align logic

* fix: placeholder style

* test: update snapshot

* fix: single align

* chore: add demo

* test: update snapshot

* fix: color

* fix: style

* fix: line height

* fix: borderless pos

* chore: base of prefix offset

components/select/demo/option-label-center.tsx

@@ -1,5 +1,15 @@
 import React from 'react';
-import { Cascader, Select, Space, TreeSelect, Typography } from 'antd';
+import {
+  AutoComplete,
+  Cascader,
+  Flex,
+  Form,
+  Input,
+  Select,
+  Space,
+  TreeSelect,
+  Typography,
+} from 'antd';
 
 const options = [
   { value: 'long', label: <Typography>long, long, long piece of text</Typography> },
@@ -8,6 +18,7 @@ const options = [
 ];
 
 const App: React.FC = () => (
+  <>
     <Space wrap>
       <Select
         defaultValue="long, long, long piece of text"
@@ -70,7 +81,109 @@ const App: React.FC = () => (
           },
         ]}
       />
+      <Select
+        prefix="Hello World"
+        mode="multiple"
+        allowClear
+        placeholder="Select"
+        style={{ minWidth: 200, height: 200 }}
+        defaultValue={['long']}
+        options={options}
+      />
+      <Select
+        mode="multiple"
+        style={{ width: 200 }}
+        placeholder="请选择"
+        maxTagCount="responsive"
+        prefix="城市"
+        options={options}
+      />
+      <Select
+        style={{ width: 200 }}
+        placeholder="请选择"
+        prefix="城市"
+        options={options}
+        showSearch
+        allowClear
+        status="error"
+      />
+      <Select
+        style={{ width: 100 }}
+        prefix="Hi"
+        options={options}
+        showSearch
+        allowClear
+        status="warning"
+        variant="filled"
+        defaultValue="Bamboo"
+      />
+      <Select
+        style={{ width: 100 }}
+        prefix="Hi"
+        options={options}
+        showSearch
+        allowClear
+        status="error"
+        variant="borderless"
+        defaultValue="Bamboo"
+      />
+      <Form style={{ width: 200 }} layout="vertical">
+        <Form.Item
+          label="Label"
+          name="bamboo"
+          initialValue="Bamboo"
+          style={{
+            boxShadow: '0 0 0 1px red',
+          }}
+        >
+          <Select options={options} allowClear placeholder="bamboo" />
+        </Form.Item>
+        <Form.Item
+          label="Label"
+          name="bamboo"
+          initialValue="Bamboo"
+          style={{
+            boxShadow: '0 0 0 1px red',
+          }}
+        >
+          <AutoComplete options={options} allowClear placeholder="bamboo" />
+        </Form.Item>
+      </Form>
     </Space>
+
+    {/* Test for align */}
+    <Flex vertical style={{ width: 200 }}>
+      {/* Single */}
+      <Input prefix="Hi" placeholder="Input" allowClear />
+      <Select prefix="Hi" placeholder="Single" options={options} allowClear showSearch />
+      <Select
+        prefix="Hi"
+        placeholder="Single"
+        options={options}
+        allowClear
+        showSearch
+        defaultValue="Bamboo"
+      />
+      {/* Multiple */}
+      <Select placeholder="Multiple" options={options} allowClear mode="multiple" />
+      <Select prefix="Hi" placeholder="Multiple" options={options} allowClear mode="multiple" />
+      <Select
+        prefix="Hi"
+        placeholder="Multiple"
+        options={options}
+        allowClear
+        mode="multiple"
+        defaultValue={['Bamboo']}
+      />
+      <Select
+        placeholder="Multiple"
+        options={options}
+        allowClear
+        mode="multiple"
+        defaultValue={['Bamboo']}
+      />
+    </Flex>
+  </>
 );
 
 export default App;

components/select/style/index.ts

@@ -146,6 +146,26 @@ const genBaseStyle: GenerateStyle<SelectToken> = (token) => {
         },
       },
 
+      // ========================== Wrap ===========================
+      [`${componentCls}-selection-wrap`]: {
+        display: 'flex',
+        width: '100%',
+        position: 'relative',
+
+        // https://github.com/ant-design/ant-design/issues/51669
+        '&:after': {
+          content: '"\\a0"',
+          width: 0,
+          overflow: 'hidden',
+        },
+      },
+
+      // ========================= Prefix ==========================
+      [`${componentCls}-prefix`]: {
+        flex: 'none',
+        marginInlineEnd: token.selectAffixPadding,
+      },
+
       // ========================== Clear ==========================
       [`${componentCls}-clear`]: {
         position: 'absolute',

components/select/style/multiple.ts

@@ -232,27 +232,46 @@ const genSelectionStyle = (
         },
       },
 
-      [`${componentCls}-selection-wrap`]: {
-        width: '100%',
-        overflow: 'hidden',
-      },
-
       // ======================== Selections ========================
       [`${componentCls}-selection-item`]: {
         height: multipleSelectorUnit.itemHeight,
         lineHeight: unit(multipleSelectorUnit.itemLineHeight),
       },
 
+      // ========================== Wrap ===========================
+      [`${componentCls}-selection-wrap`]: {
+        alignSelf: 'flex-start',
+
+        '&:after': {
+          lineHeight: unit(selectItemHeight),
+          marginBlock: INTERNAL_FIXED_ITEM_MARGIN,
+        },
+      },
+
       // ========================== Input ==========================
-      [`${selectOverflowPrefixCls}-item + ${selectOverflowPrefixCls}-item`]: {
+      [`${componentCls}-prefix`]: {
+        marginInlineStart: token
+          .calc(token.inputPaddingHorizontalBase)
+          .sub(multipleSelectorUnit.basePadding)
+          .equal(),
+      },
+
+      [`${selectOverflowPrefixCls}-item + ${selectOverflowPrefixCls}-item,
+        ${componentCls}-prefix + ${componentCls}-selection-wrap
+      `]: {
         [`${componentCls}-selection-search`]: {
           marginInlineStart: 0,
         },
+        [`${componentCls}-selection-placeholder`]: {
+          insetInlineStart: 0,
+        },
       },
 
       // https://github.com/ant-design/ant-design/issues/44754
+      // Same as `wrap:after`
       [`${selectOverflowPrefixCls}-item-suffix`]: {
-        height: '100%',
+        minHeight: multipleSelectorUnit.itemHeight,
+        marginBlock: INTERNAL_FIXED_ITEM_MARGIN,
       },
 
       [`${componentCls}-selection-search`]: {
@@ -291,18 +310,14 @@ const genSelectionStyle = (
       [`${componentCls}-selection-placeholder`]: {
         position: 'absolute',
         top: '50%',
-        insetInlineStart: token.inputPaddingHorizontalBase,
+        insetInlineStart: token
+          .calc(token.inputPaddingHorizontalBase)
+          .sub(multipleSelectorUnit.basePadding)
+          .equal(),
         insetInlineEnd: token.inputPaddingHorizontalBase,
         transform: 'translateY(-50%)',
         transition: `all ${token.motionDurationSlow}`,
       },
-
-      [`${componentCls}-prefix`]: {
-        height: multipleSelectorUnit.itemHeight,
-        lineHeight: unit(multipleSelectorUnit.itemLineHeight),
-        marginInlineStart: `calc(${unit(token.inputPaddingHorizontalBase)} - ${unit(multipleSelectorUnit.basePadding)})`,
-        marginInlineEnd: token.selectAffixPadding,
-      },
     },
   };
 };

components/select/style/single.ts

@@ -6,7 +6,7 @@ import { mergeToken } from '../../theme/internal';
 import type { SelectToken } from './token';
 
 function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
-  const { componentCls, inputPaddingHorizontalBase, borderRadius, selectAffixPadding } = token;
+  const { componentCls, inputPaddingHorizontalBase, borderRadius } = token;
 
   const selectHeightWithoutBorder = token
     .calc(token.controlHeight)
@@ -28,12 +28,6 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
         borderRadius,
         flex: '1 1 auto',
 
-        [`${componentCls}-selection-wrap`]: {
-          display: 'flex',
-          width: '100%',
-          position: 'relative',
-        },
-
         [`${componentCls}-selection-search`]: {
           position: 'absolute',
           inset: 0,
@@ -47,8 +41,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
 
         [`
           ${componentCls}-selection-item,
-          ${componentCls}-selection-placeholder,
-          ${componentCls}-prefix
+          ${componentCls}-selection-placeholder
         `]: {
           display: 'block',
           padding: 0,
@@ -62,10 +55,6 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
           pointerEvents: 'none',
         },
 
-        [`${componentCls}-prefix`]: {
-          marginInlineEnd: selectAffixPadding,
-        },
-
         // For common baseline align
         [[
           '&:after',
@@ -101,6 +90,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
         [`${componentCls}-selector`]: {
           width: '100%',
           height: '100%',
+          alignItems: 'center',
           padding: `0 ${unit(inputPaddingHorizontalBase)}`,
 
           [`${componentCls}-selection-search-input`]: {

components/select/style/variants.ts

@@ -13,6 +13,7 @@ const genBaseOutlinedStyle = (
     hoverBorderHover: string;
     activeBorderColor: string;
     activeOutlineColor: string;
+    color: string;
   },
 ): CSSObject => {
   const { componentCls, antCls, controlOutlineWidth } = token;
@@ -33,6 +34,9 @@ const genBaseOutlinedStyle = (
           boxShadow: `0 0 0 ${unit(controlOutlineWidth)} ${options.activeOutlineColor}`,
           outline: 0,
         },
+        [`${componentCls}-prefix`]: {
+          color: options.color,
+        },
       },
   };
 };
@@ -45,6 +49,7 @@ const genOutlinedStatusStyle = (
     hoverBorderHover: string;
     activeBorderColor: string;
     activeOutlineColor: string;
+    color: string;
   },
 ): CSSObject => ({
   [`&${token.componentCls}-status-${options.status}`]: {
@@ -59,6 +64,7 @@ const genOutlinedStyle = (token: SelectToken): CSSObject => ({
       hoverBorderHover: token.hoverBorderColor,
       activeBorderColor: token.activeBorderColor,
       activeOutlineColor: token.activeOutlineColor,
+      color: token.colorText,
     }),
 
     ...genOutlinedStatusStyle(token, {
@@ -67,6 +73,7 @@ const genOutlinedStyle = (token: SelectToken): CSSObject => ({
       hoverBorderHover: token.colorErrorHover,
       activeBorderColor: token.colorError,
       activeOutlineColor: token.colorErrorOutline,
+      color: token.colorError,
     }),
 
     ...genOutlinedStatusStyle(token, {
@@ -75,6 +82,7 @@ const genOutlinedStyle = (token: SelectToken): CSSObject => ({
       hoverBorderHover: token.colorWarningHover,
       activeBorderColor: token.colorWarning,
       activeOutlineColor: token.colorWarningOutline,
+      color: token.colorWarning,
     }),
 
     [`&${token.componentCls}-disabled`]: {
@@ -188,7 +196,7 @@ const genBorderlessStyle = (token: SelectToken): CSSObject => ({
   '&-borderless': {
     [`${token.componentCls}-selector`]: {
       background: 'transparent',
-      borderColor: 'transparent',
+      border: `${unit(token.lineWidth)} ${token.lineType} transparent`,
     },
 
     [`&${token.componentCls}-disabled`]: {
@@ -204,13 +212,13 @@ const genBorderlessStyle = (token: SelectToken): CSSObject => ({
 
     // Status
     [`&${token.componentCls}-status-error`]: {
-      [`${token.componentCls}-selection-item`]: {
+      [`${token.componentCls}-prefix, ${token.componentCls}-selection-item`]: {
         color: token.colorError,
       },
     },
 
     [`&${token.componentCls}-status-warning`]: {
-      [`${token.componentCls}-selection-item`]: {
+      [`${token.componentCls}-prefix, ${token.componentCls}-selection-item`]: {
         color: token.colorWarning,
       },
     },