-
- a10
-
-
-
-
-
-
-
-
-
-
-
- c12
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- a10
-
-
- b11
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
-
+
+
-
- a10
-
-
-
-
-
-
-
+
+
+
+
+
+
+ c12
+
+
+
-
- b11
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- z35
+ a10
+
+
+
+
+
+
+
+
+
+
+ c12
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -7055,506 +7178,509 @@ Array [
-
,
-
,
-
-
-
- a10
-
-
-
-
-
-
-
-
-
-
-
- c12
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+ a10
+
+
+
+
+
+
+
+
+
+
+
+ c12
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
+
+
+
+
+
-
-
-
- c12
-
-
-
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+ c12
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -7820,148 +7946,156 @@ exports[`renders ./components/select/demo/status.tsx extend context correctly 1`
`;
exports[`renders ./components/select/demo/suffix.tsx extend context correctly 1`] = `
-Array [
+
-
-
-
-
- Lucy
-
-
-
-
-
+
+
+
+
+ Lucy
+
+
+
+
+
- jack
+
+ jack
+
+
+ lucy
+
- lucy
-
-
-
-
-
-
+
+
-
-
- Disabled
+
+ yiminghe
+
+
-
-
-
- yiminghe
+
+ Disabled
+
+
-
@@ -7969,118 +8103,123 @@ Array [
-
-
-
+
+
-
-
,
+
+
-
-
-
-
- Lucy
-
-
-
-
-
+
+
+
+
+ Lucy
+
+
+
+
+
-
-
-
+
@@ -8088,35 +8227,35 @@ Array [
-
-
-
+
+
-
-
,
-]
+
+
+
`;
exports[`renders ./components/select/demo/tags.tsx extend context correctly 1`] = `
diff --git a/components/select/__tests__/__snapshots__/demo.test.ts.snap b/components/select/__tests__/__snapshots__/demo.test.ts.snap
index 3261e2bc99..195cb510e1 100644
--- a/components/select/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/select/__tests__/__snapshots__/demo.test.ts.snap
@@ -47,276 +47,299 @@ exports[`renders ./components/select/demo/automatic-tokenization.tsx correctly 1
`;
exports[`renders ./components/select/demo/basic.tsx correctly 1`] = `
-Array [
+
,
+
-
-
-
-
-
-
,
+
-
-
-
-
-
-
,
+
+
+
+
+
- Lucy
+
+
+
-
-
-
-
-
-
-
-
-
-
-
,
-]
+
+
`;
exports[`renders ./components/select/demo/big-data.tsx correctly 1`] = `
@@ -577,128 +600,141 @@ Array [
`;
exports[`renders ./components/select/demo/coordinate.tsx correctly 1`] = `
-Array [
+
,
+
-
-
-
-
-
-
,
-]
+
+
`;
exports[`renders ./components/select/demo/custom-dropdown-menu.tsx correctly 1`] = `
@@ -903,167 +939,193 @@ exports[`renders ./components/select/demo/custom-tag-render.tsx correctly 1`] =
exports[`renders ./components/select/demo/debug.tsx correctly 1`] = `
-
+
+
+
+
+ 233
+
+
+
+
+
+
+
+
+
+
+
+
-
-
- Lucy
-
-
-
-
-
-
-
-
-
-
- AntDesign
-
-
+
+
+
+
`;
@@ -1182,235 +1244,246 @@ exports[`renders ./components/select/demo/label-in-value.tsx correctly 1`] = `
`;
exports[`renders ./components/select/demo/multiple.tsx correctly 1`] = `
-Array [
+
-
-
- a10
-
-
-
-
-
-
-
-
-
-
-
- c12
-
-
-
-
-
-
-
-
-
+
+
+
+ c12
+
+
+
+
+
+
+
+
+
-
-
-
+
+
-
-
,
-
,
+
+
-
-
- a10
-
-
-
-
-
-
- c12
-
-
-
-
-
+
+ a10
+
+
+
+
+ c12
+
+
+
+
-
,
-]
+
+
`;
exports[`renders ./components/select/demo/optgroup.tsx correctly 1`] = `
@@ -2115,165 +2188,22 @@ Array [
,
,
-
-
-
-
-
- a1
-
-
-
-
-
-
-
-
,
-
,
-
-
- a10
-
-
-
-
-
-
-
-
-
-
-
- c12
-
-
-
-
-
-
-
-
-
-
-
+
+ a1
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ a10
+
+
+
+
+
+
+
+
+
+
+
+ c12
+
+
+
+
+
+
+
+
+
-
,
-
,
-
-
-
- a10
-
-
-
-
-
-
-
-
-
-
-
- c12
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+ a10
+
+
+
+
+
+
+
+
+
+
+
+ c12
+
+
+
+
+
+
+
+
+
@@ -2558,130 +2648,143 @@ exports[`renders ./components/select/demo/status.tsx correctly 1`] = `
`;
exports[`renders ./components/select/demo/suffix.tsx correctly 1`] = `
-Array [
+
,
+
-
-
-
-
-
-
,
-]
+
+
`;
exports[`renders ./components/select/demo/tags.tsx correctly 1`] = `
diff --git a/components/select/demo/basic.tsx b/components/select/demo/basic.tsx
index d03e57911d..d3c063a2da 100644
--- a/components/select/demo/basic.tsx
+++ b/components/select/demo/basic.tsx
@@ -1,70 +1,42 @@
import React from 'react';
-import { Select } from 'antd';
+import { Select, Space } from 'antd';
const handleChange = (value: string) => {
console.log(`selected ${value}`);
};
const App: React.FC = () => (
- <>
+
-
+
);
export default App;
diff --git a/components/select/demo/big-data.tsx b/components/select/demo/big-data.tsx
index c9f30f599f..902e3404d3 100644
--- a/components/select/demo/big-data.tsx
+++ b/components/select/demo/big-data.tsx
@@ -5,6 +5,7 @@ import { Divider, Select, Typography } from 'antd';
const { Title } = Typography;
const options: SelectProps['options'] = [];
+
for (let i = 0; i < 100000; i++) {
const value = `${i.toString(36)}${i}`;
options.push({
diff --git a/components/select/demo/coordinate.tsx b/components/select/demo/coordinate.tsx
index a1c9eeb390..1093ef7c38 100644
--- a/components/select/demo/coordinate.tsx
+++ b/components/select/demo/coordinate.tsx
@@ -1,7 +1,8 @@
import React, { useState } from 'react';
-import { Select } from 'antd';
+import { Select, Space } from 'antd';
const provinceData = ['Zhejiang', 'Jiangsu'];
+
const cityData = {
Zhejiang: ['Hangzhou', 'Ningbo', 'Wenzhou'],
Jiangsu: ['Nanjing', 'Suzhou', 'Zhenjiang'],
@@ -23,7 +24,7 @@ const App: React.FC = () => {
};
return (
- <>
+
);
};
diff --git a/components/select/demo/debug.md b/components/select/demo/debug.md
index 353fd3aa5d..28b7633a73 100644
--- a/components/select/demo/debug.md
+++ b/components/select/demo/debug.md
@@ -1,28 +1,7 @@
## zh-CN
-基本使用。
+调试使用。
## en-US
-Basic Usage.
-
-
+Debug Usage.
diff --git a/components/select/demo/debug.tsx b/components/select/demo/debug.tsx
index ceab7c6f68..f5ae00b13d 100644
--- a/components/select/demo/debug.tsx
+++ b/components/select/demo/debug.tsx
@@ -1,20 +1,20 @@
import React from 'react';
-import { Button, Input, Select } from 'antd';
+import { Button, Input, Select, Space } from 'antd';
+
+const style: React.CSSProperties = {
+ width: 500,
+ position: 'relative',
+ zIndex: 1,
+ border: '1px solid red',
+ backgroundColor: '#fff',
+};
const handleChange = (value: string | string[]) => {
console.log(`selected ${value}`);
};
const App: React.FC = () => (
-
+
+
);
export default App;
diff --git a/components/select/demo/multiple.tsx b/components/select/demo/multiple.tsx
index 2ab8a0a4a7..cb25245841 100644
--- a/components/select/demo/multiple.tsx
+++ b/components/select/demo/multiple.tsx
@@ -1,8 +1,9 @@
import React from 'react';
-import { Select } from 'antd';
+import { Select, Space } from 'antd';
import type { SelectProps } from 'antd';
const options: SelectProps['options'] = [];
+
for (let i = 10; i < 36; i++) {
options.push({
label: i.toString(36) + i,
@@ -15,7 +16,7 @@ const handleChange = (value: string[]) => {
};
const App: React.FC = () => (
- <>
+
);
export default App;
diff --git a/components/select/demo/option-label-prop.md b/components/select/demo/option-label-prop.md
index 61c9439676..4066a1f11e 100644
--- a/components/select/demo/option-label-prop.md
+++ b/components/select/demo/option-label-prop.md
@@ -5,9 +5,3 @@
## en-US
Specify the prop name of Option which will be rendered in select box.
-
-```css
-.demo-option-label-item > span {
- margin-right: 6px;
-}
-```
diff --git a/components/select/demo/option-label-prop.tsx b/components/select/demo/option-label-prop.tsx
index b07c9f898e..a01c57fafd 100644
--- a/components/select/demo/option-label-prop.tsx
+++ b/components/select/demo/option-label-prop.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { Select } from 'antd';
+import { Select, Space } from 'antd';
const { Option } = Select;
@@ -17,36 +17,36 @@ const App: React.FC = () => (
optionLabelProp="label"
>
);
diff --git a/components/select/demo/size.md b/components/select/demo/size.md
index d96c461e1d..cce75d6f45 100644
--- a/components/select/demo/size.md
+++ b/components/select/demo/size.md
@@ -5,17 +5,3 @@
## en-US
The height of the input field for the select defaults to 32px. If size is set to large, the height will be 40px, and if set to small, 24px.
-
-```css
-.code-box-demo .ant-select {
- margin: 0 8px 10px 0;
-}
-
-.ant-row-rtl .code-box-demo .ant-select {
- margin: 0 0 10px 8px;
-}
-
-#components-select-demo-search-box .code-box-demo .ant-select {
- margin: 0;
-}
-```
diff --git a/components/select/demo/size.tsx b/components/select/demo/size.tsx
index d674719d96..94cc82b935 100644
--- a/components/select/demo/size.tsx
+++ b/components/select/demo/size.tsx
@@ -1,9 +1,10 @@
import React, { useState } from 'react';
-import { Radio, Select } from 'antd';
+import { Radio, Select, Space } from 'antd';
import type { SizeType } from 'antd/es/config-provider/SizeContext';
import type { SelectProps, RadioChangeEvent } from 'antd';
const options: SelectProps['options'] = [];
+
for (let i = 10; i < 36; i++) {
options.push({
value: i.toString(36) + i,
@@ -31,33 +32,33 @@ const App: React.FC = () => {
-
-
-
-
-
+
+
+
+
+
);
};
diff --git a/components/select/demo/status.md b/components/select/demo/status.md
index 9a44557590..ceba73537e 100644
--- a/components/select/demo/status.md
+++ b/components/select/demo/status.md
@@ -5,9 +5,3 @@
## en-US
Add status to Select with `status`, which could be `error` or `warning`.
-
-```css
-#components-select-demo-status .ant-select {
- margin: 0;
-}
-```
diff --git a/components/select/demo/suffix.md b/components/select/demo/suffix.md
index 0c1c65ba68..8d150fbac7 100644
--- a/components/select/demo/suffix.md
+++ b/components/select/demo/suffix.md
@@ -1,7 +1,7 @@
## zh-CN
-基本使用。
+后缀图标。
## en-US
-Basic Usage.
+suffix icon.
diff --git a/components/select/demo/suffix.tsx b/components/select/demo/suffix.tsx
index 5d1c95c0ee..337ec47441 100644
--- a/components/select/demo/suffix.tsx
+++ b/components/select/demo/suffix.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import { MehOutlined, SmileOutlined } from '@ant-design/icons';
-import { Select } from 'antd';
+import { Select, Space } from 'antd';
const smileIcon =
;
const mehIcon =
;
@@ -10,30 +10,17 @@ const handleChange = (value: string) => {
};
const App: React.FC = () => (
- <>
+
);
export default App;
diff --git a/components/select/index.en-US.md b/components/select/index.en-US.md
index 98ceff222a..ca1df91eb3 100644
--- a/components/select/index.en-US.md
+++ b/components/select/index.en-US.md
@@ -44,7 +44,7 @@ Select component to select value from options.
## API
-```jsx
+```tsx
@@ -149,7 +149,7 @@ You can control it by `open` prop: [codesandbox](https://codesandbox.io/s/ji-ben
Select will close when it lose focus. You can prevent event to handle this:
-```jsx
+```tsx