Virtual select component (#18658)

* init

* fix firefox

* add active style

* adjust arrow style

* update select

* update icon logic

* render empty

* init multiple

* fix ff display style

* sync font size

* adjust padding style

* add padding

* padding it

* hotfix of chrome

* single sm

* multiple size

* update option group style

* update snapshot

* clean up transition

* rm combobox in ts define

* auto complete init

* fix auto option def

* update demo

* update demo

* update uncertain demo

* update demo

* warning if user set `size` on AutoComplete

* add debug demo

* updat demo

* update demo of disabled

* update snapshot

* rm useless test

* fix pagination test

* fix Table test

* fix calendar test case

* fix calendar test case

* adjust style

* add big data demo

* support clean up

* fix ts define

* fix lint

* fix demo lint

* fix style lint fix

* rm useless deps

* update snapshot

* stop mock

* add space

components/auto-complete/InputElement.tsx

@@ -1,25 +0,0 @@
-import * as React from 'react';
-
-export interface InputElementProps {
-  children: React.ReactElement<any>;
-}
-
-export default class InputElement extends React.Component<InputElementProps, any> {
-  saveRef = (ele: HTMLInputElement) => {
-    const { ref: childRef } = this.props.children as any;
-    if (typeof childRef === 'function') {
-      childRef(ele);
-    }
-  };
-
-  render() {
-    return React.cloneElement(
-      this.props.children,
-      {
-        ...this.props,
-        ref: this.saveRef,
-      },
-      null,
-    );
-  }
-}

components/auto-complete/__tests__/focus.test.js

@@ -1,11 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import AutoComplete from '..';
-import focusTest from '../../../tests/shared/focusTest';
-
-describe('AutoComplete could be focus', () => {
-  focusTest(AutoComplete);
-});
 
 describe('AutoComplete children could be focus', () => {
   beforeAll(() => {

components/auto-complete/__tests__/index.test.js

@@ -15,15 +15,9 @@ describe('AutoComplete with Custom Input Element Render', () => {
 
     expect(wrapper.find('textarea').length).toBe(1);
     wrapper.find('textarea').simulate('change', { target: { value: '123' } });
-    const dropdownWrapper = mount(
-      wrapper
-        .find('Trigger')
-        .instance()
-        .getComponent(),
-    );
 
     // should not filter data source defaultly
-    expect(dropdownWrapper.find('MenuItem').length).toBe(3);
+    expect(wrapper.find('.ant-select-item-option').length).toBe(3);
   });
 
   it('AutoComplete should work when dataSource is object array', () => {
@@ -34,15 +28,9 @@ describe('AutoComplete with Custom Input Element Render', () => {
     );
     expect(wrapper.find('input').length).toBe(1);
     wrapper.find('input').simulate('change', { target: { value: 'a' } });
-    const dropdownWrapper = mount(
-      wrapper
-        .find('Trigger')
-        .instance()
-        .getComponent(),
-    );
 
     // should not filter data source defaultly
-    expect(dropdownWrapper.find('MenuItem').length).toBe(2);
+    expect(wrapper.find('.ant-select-item-option').length).toBe(2);
   });
 
   it('AutoComplete throws error when contains invalid dataSource', () => {

components/auto-complete/demo/basic.md

@@ -7,28 +7,36 @@ title:
 
 ## zh-CN
 
-基本使用。通过 dataSource 设置自动完成的数据源
+基本使用。通过 options 设置自动完成的数据源
 
 ## en-US
 
-Basic Usage, set data source of autocomplete with `dataSource` property.
+Basic Usage, set data source of autocomplete with `options` property.
 
-```jsx
+```tsx
 import { AutoComplete } from 'antd';
 
 function onSelect(value) {
   console.log('onSelect', value);
 }
 
+function mockVal(str: string, repeat: number = 1) {
+  return {
+    value: str.repeat(repeat),
+  };
+}
+
 class Complete extends React.Component {
   state = {
     value: '',
-    dataSource: [],
+    options: [],
   };
 
   onSearch = searchText => {
     this.setState({
-      dataSource: !searchText ? [] : [searchText, searchText.repeat(2), searchText.repeat(3)],
+      options: !searchText
+        ? []
+        : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)],
     });
   };
 
@@ -37,11 +45,12 @@ class Complete extends React.Component {
   };
 
   render() {
-    const { dataSource, value } = this.state;
+    const { options, value } = this.state;
+
     return (
       <div>
         <AutoComplete
-          dataSource={dataSource}
+          options={[]}
           style={{ width: 200 }}
           onSelect={onSelect}
           onSearch={this.onSearch}
@@ -51,7 +60,7 @@ class Complete extends React.Component {
         <br />
         <AutoComplete
           value={value}
-          dataSource={dataSource}
+          options={options}
           style={{ width: 200 }}
           onSelect={onSelect}
           onSearch={this.onSearch}

components/auto-complete/demo/certain-category.md

@@ -11,53 +11,15 @@ title:
 
 ## en-US
 
-Demonstration of [Lookup Patterns: Certain Category](https://ant.design/docs/spec/reaction#Lookup-Patterns). Basic Usage, set datasource of autocomplete with `dataSource` property.
+Demonstration of [Lookup Patterns: Certain Category](https://ant.design/docs/spec/reaction#Lookup-Patterns). Basic Usage, set options of autocomplete with `options` property.
 
-```jsx
+```tsx
 import { Input, AutoComplete } from 'antd';
-import { Search } from '@ant-design/icons';
+import { Search, User } from '@ant-design/icons';
 
 const { Option, OptGroup } = AutoComplete;
 
-const dataSource = [
+function renderTitle(title: string) {
-  {
-    title: 'Libraries',
-    children: [
-      {
-        title: 'AntDesign',
-        count: 10000,
-      },
-      {
-        title: 'AntDesign UI',
-        count: 10600,
-      },
-    ],
-  },
-  {
-    title: 'Solutions',
-    children: [
-      {
-        title: 'AntDesign UI',
-        count: 60100,
-      },
-      {
-        title: 'AntDesign',
-        count: 30010,
-      },
-    ],
-  },
-  {
-    title: 'Articles',
-    children: [
-      {
-        title: 'AntDesign design language',
-        count: 100000,
-      },
-    ],
-  },
-];
-
-function renderTitle(title) {
   return (
     <span>
       {title}
@@ -73,24 +35,34 @@ function renderTitle(title) {
   );
 }
 
-const options = dataSource
+function renderItem(title: string, count: number) {
-  .map(group => (
+  return {
-    <OptGroup key={group.title} label={renderTitle(group.title)}>
+    value: title,
-      {group.children.map(opt => (
+    label: (
-        <Option key={opt.title} value={opt.title}>
+      <>
-          {opt.title}
+        {title}
-          <span className="certain-search-item-count">{opt.count} people</span>
+        <span className="certain-search-item-count">
-        </Option>
+          <User /> {count}
-      ))}
+        </span>
-    </OptGroup>
+      </>
-  ))
+    ),
-  .concat([
+  };
-    <Option disabled key="all" className="show-all">
+}
-      <a href="https://www.google.com/search?q=antd" target="_blank" rel="noopener noreferrer">
+
-        View all results
+const options = [
-      </a>
+  {
-    </Option>,
+    label: renderTitle('Libraries'),
-  ]);
+    options: [renderItem('AntDesign', 10000), renderItem('AntDesign UI', 10600)],
+  },
+  {
+    label: renderTitle('Solutions'),
+    options: [renderItem('AntDesign UI FAQ', 60100), renderItem('AntDesign FAQ', 30010)],
+  },
+  {
+    label: renderTitle('Articles'),
+    options: [renderItem('AntDesign design language', 100000)],
+  },
+];
 
 function Complete() {
   return (
@@ -98,15 +70,15 @@ function Complete() {
       <AutoComplete
         className="certain-category-search"
         dropdownClassName="certain-category-search-dropdown"
-        dropdownMatchSelectWidth={false}
+        dropdownMatchSelectWidth={500}
-        dropdownStyle={{ width: 300 }}
-        size="large"
         style={{ width: '100%' }}
-        dataSource={options}
+        options={options}
-        placeholder="input here"
-        optionLabelProp="value"
       >
-        <Input suffix={<Search className="certain-category-icon" />} />
+        <Input
+          size="large"
+          suffix={<Search className="certain-category-icon" />}
+          placeholder="input here"
+        />
       </AutoComplete>
     </div>
   );

components/auto-complete/demo/custom.md

@@ -24,12 +24,14 @@ function onSelect(value) {
 
 class Complete extends React.Component {
   state = {
-    dataSource: [],
+    options: [],
   };
 
   handleSearch = value => {
     this.setState({
-      dataSource: !value ? [] : [value, value + value, value + value + value],
+      options: !value
+        ? []
+        : [{ value }, { value: value + value }, { value: value + value + value }],
     });
   };
 
@@ -38,10 +40,10 @@ class Complete extends React.Component {
   };
 
   render() {
-    const { dataSource } = this.state;
+    const { options } = this.state;
     return (
       <AutoComplete
-        dataSource={dataSource}
+        options={options}
         style={{ width: 200 }}
         onSelect={onSelect}
         onSearch={this.handleSearch}

components/auto-complete/demo/form-debug.md

@@ -0,0 +1,62 @@
+---
+order: 999
+title:
+  zh-CN: 在 Form 中 Debug
+  en-US: Debug in Form
+debug: true
+---
+
+```jsx
+import { Input, AutoComplete, Form, TreeSelect } from 'antd';
+import { Search } from '@ant-design/icons';
+
+const formItemLayout = {
+  labelCol: {
+    xs: { span: 24 },
+    sm: { span: 8 },
+  },
+  wrapperCol: {
+    xs: { span: 24 },
+    sm: { span: 16 },
+  },
+};
+
+ReactDOM.render(
+  <Form style={{ margin: '0 auto' }}>
+    <Form.Item label="单独 AutoComplete" {...formItemLayout}>
+      <AutoComplete />
+    </Form.Item>
+    <Form.Item label="单独 TreeSelect" {...formItemLayout}>
+      <TreeSelect />
+    </Form.Item>
+    <Form.Item label="添加 Input.Group 正常" {...formItemLayout}>
+      <Input.Group compact>
+        <TreeSelect style={{ width: '30%' }} />
+        <AutoComplete />
+      </Input.Group>
+    </Form.Item>
+    <Form.Item label="包含 search 图标正常" {...formItemLayout}>
+      <AutoComplete>
+        <Input suffix={<Search />} />
+      </AutoComplete>
+    </Form.Item>
+    <Form.Item label="同时有 Input.Group 和图标发生移位" {...formItemLayout}>
+      <Input.Group compact>
+        <TreeSelect style={{ width: '30%' }} />
+        <AutoComplete>
+          <Input suffix={<Search />} />
+        </AutoComplete>
+      </Input.Group>
+    </Form.Item>
+    <Form.Item label="同时有 Input.Group 和 Search 组件发生移位" {...formItemLayout}>
+      <Input.Group compact>
+        <TreeSelect style={{ width: '30%' }} />
+        <AutoComplete>
+          <Input.Search />
+        </AutoComplete>
+      </Input.Group>
+    </Form.Item>
+  </Form>,
+  mountNode,
+);
+```

components/auto-complete/demo/non-case-sensitive.md

@@ -16,16 +16,20 @@ A non-case-sensitive AutoComplete
 ```jsx
 import { AutoComplete } from 'antd';
 
-const dataSource = ['Burns Bay Road', 'Downing Street', 'Wall Street'];
+const options = [
+  { value: 'Burns Bay Road' },
+  { value: 'Downing Street' },
+  { value: 'Wall Street' },
+];
 
 function Complete() {
   return (
     <AutoComplete
       style={{ width: 200 }}
-      dataSource={dataSource}
+      options={options}
       placeholder="try to type `b`"
       filterOption={(inputValue, option) =>
-        option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
+        option.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
       }
     />
   );

components/auto-complete/demo/options.md

@@ -7,11 +7,11 @@ title:
 
 ## zh-CN
 
-也可以直接传 `AutoComplete.Option` 作为 `AutoComplete` 的 `children`，而非使用 `dataSource`。
+也可以直接传 `AutoComplete.Option` 作为 `AutoComplete` 的 `children`，而非使用 `options`。
 
 ## en-US
 
-You could pass `AutoComplete.Option` as children of `AutoComplete`, instead of using `dataSource`。
+You could pass `AutoComplete.Option` as children of `AutoComplete`, instead of using `options`。
 
 ```jsx
 import { AutoComplete } from 'antd';

components/auto-complete/demo/uncertain-category.md

@@ -11,14 +11,12 @@ title:
 
 ## en-US
 
-Demonstration of [Lookup Patterns: Uncertain Category](https://ant.design/docs/spec/reaction#Lookup-Patterns). Basic Usage, set datasource of autocomplete with `dataSource` property.
+Demonstration of [Lookup Patterns: Uncertain Category](https://ant.design/docs/spec/reaction#Lookup-Patterns).
 
 ```jsx
 import { Button, Input, AutoComplete } from 'antd';
 import { Search } from '@ant-design/icons';
 
-const { Option } = AutoComplete;
-
 function onSelect(value) {
   console.log('onSelect', value);
 }
@@ -31,57 +29,50 @@ function searchResult(query) {
   return new Array(getRandomInt(5))
     .join('.')
     .split('.')
-    .map((item, idx) => ({
+    .map((item, idx) => {
-      query,
+      const category = `${query}${idx}`;
-      category: `${query}${idx}`,
+      return {
-      count: getRandomInt(200, 100),
+        value: category,
-    }));
+        label: (
-}
+          <div className="global-search-item">
-
+            <span className="global-search-item-desc">
-function renderOption(item) {
+              Found {query} on{' '}
-  return (
+              <a
-    <Option key={item.category} text={item.category}>
+                href={`https://s.taobao.com/search?q=${query}`}
-      <div className="global-search-item">
+                target="_blank"
-        <span className="global-search-item-desc">
+                rel="noopener noreferrer"
-          Found {item.query} on
+              >
-          <a
+                {category}
-            href={`https://s.taobao.com/search?q=${item.query}`}
+              </a>
-            target="_blank"
+            </span>
-            rel="noopener noreferrer"
+            <span className="global-search-item-count">{getRandomInt(200, 100)} results</span>
-          >
+          </div>
-            {item.category}
+        ),
-          </a>
+      };
-        </span>
+    });
-        <span className="global-search-item-count">{item.count} results</span>
-      </div>
-    </Option>
-  );
 }
 
 class Complete extends React.Component {
   state = {
-    dataSource: [],
+    options: [],
   };
 
   handleSearch = value => {
     this.setState({
-      dataSource: value ? searchResult(value) : [],
+      options: value ? searchResult(value) : [],
     });
   };
 
   render() {
-    const { dataSource } = this.state;
+    const { options } = this.state;
     return (
       <div className="global-search-wrapper" style={{ width: 300 }}>
         <AutoComplete
           className="global-search"
-          size="large"
           style={{ width: '100%' }}
-          dataSource={dataSource.map(renderOption)}
+          options={options}
           onSelect={onSelect}
           onSearch={this.handleSearch}
-          placeholder="input here"
-          optionLabelProp="text"
         >
           <Input
             suffix={
@@ -94,6 +85,8 @@ class Complete extends React.Component {
                 <Search />
               </Button>
             }
+            size="large"
+            placeholder="input here"
           />
         </AutoComplete>
       </div>

components/auto-complete/index.en-US.md

@@ -13,11 +13,6 @@ When there is a need for autocomplete functionality.
 
 ## API
 
-```jsx
-const dataSource = ['12345', '23456', '34567'];
-<AutoComplete dataSource={dataSource} />;
-```
-
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | allowClear | Show clear button, effective in multiple mode only. | boolean | false |  |
@@ -25,7 +20,6 @@ const dataSource = ['12345', '23456', '34567'];
 | backfill | backfill selected item the input when using keyboard | boolean | false |  |
 | children (for customize input element) | customize input element | HTMLInputElement <br /><br /> HTMLTextAreaElement <br /><br /> `React.ReactElement<InputProps>` | `<Input />` |  |
 | children (for dataSource) | Data source to auto complete | `React.ReactElement<OptionProps>` <br /><br /> `Array<React.ReactElement<OptionProps>>` | - |  |
-| dataSource | Data source for autocomplete | [DataSourceItemType](https://git.io/vMMKF)\[] | - |  |
 | defaultActiveFirstOption | Whether active first option by default | boolean | true |  |
 | defaultValue | Initial selected option. | string\|string\[] | - |  |
 | disabled | Whether disabled select | boolean | false |  |

components/auto-complete/index.tsx

@@ -1,159 +1,130 @@
+/**
+ * TODO: 4.0
+ * - remove `dataSource`
+ * - `size` not work with customizeInput
+ * - customizeInput not feedback `ENTER` key since accessibility enhancement
+ */
+
 import * as React from 'react';
-import { Option, OptGroup } from 'rc-select';
+import toArray from 'rc-util/lib/Children/toArray';
+import { SelectProps as RcSelectProps } from 'rc-select';
 import classNames from 'classnames';
-import InputElement from './InputElement';
+import omit from 'omit.js';
-import Input, { InputProps } from '../input';
+import Select, { InternalSelectProps, OptionType } from '../select';
-import Select, { AbstractSelectProps, SelectValue, OptionProps, OptGroupProps } from '../select';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
-import { Omit } from '../_util/type';
+import warning from '../_util/warning';
+
+const { Option } = Select;
+
+const InternalSelect = Select as React.ComponentClass<RcSelectProps>;
 
 export interface DataSourceItemObject {
   value: string;
   text: string;
 }
-export type DataSourceItemType =
+export type DataSourceItemType = string | DataSourceItemObject;
-  | string
-  | DataSourceItemObject
-  | React.ReactElement<OptionProps>
-  | React.ReactElement<OptGroupProps>;
 
-export interface AutoCompleteInputProps {
+export interface AutoCompleteProps
-  onChange?: React.FormEventHandler<any>;
+  extends Omit<InternalSelectProps<string>, 'inputIcon' | 'loading' | 'mode' | 'optionLabelProp'> {
-  value: any;
-}
-
-export type ValidInputElement =
-  | HTMLInputElement
-  | HTMLTextAreaElement
-  | React.ReactElement<AutoCompleteInputProps>;
-
-export interface AutoCompleteProps extends Omit<AbstractSelectProps, 'loading'> {
-  value?: SelectValue;
-  defaultValue?: SelectValue;
   dataSource?: DataSourceItemType[];
-  autoFocus?: boolean;
-  backfill?: boolean;
-  optionLabelProp?: string;
-  onChange?: (value: SelectValue) => void;
-  onSelect?: (value: SelectValue, option: Object) => any;
-  onBlur?: (value: SelectValue) => void;
-  onFocus?: () => void;
-  children?:
-    | ValidInputElement
-    | React.ReactElement<InputProps>
-    | React.ReactElement<OptionProps>
-    | Array<React.ReactElement<OptionProps>>;
 }
 
 function isSelectOptionOrSelectOptGroup(child: any): Boolean {
   return child && child.type && (child.type.isSelectOption || child.type.isSelectOptGroup);
 }
 
-export default class AutoComplete extends React.Component<AutoCompleteProps, {}> {
+const AutoComplete: React.RefForwardingComponent<Select, AutoCompleteProps> = (props, ref) => {
-  static Option = Option as React.ClassicComponentClass<OptionProps>;
+  const { prefixCls: customizePrefixCls, className, children, dataSource } = props;
+  const childNodes: React.ReactElement[] = toArray(children);
 
-  static OptGroup = OptGroup as React.ClassicComponentClass<OptGroupProps>;
+  const selectRef = React.useRef<Select>();
 
-  static defaultProps = {
+  React.useImperativeHandle<Select, Select>(ref, () => selectRef.current!);
-    transitionName: 'slide-up',
-    optionLabelProp: 'children',
-    choiceTransitionName: 'zoom',
-    showSearch: false,
-    filterOption: false,
-  };
 
-  private select: any;
+  // ============================= Input =============================
+  let customizeInput: React.ReactElement;
 
-  saveSelect = (node: any) => {
+  if (
-    this.select = node;
+    childNodes.length === 1 &&
-  };
+    React.isValidElement(childNodes[0]) &&
-
+    !isSelectOptionOrSelectOptGroup(childNodes[0])
-  getInputElement = () => {
+  ) {
-    const { children } = this.props;
+    customizeInput = childNodes[0];
-    const element =
-      children && React.isValidElement(children) && children.type !== Option ? (
-        React.Children.only(this.props.children)
-      ) : (
-        <Input />
-      );
-    const elementProps = { ...(element as React.ReactElement<any>).props };
-    // https://github.com/ant-design/ant-design/pull/7742
-    delete elementProps.children;
-    return <InputElement {...elementProps}>{element}</InputElement>;
-  };
-
-  focus() {
-    this.select.focus();
   }
 
-  blur() {
+  const getInputElement = (): React.ReactElement => customizeInput;
-    this.select.blur();
+
+  // ============================ Options ============================
+  let optionChildren: React.ReactNode;
+
+  // [Legacy] convert `children` or `dataSource` into option children
+  if (childNodes.length && isSelectOptionOrSelectOptGroup(childNodes[0])) {
+    optionChildren = children;
+  } else {
+    optionChildren = dataSource
+      ? dataSource.map(item => {
+          if (React.isValidElement(item)) {
+            return item;
+          }
+          switch (typeof item) {
+            case 'string':
+              return <Option key={item}>{item}</Option>;
+            case 'object':
+              return (
+                <Option key={(item as DataSourceItemObject).value}>
+                  {(item as DataSourceItemObject).text}
+                </Option>
+              );
+            default:
+              throw new Error('AutoComplete[dataSource] only supports type `string[] | Object[]`.');
+          }
+        })
+      : [];
   }
 
-  renderAutoComplete = ({ getPrefixCls }: ConfigConsumerProps) => {
+  // ============================ Warning ============================
-    const {
+  React.useEffect(() => {
-      prefixCls: customizePrefixCls,
+    warning(
-      size,
+      !('dataSource' in props),
-      className = '',
+      'AutoComplete',
-      notFoundContent,
+      '`dataSource` is deprecated, please use `options` instead.',
-      optionLabelProp,
-      dataSource,
-      children,
-    } = this.props;
-    const prefixCls = getPrefixCls('select', customizePrefixCls);
-
-    const cls = classNames({
-      [`${prefixCls}-lg`]: size === 'large',
-      [`${prefixCls}-sm`]: size === 'small',
-      [className]: !!className,
-      [`${prefixCls}-show-search`]: true,
-      [`${prefixCls}-auto-complete`]: true,
-    });
-
-    let options;
-    const childArray = React.Children.toArray(children);
-    if (childArray.length && isSelectOptionOrSelectOptGroup(childArray[0])) {
-      options = children;
-    } else {
-      options = dataSource
-        ? dataSource.map(item => {
-            if (React.isValidElement(item)) {
-              return item;
-            }
-            switch (typeof item) {
-              case 'string':
-                return <Option key={item}>{item}</Option>;
-              case 'object':
-                return (
-                  <Option key={(item as DataSourceItemObject).value}>
-                    {(item as DataSourceItemObject).text}
-                  </Option>
-                );
-              default:
-                throw new Error(
-                  'AutoComplete[dataSource] only supports type `string[] | Object[]`.',
-                );
-            }
-          })
-        : [];
-    }
-
-    return (
-      <Select
-        {...this.props}
-        className={cls}
-        mode={Select.SECRET_COMBOBOX_MODE_DO_NOT_USE}
-        optionLabelProp={optionLabelProp}
-        getInputElement={this.getInputElement}
-        notFoundContent={notFoundContent}
-        ref={this.saveSelect}
-      >
-        {options}
-      </Select>
     );
-  };
 
-  render() {
+    warning(
-    return <ConfigConsumer>{this.renderAutoComplete}</ConfigConsumer>;
+      !customizeInput || !('size' in props),
-  }
+      'AutoComplete',
-}
+      'You need to control style self instead of setting `size` when using customize input.',
+    );
+  }, []);
+
+  return (
+    <ConfigConsumer>
+      {({ getPrefixCls }: ConfigConsumerProps) => {
+        const prefixCls = getPrefixCls('select', customizePrefixCls);
+
+        return (
+          <InternalSelect
+            ref={selectRef as any}
+            {...omit(props, ['dataSource'])}
+            prefixCls={prefixCls}
+            className={classNames(className, `${prefixCls}-auto-complete`)}
+            mode={Select.SECRET_COMBOBOX_MODE_DO_NOT_USE as any}
+            getInputElement={getInputElement}
+          >
+            {optionChildren}
+          </InternalSelect>
+        );
+      }}
+    </ConfigConsumer>
+  );
+};
+
+const RefAutoComplete = React.forwardRef<Select, AutoCompleteProps>(AutoComplete);
+
+type RefAutoComplete = typeof RefAutoComplete & {
+  Option: OptionType;
+};
+
+(RefAutoComplete as RefAutoComplete).Option = Option;
+
+export default RefAutoComplete as RefAutoComplete;

components/auto-complete/index.zh-CN.md

@@ -14,11 +14,6 @@ title: AutoComplete
 
 ## API
 
-```jsx
-const dataSource = ['12345', '23456', '34567'];
-<AutoComplete dataSource={dataSource} />;
-```
-
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | allowClear | 支持清除, 单选模式有效 | boolean | false |  |
@@ -26,7 +21,6 @@ const dataSource = ['12345', '23456', '34567'];
 | backfill | 使用键盘选择选项的时候把选中项回填到输入框中 | boolean | false |  |
 | children (自定义输入框) | 自定义输入框 | HTMLInputElement <br /><br /> HTMLTextAreaElement <br /><br /> `React.ReactElement<InputProps>` | `<Input />` |  |
 | children (自动完成的数据源) | 自动完成的数据源 | `React.ReactElement<OptionProps>` <br /><br /> `Array<React.ReactElement<OptionProps>>` | - |  |
-| dataSource | 自动完成的数据源 | [DataSourceItemType](https://git.io/vMMKF)\[] |  |  |
 | defaultActiveFirstOption | 是否默认高亮第一个选项。 | boolean | true |  |
 | defaultValue | 指定默认选中的条目 | string\|string\[]\| 无 |  |
 | disabled | 是否禁用 | boolean | false |  |

components/auto-complete/style/index.less

@@ -8,85 +8,4 @@
 
 .@{autocomplete-prefix-cls} {
   .reset-component;
-
-  &.@{select-prefix-cls} {
-    .@{select-prefix-cls} {
-      &-selection {
-        border: 0;
-        box-shadow: none;
-        &__rendered {
-          height: 100%;
-          margin-right: 0;
-          margin-left: 0;
-          line-height: @input-height-base;
-        }
-        &__placeholder {
-          margin-right: (@input-padding-horizontal-base + 1px);
-          margin-left: (@input-padding-horizontal-base + 1px);
-        }
-
-        &--single {
-          height: auto;
-        }
-      }
-    }
-
-    // Fix https://github.com/ant-design/ant-design/issues/7800
-    .@{select-prefix-cls}-search--inline {
-      position: static;
-      float: left;
-    }
-
-    &-allow-clear {
-      .@{select-prefix-cls}-selection:hover .@{select-prefix-cls}-selection__rendered {
-        margin-right: 0 !important;
-      }
-    }
-
-    .@{input-prefix-cls} {
-      height: @input-height-base;
-      line-height: @line-height-base;
-      background: transparent;
-      border-width: @border-width-base;
-      &:focus,
-      &:hover {
-        .hover;
-      }
-      &[disabled] {
-        .disabled;
-
-        background-color: transparent;
-      }
-    }
-
-    &-lg {
-      .@{select-prefix-cls}-selection__rendered {
-        line-height: @input-height-lg;
-      }
-      .@{input-prefix-cls} {
-        height: @input-height-lg;
-        padding-top: @input-padding-vertical-lg;
-        padding-bottom: @input-padding-vertical-lg;
-      }
-    }
-
-    &-sm {
-      .@{select-prefix-cls}-selection__rendered {
-        line-height: @input-height-sm;
-      }
-      .@{input-prefix-cls} {
-        height: @input-height-sm;
-        padding-top: @input-padding-vertical-sm;
-        padding-bottom: @input-padding-vertical-sm;
-      }
-    }
-  }
-}
-
-// https://github.com/ant-design/ant-design/issues/14156
-.@{input-prefix-cls}-group > .@{autocomplete-prefix-cls} {
-  .@{select-prefix-cls}-search__field.@{input-prefix-cls}-affix-wrapper {
-    display: inline;
-    float: none;
-  }
 }

components/auto-complete/style/index.tsx

@@ -3,4 +3,3 @@ import './index.less';
 
 // style dependencies
 import '../../select/style';
-import '../../input/style';

components/calendar/Header.tsx

@@ -64,7 +64,7 @@ export default class Header extends React.Component<HeaderProps, any> {
     return (
       <Select
         size={fullscreen ? 'default' : 'small'}
-        dropdownMatchSelectWidth={false}
+        dropdownMatchSelectWidth={100}
         className={`${prefixCls}-year-select`}
         onChange={this.onYearChange}
         value={String(year)}
@@ -97,7 +97,7 @@ export default class Header extends React.Component<HeaderProps, any> {
     return (
       <Select
         size={fullscreen ? 'default' : 'small'}
-        dropdownMatchSelectWidth={false}
+        dropdownMatchSelectWidth={100}
         className={`${prefixCls}-month-select`}
         value={String(month)}
         onChange={this.onMonthChange}

components/calendar/__tests__/__snapshots__/index.test.js.snap

@@ -8,108 +8,118 @@ exports[`Calendar Calendar should support locale 1`] = `
     class="ant-fullcalendar-header"
   >
     <div
-      class="ant-fullcalendar-year-select ant-select ant-select-enabled"
+      class="ant-select ant-fullcalendar-year-select ant-select-single ant-select-show-arrow"
     >
       <div
-        aria-autocomplete="list"
+        class="ant-select-selector"
-        aria-controls="test-uuid"
-        aria-expanded="false"
-        aria-haspopup="true"
-        class="ant-select-selection
-            ant-select-selection--single"
-        role="combobox"
-        tabindex="0"
       >
-        <div
-          class="ant-select-selection__rendered"
-        >
-          <div
-            class="ant-select-selection-selected-value"
-            style="display: block; opacity: 1;"
-            title="2018年"
-          >
-            2018年
-          </div>
-        </div>
         <span
-          class="ant-select-arrow"
+          class="ant-select-selection-search"
-          style="user-select: none;"
-          unselectable="on"
         >
-          <span
+          <input
-            aria-label="down"
+            aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
-            class="anticon anticon-down ant-select-arrow-icon"
+            aria-autocomplete="list"
-            role="img"
+            aria-controls="rc_select_TEST_OR_SSR_list"
-          >
+            aria-haspopup="listbox"
-            <svg
+            aria-owns="rc_select_TEST_OR_SSR_list"
-              aria-hidden="true"
+            autocomplete="off"
-              class=""
+            class="ant-select-selection-search-input"
-              data-icon="down"
+            id="rc_select_TEST_OR_SSR"
-              fill="currentColor"
+            role="combobox"
-              focusable="false"
+            style="opacity: 0;"
-              height="1em"
+            value=""
-              viewBox="64 64 896 896"
+          />
-              width="1em"
+        </span>
-            >
+        <span
-              <path
+          class="ant-select-selection-item"
-                d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+        >
-              />
+          2018年
-            </svg>
-          </span>
         </span>
       </div>
+      <span
+        aria-hidden="true"
+        class="ant-select-arrow"
+        style="user-select: none;"
+        unselectable="on"
+      >
+        <span
+          aria-label="down"
+          class="anticon anticon-down"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+      </span>
     </div>
     <div
-      class="ant-fullcalendar-month-select ant-select ant-select-enabled"
+      class="ant-select ant-fullcalendar-month-select ant-select-single ant-select-show-arrow"
     >
       <div
-        aria-autocomplete="list"
+        class="ant-select-selector"
-        aria-controls="test-uuid"
-        aria-expanded="false"
-        aria-haspopup="true"
-        class="ant-select-selection
-            ant-select-selection--single"
-        role="combobox"
-        tabindex="0"
       >
-        <div
-          class="ant-select-selection__rendered"
-        >
-          <div
-            class="ant-select-selection-selected-value"
-            style="display: block; opacity: 1;"
-            title="Oct"
-          >
-            Oct
-          </div>
-        </div>
         <span
-          class="ant-select-arrow"
+          class="ant-select-selection-search"
-          style="user-select: none;"
-          unselectable="on"
         >
-          <span
+          <input
-            aria-label="down"
+            aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
-            class="anticon anticon-down ant-select-arrow-icon"
+            aria-autocomplete="list"
-            role="img"
+            aria-controls="rc_select_TEST_OR_SSR_list"
-          >
+            aria-haspopup="listbox"
-            <svg
+            aria-owns="rc_select_TEST_OR_SSR_list"
-              aria-hidden="true"
+            autocomplete="off"
-              class=""
+            class="ant-select-selection-search-input"
-              data-icon="down"
+            id="rc_select_TEST_OR_SSR"
-              fill="currentColor"
+            role="combobox"
-              focusable="false"
+            style="opacity: 0;"
-              height="1em"
+            value=""
-              viewBox="64 64 896 896"
+          />
-              width="1em"
+        </span>
-            >
+        <span
-              <path
+          class="ant-select-selection-item"
-                d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+        >
-              />
+          Oct
-            </svg>
-          </span>
         </span>
       </div>
+      <span
+        aria-hidden="true"
+        class="ant-select-arrow"
+        style="user-select: none;"
+        unselectable="on"
+      >
+        <span
+          aria-label="down"
+          class="anticon anticon-down"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+      </span>
     </div>
     <div
       class="ant-radio-group ant-radio-group-outline ant-radio-group-default"

components/calendar/__tests__/index.test.js

@@ -13,6 +13,23 @@ describe('Calendar', () => {
   mountTest(Calendar);
   mountTest(() => <Header value={Moment()} />);
 
+  function openSelect(wrapper, className) {
+    wrapper
+      .find(className)
+      .find('.ant-select-selector')
+      .simulate('mousedown');
+  }
+
+  function findSelectItem(wrapper) {
+    return wrapper.find('.ant-select-item-option');
+  }
+
+  function clickSelectItem(wrapper, index = 0) {
+    findSelectItem(wrapper)
+      .at(index)
+      .simulate('click');
+  }
+
   it('Calendar should be selectable', () => {
     const onSelect = jest.fn();
     const wrapper = mount(<Calendar onSelect={onSelect} />);
@@ -102,20 +119,11 @@ describe('Calendar', () => {
   it('months other than in valid range should not be shown in header', () => {
     const validRange = [Moment('2017-02-02'), Moment('2018-05-18')];
     const wrapper = mount(<Calendar validRange={validRange} />);
-    wrapper
+    openSelect(wrapper, '.ant-fullcalendar-year-select');
-      .find('.ant-fullcalendar-year-select')
+    clickSelectItem(wrapper);
-      .hostNodes()
+    openSelect(wrapper, '.ant-fullcalendar-month-select');
-      .simulate('click');
-    wrapper
-      .find('.ant-select-dropdown-menu-item')
-      .first()
-      .simulate('click');
-    wrapper
-      .find('.ant-fullcalendar-month-select')
-      .hostNodes()
-      .simulate('click');
     // 2 years and 11 months
-    expect(wrapper.find('.ant-select-dropdown-menu-item').length).toBe(13);
+    expect(wrapper.find('.ant-select-item-option').length).toBe(13);
   });
 
   it('getDateRange should returns a disabledDate function', () => {
@@ -193,14 +201,8 @@ describe('Calendar', () => {
         locale={{ year: '年' }}
       />,
     );
-    wrapper
+    openSelect(wrapper, '.ant-fullcalendar-year-select');
-      .find('.ant-fullcalendar-year-select')
+    clickSelectItem(wrapper);
-      .hostNodes()
-      .simulate('click');
-    wrapper
-      .find('.ant-select-dropdown-menu-item')
-      .at(0)
-      .simulate('click');
   };
 
   it('if value.month > end.month, set value.month to end.month', () => {
@@ -235,14 +237,8 @@ describe('Calendar', () => {
         type="month"
       />,
     );
-    wrapper
+    openSelect(wrapper, '.ant-fullcalendar-month-select');
-      .find('.ant-fullcalendar-month-select')
+    clickSelectItem(wrapper);
-      .hostNodes()
-      .simulate('click');
-    wrapper
-      .find('.ant-select-dropdown-menu-item')
-      .at(0)
-      .simulate('click');
     expect(onValueChange).toHaveBeenCalledWith(value.month(10));
   });
 
@@ -258,7 +254,7 @@ describe('Calendar', () => {
       />,
     );
     wrapper
-      .find('input')
+      .find('input[type="radio"]')
       .at(1)
       .simulate('change');
     expect(onTypeChange).toHaveBeenCalledWith('year');
@@ -293,11 +289,10 @@ describe('Calendar', () => {
     });
     const wrapperWithYear = mount(<Calendar fullscreen={false} headerRender={headerRender} />);
 
-    wrapperWithYear.find('.ant-select').simulate('click');
+    openSelect(wrapperWithYear, '.ant-select');
     wrapperWithYear.update();
 
-    wrapperWithYear
+    findSelectItem(wrapperWithYear)
-      .find('.year-item')
       .last()
       .simulate('click');
 
@@ -338,11 +333,10 @@ describe('Calendar', () => {
       <Calendar fullscreen={false} headerRender={headerRenderWithMonth} />,
     );
 
-    wrapperWithMonth.find('.ant-select').simulate('click');
+    openSelect(wrapperWithMonth, '.ant-select');
     wrapperWithMonth.update();
 
-    wrapperWithMonth
+    findSelectItem(wrapperWithMonth)
-      .find('.month-item')
       .last()
       .simulate('click');
     expect(onMonthChange).toHaveBeenCalled();

components/calendar/demo/customize-header.md

@@ -60,14 +60,14 @@ ReactDOM.render(
         return (
           <div style={{ padding: 10 }}>
             <div style={{ marginBottom: '10px' }}>Custom header </div>
-            <Row type="flex" justify="space-between">
+            <Row type="flex" style={{ flexWrap: 'nowrap' }} gutter={8}>
-              <Col>
+              <Col style={{ flex: 'none' }}>
                 <Group size="small" onChange={e => onTypeChange(e.target.value)} value={type}>
                   <Button value="month">Month</Button>
                   <Button value="year">Year</Button>
                 </Group>
               </Col>
-              <Col>
+              <Col style={{ flex: 'auto' }}>
                 <Select
                   size="small"
                   dropdownMatchSelectWidth={false}
@@ -81,7 +81,7 @@ ReactDOM.render(
                   {options}
                 </Select>
               </Col>
-              <Col>
+              <Col style={{ flex: 'auto' }}>
                 <Select
                   size="small"
                   dropdownMatchSelectWidth={false}

components/calendar/style/index.less

@@ -10,19 +10,20 @@
   outline: none;
 
   .@{ant-prefix}-select&-year-select {
-    min-width: 90px;
+    width: 90px;
 
     &.@{ant-prefix}-select-sm {
-      min-width: 70px;
+      width: 70px;
     }
   }
 
   .@{ant-prefix}-select&-month-select {
-    min-width: 80px;
+    width: 80px;
     margin-left: 8px;
+    text-align: left;
 
     &.@{ant-prefix}-select-sm {
-      min-width: 70px;
+      width: 70px;
     }
   }
 

components/collapse/__tests__/__snapshots__/demo.test.js.snap

@@ -658,56 +658,60 @@ exports[`renders ./components/collapse/demo/extra.md correctly 1`] = `
   <br />
   Expand Icon Position: 
   <div
-    class="ant-select ant-select-enabled"
+    class="ant-select ant-select-single ant-select-show-arrow"
   >
     <div
-      aria-autocomplete="list"
+      class="ant-select-selector"
-      aria-controls=""
-      aria-expanded="false"
-      aria-haspopup="true"
-      class="ant-select-selection
-            ant-select-selection--single"
-      role="combobox"
-      tabindex="0"
     >
-      <div
-        class="ant-select-selection__rendered"
-      >
-        <div
-          class="ant-select-selection-selected-value"
-          style="display:block;opacity:1"
-          title="left"
-        >
-          left
-        </div>
-      </div>
       <span
-        class="ant-select-arrow"
+        class="ant-select-selection-search"
-        style="user-select:none;-webkit-user-select:none"
-        unselectable="on"
       >
-        <span
+        <input
-          aria-label="down"
+          aria-activedescendant="undefined_list_0"
-          class="anticon anticon-down ant-select-arrow-icon"
+          aria-autocomplete="list"
-          role="img"
+          aria-controls="undefined_list"
-        >
+          aria-haspopup="listbox"
-          <svg
+          aria-owns="undefined_list"
-            aria-hidden="true"
+          autocomplete="off"
-            class=""
+          class="ant-select-selection-search-input"
-            data-icon="down"
+          role="combobox"
-            fill="currentColor"
+          style="opacity:0"
-            focusable="false"
+          value=""
-            height="1em"
+        />
-            viewBox="64 64 896 896"
+      </span>
-            width="1em"
+      <span
-          >
+        class="ant-select-selection-item"
-            <path
+      >
-              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+        left
-            />
-          </svg>
-        </span>
       </span>
     </div>
+    <span
+      aria-hidden="true"
+      class="ant-select-arrow"
+      style="user-select:none;-webkit-user-select:none"
+      unselectable="on"
+    >
+      <span
+        aria-label="down"
+        class="anticon anticon-down"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="down"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+          />
+        </svg>
+      </span>
+    </span>
   </div>
 </div>
 `;

components/empty/__tests__/__snapshots__/demo.test.js.snap

@@ -100,49 +100,59 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
       Select
     </h3>
     <div
-      class="ant-select ant-select-enabled"
+      class="ant-select ant-select-single ant-select-show-arrow"
       style="width:200px"
     >
       <div
-        aria-autocomplete="list"
+        class="ant-select-selector"
-        aria-controls=""
-        aria-expanded="false"
-        aria-haspopup="true"
-        class="ant-select-selection
-            ant-select-selection--single"
-        role="combobox"
-        tabindex="0"
       >
-        <div
-          class="ant-select-selection__rendered"
-        />
         <span
-          class="ant-select-arrow"
+          class="ant-select-selection-search"
-          style="user-select:none;-webkit-user-select:none"
-          unselectable="on"
         >
-          <span
+          <input
-            aria-label="down"
+            aria-activedescendant="undefined_list_0"
-            class="anticon anticon-down ant-select-arrow-icon"
+            aria-autocomplete="list"
-            role="img"
+            aria-controls="undefined_list"
-          >
+            aria-haspopup="listbox"
-            <svg
+            aria-owns="undefined_list"
-              aria-hidden="true"
+            autocomplete="off"
-              class=""
+            class="ant-select-selection-search-input"
-              data-icon="down"
+            role="combobox"
-              fill="currentColor"
+            style="opacity:0"
-              focusable="false"
+            value=""
-              height="1em"
+          />
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-              />
-            </svg>
-          </span>
         </span>
+        <span
+          class="ant-select-selection-placeholder"
+        />
       </div>
+      <span
+        aria-hidden="true"
+        class="ant-select-arrow"
+        style="user-select:none;-webkit-user-select:none"
+        unselectable="on"
+      >
+        <span
+          aria-label="down"
+          class="anticon anticon-down"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+      </span>
     </div>
     <h3>
       TreeSelect

components/form/__tests__/__snapshots__/demo.test.js.snap

@@ -487,57 +487,61 @@ exports[`renders ./components/form/demo/control-hooks.md correctly 1`] = `
         class="ant-form-item-control-input"
       >
         <div
-          class="ant-select ant-select-enabled ant-select-allow-clear"
+          class="ant-select ant-select-single ant-select-allow-clear ant-select-show-arrow"
-          id="control-hooks_gender"
         >
           <div
-            aria-autocomplete="list"
+            class="ant-select-selector"
-            aria-controls=""
-            aria-expanded="false"
-            aria-haspopup="true"
-            class="ant-select-selection
-            ant-select-selection--single"
-            role="combobox"
-            tabindex="0"
           >
-            <div
-              class="ant-select-selection__rendered"
-            >
-              <div
-                class="ant-select-selection__placeholder"
-                style="display:block;user-select:none;-webkit-user-select:none"
-                unselectable="on"
-              >
-                Select a option and change input text above
-              </div>
-            </div>
             <span
-              class="ant-select-arrow"
+              class="ant-select-selection-search"
-              style="user-select:none;-webkit-user-select:none"
-              unselectable="on"
             >
-              <span
+              <input
-                aria-label="down"
+                aria-activedescendant="control-hooks_gender_list_0"
-                class="anticon anticon-down ant-select-arrow-icon"
+                aria-autocomplete="list"
-                role="img"
+                aria-controls="control-hooks_gender_list"
-              >
+                aria-haspopup="listbox"
-                <svg
+                aria-owns="control-hooks_gender_list"
-                  aria-hidden="true"
+                autocomplete="off"
-                  class=""
+                class="ant-select-selection-search-input"
-                  data-icon="down"
+                id="control-hooks_gender"
-                  fill="currentColor"
+                role="combobox"
-                  focusable="false"
+                style="opacity:0"
-                  height="1em"
+                value=""
-                  viewBox="64 64 896 896"
+              />
-                  width="1em"
+            </span>
-                >
+            <span
-                  <path
+              class="ant-select-selection-placeholder"
-                    d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            >
-                  />
+              Select a option and change input text above
-                </svg>
-              </span>
             </span>
           </div>
+          <span
+            aria-hidden="true"
+            class="ant-select-arrow"
+            style="user-select:none;-webkit-user-select:none"
+            unselectable="on"
+          >
+            <span
+              aria-label="down"
+              class="anticon anticon-down"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                class=""
+                data-icon="down"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                />
+              </svg>
+            </span>
+          </span>
         </div>
       </div>
     </div>
@@ -636,57 +640,61 @@ exports[`renders ./components/form/demo/control-ref.md correctly 1`] = `
         class="ant-form-item-control-input"
       >
         <div
-          class="ant-select ant-select-enabled ant-select-allow-clear"
+          class="ant-select ant-select-single ant-select-allow-clear ant-select-show-arrow"
-          id="control-ref_gender"
         >
           <div
-            aria-autocomplete="list"
+            class="ant-select-selector"
-            aria-controls=""
-            aria-expanded="false"
-            aria-haspopup="true"
-            class="ant-select-selection
-            ant-select-selection--single"
-            role="combobox"
-            tabindex="0"
           >
-            <div
-              class="ant-select-selection__rendered"
-            >
-              <div
-                class="ant-select-selection__placeholder"
-                style="display:block;user-select:none;-webkit-user-select:none"
-                unselectable="on"
-              >
-                Select a option and change input text above
-              </div>
-            </div>
             <span
-              class="ant-select-arrow"
+              class="ant-select-selection-search"
-              style="user-select:none;-webkit-user-select:none"
-              unselectable="on"
             >
-              <span
+              <input
-                aria-label="down"
+                aria-activedescendant="control-ref_gender_list_0"
-                class="anticon anticon-down ant-select-arrow-icon"
+                aria-autocomplete="list"
-                role="img"
+                aria-controls="control-ref_gender_list"
-              >
+                aria-haspopup="listbox"
-                <svg
+                aria-owns="control-ref_gender_list"
-                  aria-hidden="true"
+                autocomplete="off"
-                  class=""
+                class="ant-select-selection-search-input"
-                  data-icon="down"
+                id="control-ref_gender"
-                  fill="currentColor"
+                role="combobox"
-                  focusable="false"
+                style="opacity:0"
-                  height="1em"
+                value=""
-                  viewBox="64 64 896 896"
+              />
-                  width="1em"
+            </span>
-                >
+            <span
-                  <path
+              class="ant-select-selection-placeholder"
-                    d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            >
-                  />
+              Select a option and change input text above
-                </svg>
-              </span>
             </span>
           </div>
+          <span
+            aria-hidden="true"
+            class="ant-select-arrow"
+            style="user-select:none;-webkit-user-select:none"
+            unselectable="on"
+          >
+            <span
+              aria-label="down"
+              class="anticon anticon-down"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                class=""
+                data-icon="down"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                />
+              </svg>
+            </span>
+          </span>
         </div>
       </div>
     </div>
@@ -763,57 +771,61 @@ exports[`renders ./components/form/demo/customized-form-controls.md correctly 1`
             value="0"
           />
           <div
-            class="ant-select ant-select-enabled"
+            class="ant-select ant-select-single ant-select-show-arrow"
             style="width:80px"
           >
             <div
-              aria-autocomplete="list"
+              class="ant-select-selector"
-              aria-controls=""
-              aria-expanded="false"
-              aria-haspopup="true"
-              class="ant-select-selection
-            ant-select-selection--single"
-              role="combobox"
-              tabindex="0"
             >
-              <div
-                class="ant-select-selection__rendered"
-              >
-                <div
-                  class="ant-select-selection-selected-value"
-                  style="display:block;opacity:1"
-                  title="RMB"
-                >
-                  RMB
-                </div>
-              </div>
               <span
-                class="ant-select-arrow"
+                class="ant-select-selection-search"
-                style="user-select:none;-webkit-user-select:none"
-                unselectable="on"
               >
-                <span
+                <input
-                  aria-label="down"
+                  aria-activedescendant="undefined_list_0"
-                  class="anticon anticon-down ant-select-arrow-icon"
+                  aria-autocomplete="list"
-                  role="img"
+                  aria-controls="undefined_list"
-                >
+                  aria-haspopup="listbox"
-                  <svg
+                  aria-owns="undefined_list"
-                    aria-hidden="true"
+                  autocomplete="off"
-                    class=""
+                  class="ant-select-selection-search-input"
-                    data-icon="down"
+                  role="combobox"
-                    fill="currentColor"
+                  style="opacity:0"
-                    focusable="false"
+                  value=""
-                    height="1em"
+                />
-                    viewBox="64 64 896 896"
+              </span>
-                    width="1em"
+              <span
-                  >
+                class="ant-select-selection-item"
-                    <path
+              >
-                      d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                RMB
-                    />
-                  </svg>
-                </span>
               </span>
             </div>
+            <span
+              aria-hidden="true"
+              class="ant-select-arrow"
+              style="user-select:none;-webkit-user-select:none"
+              unselectable="on"
+            >
+              <span
+                aria-label="down"
+                class="anticon anticon-down"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  class=""
+                  data-icon="down"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                  />
+                </svg>
+              </span>
+            </span>
           </div>
         </span>
       </div>
@@ -2245,58 +2257,62 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
               class="ant-input-group-addon"
             >
               <div
-                class="ant-select ant-select-enabled"
+                class="ant-select ant-select-single ant-select-show-arrow"
-                id="register_prefix"
                 style="width:70px"
               >
                 <div
-                  aria-autocomplete="list"
+                  class="ant-select-selector"
-                  aria-controls=""
-                  aria-expanded="false"
-                  aria-haspopup="true"
-                  class="ant-select-selection
-            ant-select-selection--single"
-                  role="combobox"
-                  tabindex="0"
                 >
-                  <div
-                    class="ant-select-selection__rendered"
-                  >
-                    <div
-                      class="ant-select-selection-selected-value"
-                      style="display:block;opacity:1"
-                      title="+86"
-                    >
-                      +86
-                    </div>
-                  </div>
                   <span
-                    class="ant-select-arrow"
+                    class="ant-select-selection-search"
-                    style="user-select:none;-webkit-user-select:none"
-                    unselectable="on"
                   >
-                    <span
+                    <input
-                      aria-label="down"
+                      aria-activedescendant="register_prefix_list_0"
-                      class="anticon anticon-down ant-select-arrow-icon"
+                      aria-autocomplete="list"
-                      role="img"
+                      aria-controls="register_prefix_list"
-                    >
+                      aria-haspopup="listbox"
-                      <svg
+                      aria-owns="register_prefix_list"
-                        aria-hidden="true"
+                      autocomplete="off"
-                        class=""
+                      class="ant-select-selection-search-input"
-                        data-icon="down"
+                      id="register_prefix"
-                        fill="currentColor"
+                      role="combobox"
-                        focusable="false"
+                      style="opacity:0"
-                        height="1em"
+                      value=""
-                        viewBox="64 64 896 896"
+                    />
-                        width="1em"
+                  </span>
-                      >
+                  <span
-                        <path
+                    class="ant-select-selection-item"
-                          d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                  >
-                        />
+                    +86
-                      </svg>
-                    </span>
                   </span>
                 </div>
+                <span
+                  aria-hidden="true"
+                  class="ant-select-arrow"
+                  style="user-select:none;-webkit-user-select:none"
+                  unselectable="on"
+                >
+                  <span
+                    aria-label="down"
+                    class="anticon anticon-down"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class=""
+                      data-icon="down"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                      />
+                    </svg>
+                  </span>
+                </span>
               </div>
             </span>
             <input
@@ -2331,74 +2347,32 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
         class="ant-form-item-control-input"
       >
         <div
-          class="ant-select-show-search ant-select-auto-complete ant-select ant-select-combobox ant-select-enabled"
+          class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
-          id="register_website"
         >
           <div
-            aria-autocomplete="list"
+            class="ant-select-selector"
-            aria-controls=""
-            aria-expanded="false"
-            aria-haspopup="true"
-            class="ant-select-selection
-            ant-select-selection--single"
-            role="combobox"
           >
-            <div
-              class="ant-select-selection__rendered"
-            >
-              <div
-                class="ant-select-selection__placeholder"
-                style="display:block;user-select:none;-webkit-user-select:none"
-                unselectable="on"
-              >
-                website
-              </div>
-              <ul>
-                <li
-                  class="ant-select-search ant-select-search--inline"
-                >
-                  <div
-                    class="ant-select-search__field__wrap"
-                  >
-                    <input
-                      class="ant-input ant-select-search__field"
-                      type="text"
-                      value=""
-                    />
-                    <span
-                      class="ant-select-search__field__mirror"
-                    >
-                       
-                    </span>
-                  </div>
-                </li>
-              </ul>
-            </div>
             <span
-              class="ant-select-arrow"
+              class="ant-select-selection-search"
-              style="user-select:none;-webkit-user-select:none"
-              unselectable="on"
             >
-              <span
+              <input
-                aria-label="down"
+                aria-activedescendant="register_website_list_0"
-                class="anticon anticon-down ant-select-arrow-icon"
+                aria-autocomplete="list"
-                role="img"
+                aria-controls="register_website_list"
-              >
+                aria-haspopup="listbox"
-                <svg
+                aria-owns="register_website_list"
-                  aria-hidden="true"
+                autocomplete="off"
-                  class=""
+                class="ant-input ant-select-selection-search-input"
-                  data-icon="down"
+                id="register_website"
-                  fill="currentColor"
+                role="combobox"
-                  focusable="false"
+                type="text"
-                  height="1em"
+                value=""
-                  viewBox="64 64 896 896"
+              />
-                  width="1em"
+            </span>
-                >
+            <span
-                  <path
+              class="ant-select-selection-placeholder"
-                    d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            >
-                  />
+              website
-                </svg>
-              </span>
             </span>
           </div>
         </div>
@@ -2976,57 +2950,61 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
         class="ant-form-item-control-input"
       >
         <div
-          class="ant-select ant-select-enabled"
+          class="ant-select ant-select-single ant-select-show-arrow"
-          id="validate_other_select"
         >
           <div
-            aria-autocomplete="list"
+            class="ant-select-selector"
-            aria-controls=""
-            aria-expanded="false"
-            aria-haspopup="true"
-            class="ant-select-selection
-            ant-select-selection--single"
-            role="combobox"
-            tabindex="0"
           >
-            <div
-              class="ant-select-selection__rendered"
-            >
-              <div
-                class="ant-select-selection__placeholder"
-                style="display:block;user-select:none;-webkit-user-select:none"
-                unselectable="on"
-              >
-                Please select a country
-              </div>
-            </div>
             <span
-              class="ant-select-arrow"
+              class="ant-select-selection-search"
-              style="user-select:none;-webkit-user-select:none"
-              unselectable="on"
             >
-              <span
+              <input
-                aria-label="down"
+                aria-activedescendant="validate_other_select_list_0"
-                class="anticon anticon-down ant-select-arrow-icon"
+                aria-autocomplete="list"
-                role="img"
+                aria-controls="validate_other_select_list"
-              >
+                aria-haspopup="listbox"
-                <svg
+                aria-owns="validate_other_select_list"
-                  aria-hidden="true"
+                autocomplete="off"
-                  class=""
+                class="ant-select-selection-search-input"
-                  data-icon="down"
+                id="validate_other_select"
-                  fill="currentColor"
+                role="combobox"
-                  focusable="false"
+                style="opacity:0"
-                  height="1em"
+                value=""
-                  viewBox="64 64 896 896"
+              />
-                  width="1em"
+            </span>
-                >
+            <span
-                  <path
+              class="ant-select-selection-placeholder"
-                    d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            >
-                  />
+              Please select a country
-                </svg>
-              </span>
             </span>
           </div>
+          <span
+            aria-hidden="true"
+            class="ant-select-arrow"
+            style="user-select:none;-webkit-user-select:none"
+            unselectable="on"
+          >
+            <span
+              aria-label="down"
+              class="anticon anticon-down"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                class=""
+                data-icon="down"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                />
+              </svg>
+            </span>
+          </span>
         </div>
       </div>
     </div>
@@ -3052,50 +3030,40 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
         class="ant-form-item-control-input"
       >
         <div
-          class="ant-select ant-select-enabled"
+          class="ant-select ant-select-multiple ant-select-show-search"
-          id="validate_other_select-multiple"
         >
           <div
-            aria-autocomplete="list"
+            class="ant-select-selector"
-            aria-controls=""
-            aria-expanded="false"
-            aria-haspopup="true"
-            class="ant-select-selection
-            ant-select-selection--multiple"
-            role="combobox"
           >
-            <div
+            <span
-              class="ant-select-selection__rendered"
+              class="ant-select-selection-search"
+              style="width:0"
             >
-              <div
+              <input
-                class="ant-select-selection__placeholder"
+                aria-activedescendant="validate_other_select-multiple_list_0"
-                style="display:block;user-select:none;-webkit-user-select:none"
+                aria-autocomplete="list"
-                unselectable="on"
+                aria-controls="validate_other_select-multiple_list"
+                aria-haspopup="listbox"
+                aria-owns="validate_other_select-multiple_list"
+                autocomplete="off"
+                class="ant-select-selection-search-input"
+                id="validate_other_select-multiple"
+                role="combobox"
+                style="opacity:0"
+                value=""
+              />
+              <span
+                aria-hidden="true"
+                class="ant-select-selection-search-mirror"
               >
-                Please select favourite colors
+                 
-              </div>
+              </span>
-              <ul>
+            </span>
-                <li
+            <span
-                  class="ant-select-search ant-select-search--inline"
+              class="ant-select-selection-placeholder"
-                >
+            >
-                  <div
+              Please select favourite colors
-                    class="ant-select-search__field__wrap"
+            </span>
-                  >
-                    <input
-                      autocomplete="off"
-                      class="ant-select-search__field"
-                      id="validate_other_select-multiple"
-                      value=""
-                    />
-                    <span
-                      class="ant-select-search__field__mirror"
-                    >
-                       
-                    </span>
-                  </div>
-                </li>
-              </ul>
-            </div>
           </div>
         </div>
       </div>
@@ -4434,56 +4402,60 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
         class="ant-form-item-control-input"
       >
         <div
-          class="ant-select ant-select-enabled"
+          class="ant-select ant-select-single ant-select-show-arrow"
         >
           <div
-            aria-autocomplete="list"
+            class="ant-select-selector"
-            aria-controls=""
-            aria-expanded="false"
-            aria-haspopup="true"
-            class="ant-select-selection
-            ant-select-selection--single"
-            role="combobox"
-            tabindex="0"
           >
-            <div
-              class="ant-select-selection__rendered"
-            >
-              <div
-                class="ant-select-selection-selected-value"
-                style="display:block;opacity:1"
-                title="Option 1"
-              >
-                Option 1
-              </div>
-            </div>
             <span
-              class="ant-select-arrow"
+              class="ant-select-selection-search"
-              style="user-select:none;-webkit-user-select:none"
-              unselectable="on"
             >
-              <span
+              <input
-                aria-label="down"
+                aria-activedescendant="undefined_list_0"
-                class="anticon anticon-down ant-select-arrow-icon"
+                aria-autocomplete="list"
-                role="img"
+                aria-controls="undefined_list"
-              >
+                aria-haspopup="listbox"
-                <svg
+                aria-owns="undefined_list"
-                  aria-hidden="true"
+                autocomplete="off"
-                  class=""
+                class="ant-select-selection-search-input"
-                  data-icon="down"
+                role="combobox"
-                  fill="currentColor"
+                style="opacity:0"
-                  focusable="false"
+                value=""
-                  height="1em"
+              />
-                  viewBox="64 64 896 896"
+            </span>
-                  width="1em"
+            <span
-                >
+              class="ant-select-selection-item"
-                  <path
+            >
-                    d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+              Option 1
-                  />
-                </svg>
-              </span>
             </span>
           </div>
+          <span
+            aria-hidden="true"
+            class="ant-select-arrow"
+            style="user-select:none;-webkit-user-select:none"
+            unselectable="on"
+          >
+            <span
+              aria-label="down"
+              class="anticon anticon-down"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                class=""
+                data-icon="down"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                />
+              </svg>
+            </span>
+          </span>
         </div>
         <span
           class="ant-form-item-children-icon"

components/form/style/inline.less

@@ -5,10 +5,10 @@
   flex-wrap: wrap;
 
   .@{form-prefix-cls}-item {
+    flex: none;
+    flex-wrap: nowrap;
     margin-right: 16px;
     margin-bottom: 0;
-    flex-wrap: nowrap;
-    flex: none;
 
     &-with-help {
       margin-bottom: @form-item-margin-bottom;

components/list/__tests__/__snapshots__/pagination.test.js.snap

@@ -195,56 +195,61 @@ exports[`List.pagination should change page size work 1`] = `
     class="ant-pagination-options"
   >
     <div
-      class="ant-pagination-options-size-changer ant-select ant-select-enabled"
+      class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow"
     >
       <div
-        aria-autocomplete="list"
+        class="ant-select-selector"
-        aria-controls="test-uuid"
-        aria-expanded="false"
-        aria-haspopup="true"
-        class="ant-select-selection
-            ant-select-selection--single"
-        role="combobox"
-        tabindex="0"
       >
-        <div
-          class="ant-select-selection__rendered"
-        >
-          <div
-            class="ant-select-selection-selected-value"
-            style="display: block; opacity: 1;"
-            title="10 / page"
-          >
-            10 / page
-          </div>
-        </div>
         <span
-          class="ant-select-arrow"
+          class="ant-select-selection-search"
-          style="user-select: none;"
-          unselectable="on"
         >
-          <span
+          <input
-            aria-label="down"
+            aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
-            class="anticon anticon-down ant-select-arrow-icon"
+            aria-autocomplete="list"
-            role="img"
+            aria-controls="rc_select_TEST_OR_SSR_list"
-          >
+            aria-haspopup="listbox"
-            <svg
+            aria-owns="rc_select_TEST_OR_SSR_list"
-              aria-hidden="true"
+            autocomplete="off"
-              class=""
+            class="ant-select-selection-search-input"
-              data-icon="down"
+            id="rc_select_TEST_OR_SSR"
-              fill="currentColor"
+            role="combobox"
-              focusable="false"
+            style="opacity: 0;"
-              height="1em"
+            value=""
-              viewBox="64 64 896 896"
+          />
-              width="1em"
+        </span>
-            >
+        <span
-              <path
+          class="ant-select-selection-item"
-                d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+        >
-              />
+          10 / page
-            </svg>
-          </span>
         </span>
       </div>
+      <span
+        aria-hidden="true"
+        class="ant-select-arrow"
+        style="user-select: none;"
+        unselectable="on"
+      >
+        <span
+          aria-label="down"
+          class="anticon anticon-down"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+      </span>
     </div>
   </li>
 </ul>
@@ -328,111 +333,168 @@ exports[`List.pagination should change page size work 2`] = `
     class="ant-pagination-options"
   >
     <div
-      class="ant-pagination-options-size-changer ant-select ant-select-focused ant-select-enabled"
+      class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow"
-      style=""
     >
       <div
-        aria-autocomplete="list"
+        class="ant-select-selector"
-        aria-controls="test-uuid"
+        style=""
-        aria-expanded="false"
-        aria-haspopup="true"
-        class="ant-select-selection
-            ant-select-selection--single"
-        role="combobox"
-        tabindex="0"
       >
-        <div
-          class="ant-select-selection__rendered"
-        >
-          <div
-            class="ant-select-selection-selected-value"
-            style="display: block; opacity: 1;"
-            title="30 / page"
-          >
-            30 / page
-          </div>
-        </div>
         <span
-          class="ant-select-arrow"
+          class="ant-select-selection-search"
-          style="user-select: none;"
-          unselectable="on"
         >
-          <span
+          <input
-            aria-label="down"
+            aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
-            class="anticon anticon-down ant-select-arrow-icon"
+            aria-autocomplete="list"
-            role="img"
+            aria-controls="rc_select_TEST_OR_SSR_list"
-          >
+            aria-expanded="false"
-            <svg
+            aria-haspopup="listbox"
-              aria-hidden="true"
+            aria-owns="rc_select_TEST_OR_SSR_list"
-              class=""
+            autocomplete="off"
-              data-icon="down"
+            class="ant-select-selection-search-input"
-              fill="currentColor"
+            id="rc_select_TEST_OR_SSR"
-              focusable="false"
+            role="combobox"
-              height="1em"
+            style="opacity: 0;"
-              viewBox="64 64 896 896"
+            value=""
-              width="1em"
+          />
-            >
+        </span>
-              <path
+        <span
-                d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+          class="ant-select-selection-item"
-              />
+        >
-            </svg>
+          30 / page
-          </span>
         </span>
       </div>
-    </div>
+      <div>
-    <div>
-      <div
-        class="ant-select-dropdown ant-select-dropdown--single ant-select-dropdown-placement-bottomLeft slide-up-leave"
-        style="left: -999px; top: -995px;"
-      >
         <div
-          id="test-uuid"
+          class="ant-select-dropdown  ant-select-dropdown-placement-bottomLeft  ant-select-dropdown-hidden"
-          style="overflow: auto; transform: translateZ(0);"
+          style="width: 0px; left: -999px; top: -995px;"
         >
-          <ul
+          <div>
-            class="ant-select-dropdown-menu  ant-select-dropdown-menu-root ant-select-dropdown-menu-vertical"
+            <div
-            role="listbox"
+              id="rc_select_TEST_OR_SSR_list"
-            tabindex="0"
+              role="listbox"
-          >
+              style="height: 0px; overflow: hidden;"
-            <li
-              aria-selected="false"
-              class="ant-select-dropdown-menu-item"
-              role="option"
-              style="user-select: none;"
-              unselectable="on"
             >
-              10 / page
+              <div
-            </li>
+                aria-selected="false"
-            <li
+                id="rc_select_TEST_OR_SSR_list_0"
-              aria-selected="false"
+                role="option"
-              class="ant-select-dropdown-menu-item"
+              >
-              role="option"
+                10
-              style="user-select: none;"
+              </div>
-              unselectable="on"
+              <div
+                aria-selected="false"
+                id="rc_select_TEST_OR_SSR_list_1"
+                role="option"
+              >
+                20
+              </div>
+            </div>
+            <div
+              class=""
+              style="height: 256px;"
             >
-              20 / page
+              <div>
-            </li>
+                <div
-            <li
+                  class=""
-              aria-selected="true"
+                  style="display: flex; flex-direction: column;"
-              class="ant-select-dropdown-menu-item ant-select-dropdown-menu-item-selected"
+                >
-              role="option"
+                  <div
-              style="user-select: none;"
+                    aria-selected="false"
-              unselectable="on"
+                    class="ant-select-item ant-select-item-option ant-select-item-option-active"
-            >
+                  >
-              30 / page
+                    <div
-            </li>
+                      class="ant-select-item-option-content"
-            <li
+                    >
-              aria-selected="false"
+                      10 / page
-              class="ant-select-dropdown-menu-item"
+                    </div>
-              role="option"
+                    <span
-              style="user-select: none;"
+                      aria-hidden="true"
-              unselectable="on"
+                      class="ant-select-item-option-state"
-            >
+                      style="user-select: none;"
-              40 / page
+                      unselectable="on"
-            </li>
+                    />
-          </ul>
+                  </div>
+                  <div
+                    aria-selected="false"
+                    class="ant-select-item ant-select-item-option"
+                  >
+                    <div
+                      class="ant-select-item-option-content"
+                    >
+                      20 / page
+                    </div>
+                    <span
+                      aria-hidden="true"
+                      class="ant-select-item-option-state"
+                      style="user-select: none;"
+                      unselectable="on"
+                    />
+                  </div>
+                  <div
+                    aria-selected="true"
+                    class="ant-select-item ant-select-item-option ant-select-item-option-selected"
+                  >
+                    <div
+                      class="ant-select-item-option-content"
+                    >
+                      30 / page
+                    </div>
+                    <span
+                      aria-hidden="true"
+                      class="ant-select-item-option-state"
+                      style="user-select: none;"
+                      unselectable="on"
+                    />
+                  </div>
+                  <div
+                    aria-selected="false"
+                    class="ant-select-item ant-select-item-option"
+                  >
+                    <div
+                      class="ant-select-item-option-content"
+                    >
+                      40 / page
+                    </div>
+                    <span
+                      aria-hidden="true"
+                      class="ant-select-item-option-state"
+                      style="user-select: none;"
+                      unselectable="on"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
+      <span
+        aria-hidden="true"
+        class="ant-select-arrow"
+        style="user-select: none;"
+        unselectable="on"
+      >
+        <span
+          aria-label="down"
+          class="anticon anticon-down"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+      </span>
     </div>
   </li>
 </ul>
@@ -526,56 +588,61 @@ exports[`List.pagination should default work 1`] = `
     class="ant-pagination-options"
   >
     <div
-      class="ant-pagination-options-size-changer ant-select ant-select-enabled"
+      class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow"
     >
       <div
-        aria-autocomplete="list"
+        class="ant-select-selector"
-        aria-controls="test-uuid"
-        aria-expanded="false"
-        aria-haspopup="true"
-        class="ant-select-selection
-            ant-select-selection--single"
-        role="combobox"
-        tabindex="0"
       >
-        <div
-          class="ant-select-selection__rendered"
-        >
-          <div
-            class="ant-select-selection-selected-value"
-            style="display: block; opacity: 1;"
-            title="3 / page"
-          >
-            3 / page
-          </div>
-        </div>
         <span
-          class="ant-select-arrow"
+          class="ant-select-selection-search"
-          style="user-select: none;"
-          unselectable="on"
         >
-          <span
+          <input
-            aria-label="down"
+            aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
-            class="anticon anticon-down ant-select-arrow-icon"
+            aria-autocomplete="list"
-            role="img"
+            aria-controls="rc_select_TEST_OR_SSR_list"
-          >
+            aria-haspopup="listbox"
-            <svg
+            aria-owns="rc_select_TEST_OR_SSR_list"
-              aria-hidden="true"
+            autocomplete="off"
-              class=""
+            class="ant-select-selection-search-input"
-              data-icon="down"
+            id="rc_select_TEST_OR_SSR"
-              fill="currentColor"
+            role="combobox"
-              focusable="false"
+            style="opacity: 0;"
-              height="1em"
+            value=""
-              viewBox="64 64 896 896"
+          />
-              width="1em"
+        </span>
-            >
+        <span
-              <path
+          class="ant-select-selection-item"
-                d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+        >
-              />
+          3 / page
-            </svg>
-          </span>
         </span>
       </div>
+      <span
+        aria-hidden="true"
+        class="ant-select-arrow"
+        style="user-select: none;"
+        unselectable="on"
+      >
+        <span
+          aria-label="down"
+          class="anticon anticon-down"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+      </span>
     </div>
   </li>
 </ul>

components/list/__tests__/pagination.test.js

@@ -162,9 +162,9 @@ describe('List.pagination', () => {
         .render(),
     ).toMatchSnapshot();
 
-    wrapper.find('.ant-select-selection-selected-value').simulate('click');
+    wrapper.find('.ant-select-selector').simulate('mousedown');
     wrapper
-      .find('.ant-select-dropdown-menu .ant-select-dropdown-menu-item')
+      .find('.ant-select-item-option')
       .at(2)
       .simulate('click');
 

components/locale-provider/__tests__/__snapshots__/demo.test.js.snap

@@ -173,56 +173,60 @@ exports[`renders ./components/locale-provider/demo/all.md correctly 1`] = `
           class="ant-pagination-options"
         >
           <div
-            class="ant-pagination-options-size-changer ant-select ant-select-enabled"
+            class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow"
           >
             <div
-              aria-autocomplete="list"
+              class="ant-select-selector"
-              aria-controls=""
-              aria-expanded="false"
-              aria-haspopup="true"
-              class="ant-select-selection
-            ant-select-selection--single"
-              role="combobox"
-              tabindex="0"
             >
-              <div
-                class="ant-select-selection__rendered"
-              >
-                <div
-                  class="ant-select-selection-selected-value"
-                  style="display:block;opacity:1"
-                  title="10 / page"
-                >
-                  10 / page
-                </div>
-              </div>
               <span
-                class="ant-select-arrow"
+                class="ant-select-selection-search"
-                style="user-select:none;-webkit-user-select:none"
-                unselectable="on"
               >
-                <span
+                <input
-                  aria-label="down"
+                  aria-activedescendant="undefined_list_0"
-                  class="anticon anticon-down ant-select-arrow-icon"
+                  aria-autocomplete="list"
-                  role="img"
+                  aria-controls="undefined_list"
-                >
+                  aria-haspopup="listbox"
-                  <svg
+                  aria-owns="undefined_list"
-                    aria-hidden="true"
+                  autocomplete="off"
-                    class=""
+                  class="ant-select-selection-search-input"
-                    data-icon="down"
+                  role="combobox"
-                    fill="currentColor"
+                  style="opacity:0"
-                    focusable="false"
+                  value=""
-                    height="1em"
+                />
-                    viewBox="64 64 896 896"
+              </span>
-                    width="1em"
+              <span
-                  >
+                class="ant-select-selection-item"
-                    <path
+              >
-                      d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                10 / page
-                    />
-                  </svg>
-                </span>
               </span>
             </div>
+            <span
+              aria-hidden="true"
+              class="ant-select-arrow"
+              style="user-select:none;-webkit-user-select:none"
+              unselectable="on"
+            >
+              <span
+                aria-label="down"
+                class="anticon anticon-down"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  class=""
+                  data-icon="down"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                  />
+                </svg>
+              </span>
+            </span>
           </div>
         </li>
       </ul>
@@ -231,69 +235,59 @@ exports[`renders ./components/locale-provider/demo/all.md correctly 1`] = `
       class="example"
     >
       <div
-        class="ant-select ant-select-enabled"
+        class="ant-select ant-select-single ant-select-show-arrow ant-select-show-search"
         style="width:200px"
       >
         <div
-          aria-autocomplete="list"
+          class="ant-select-selector"
-          aria-controls=""
-          aria-expanded="false"
-          aria-haspopup="true"
-          class="ant-select-selection
-            ant-select-selection--single"
-          role="combobox"
-          tabindex="0"
         >
-          <div
-            class="ant-select-selection__rendered"
-          >
-            <div
-              class="ant-select-search ant-select-search--inline"
-              style="display:none"
-            >
-              <div
-                class="ant-select-search__field__wrap"
-              >
-                <input
-                  autocomplete="off"
-                  class="ant-select-search__field"
-                  value=""
-                />
-                <span
-                  class="ant-select-search__field__mirror"
-                >
-                   
-                </span>
-              </div>
-            </div>
-          </div>
           <span
-            class="ant-select-arrow"
+            class="ant-select-selection-search"
-            style="user-select:none;-webkit-user-select:none"
-            unselectable="on"
           >
-            <span
+            <input
-              aria-label="down"
+              aria-activedescendant="undefined_list_0"
-              class="anticon anticon-down ant-select-arrow-icon"
+              aria-autocomplete="list"
-              role="img"
+              aria-controls="undefined_list"
-            >
+              aria-haspopup="listbox"
-              <svg
+              aria-owns="undefined_list"
-                aria-hidden="true"
+              autocomplete="off"
-                class=""
+              class="ant-select-selection-search-input"
-                data-icon="down"
+              role="combobox"
-                fill="currentColor"
+              style="opacity:0"
-                focusable="false"
+              value=""
-                height="1em"
+            />
-                viewBox="64 64 896 896"
-                width="1em"
-              >
-                <path
-                  d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-                />
-              </svg>
-            </span>
           </span>
+          <span
+            class="ant-select-selection-placeholder"
+          />
         </div>
+        <span
+          aria-hidden="true"
+          class="ant-select-arrow"
+          style="user-select:none;-webkit-user-select:none"
+          unselectable="on"
+        >
+          <span
+            aria-label="down"
+            class="anticon anticon-down"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              class=""
+              data-icon="down"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+              />
+            </svg>
+          </span>
+        </span>
       </div>
       <span
         class="ant-calendar-picker"
@@ -728,108 +722,116 @@ exports[`renders ./components/locale-provider/demo/all.md correctly 1`] = `
           class="ant-fullcalendar-header"
         >
           <div
-            class="ant-select-sm ant-fullcalendar-year-select ant-select ant-select-enabled"
+            class="ant-select ant-fullcalendar-year-select ant-select-sm ant-select-single ant-select-show-arrow"
           >
             <div
-              aria-autocomplete="list"
+              class="ant-select-selector"
-              aria-controls=""
-              aria-expanded="false"
-              aria-haspopup="true"
-              class="ant-select-selection
-            ant-select-selection--single"
-              role="combobox"
-              tabindex="0"
             >
-              <div
-                class="ant-select-selection__rendered"
-              >
-                <div
-                  class="ant-select-selection-selected-value"
-                  style="display:block;opacity:1"
-                  title="2016"
-                >
-                  2016
-                </div>
-              </div>
               <span
-                class="ant-select-arrow"
+                class="ant-select-selection-search"
-                style="user-select:none;-webkit-user-select:none"
-                unselectable="on"
               >
-                <span
+                <input
-                  aria-label="down"
+                  aria-activedescendant="undefined_list_0"
-                  class="anticon anticon-down ant-select-arrow-icon"
+                  aria-autocomplete="list"
-                  role="img"
+                  aria-controls="undefined_list"
-                >
+                  aria-haspopup="listbox"
-                  <svg
+                  aria-owns="undefined_list"
-                    aria-hidden="true"
+                  autocomplete="off"
-                    class=""
+                  class="ant-select-selection-search-input"
-                    data-icon="down"
+                  role="combobox"
-                    fill="currentColor"
+                  style="opacity:0"
-                    focusable="false"
+                  value=""
-                    height="1em"
+                />
-                    viewBox="64 64 896 896"
+              </span>
-                    width="1em"
+              <span
-                  >
+                class="ant-select-selection-item"
-                    <path
+              >
-                      d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                2016
-                    />
-                  </svg>
-                </span>
               </span>
             </div>
+            <span
+              aria-hidden="true"
+              class="ant-select-arrow"
+              style="user-select:none;-webkit-user-select:none"
+              unselectable="on"
+            >
+              <span
+                aria-label="down"
+                class="anticon anticon-down"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  class=""
+                  data-icon="down"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                  />
+                </svg>
+              </span>
+            </span>
           </div>
           <div
-            class="ant-select-sm ant-fullcalendar-month-select ant-select ant-select-enabled"
+            class="ant-select ant-fullcalendar-month-select ant-select-sm ant-select-single ant-select-show-arrow"
           >
             <div
-              aria-autocomplete="list"
+              class="ant-select-selector"
-              aria-controls=""
-              aria-expanded="false"
-              aria-haspopup="true"
-              class="ant-select-selection
-            ant-select-selection--single"
-              role="combobox"
-              tabindex="0"
             >
-              <div
-                class="ant-select-selection__rendered"
-              >
-                <div
-                  class="ant-select-selection-selected-value"
-                  style="display:block;opacity:1"
-                  title="Nov"
-                >
-                  Nov
-                </div>
-              </div>
               <span
-                class="ant-select-arrow"
+                class="ant-select-selection-search"
-                style="user-select:none;-webkit-user-select:none"
-                unselectable="on"
               >
-                <span
+                <input
-                  aria-label="down"
+                  aria-activedescendant="undefined_list_0"
-                  class="anticon anticon-down ant-select-arrow-icon"
+                  aria-autocomplete="list"
-                  role="img"
+                  aria-controls="undefined_list"
-                >
+                  aria-haspopup="listbox"
-                  <svg
+                  aria-owns="undefined_list"
-                    aria-hidden="true"
+                  autocomplete="off"
-                    class=""
+                  class="ant-select-selection-search-input"
-                    data-icon="down"
+                  role="combobox"
-                    fill="currentColor"
+                  style="opacity:0"
-                    focusable="false"
+                  value=""
-                    height="1em"
+                />
-                    viewBox="64 64 896 896"
+              </span>
-                    width="1em"
+              <span
-                  >
+                class="ant-select-selection-item"
-                    <path
+              >
-                      d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                Nov
-                    />
-                  </svg>
-                </span>
               </span>
             </div>
+            <span
+              aria-hidden="true"
+              class="ant-select-arrow"
+              style="user-select:none;-webkit-user-select:none"
+              unselectable="on"
+            >
+              <span
+                aria-label="down"
+                class="anticon anticon-down"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  class=""
+                  data-icon="down"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                  />
+                </svg>
+              </span>
+            </span>
           </div>
           <div
             class="ant-radio-group ant-radio-group-outline ant-radio-group-small"
@@ -2037,56 +2039,60 @@ exports[`renders ./components/locale-provider/demo/basic.md correctly 1`] = `
       class="ant-pagination-options"
     >
       <div
-        class="ant-pagination-options-size-changer ant-select ant-select-enabled"
+        class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow"
       >
         <div
-          aria-autocomplete="list"
+          class="ant-select-selector"
-          aria-controls=""
-          aria-expanded="false"
-          aria-haspopup="true"
-          class="ant-select-selection
-            ant-select-selection--single"
-          role="combobox"
-          tabindex="0"
         >
-          <div
-            class="ant-select-selection__rendered"
-          >
-            <div
-              class="ant-select-selection-selected-value"
-              style="display:block;opacity:1"
-              title="10 条/页"
-            >
-              10 条/页
-            </div>
-          </div>
           <span
-            class="ant-select-arrow"
+            class="ant-select-selection-search"
-            style="user-select:none;-webkit-user-select:none"
-            unselectable="on"
           >
-            <span
+            <input
-              aria-label="down"
+              aria-activedescendant="undefined_list_0"
-              class="anticon anticon-down ant-select-arrow-icon"
+              aria-autocomplete="list"
-              role="img"
+              aria-controls="undefined_list"
-            >
+              aria-haspopup="listbox"
-              <svg
+              aria-owns="undefined_list"
-                aria-hidden="true"
+              autocomplete="off"
-                class=""
+              class="ant-select-selection-search-input"
-                data-icon="down"
+              role="combobox"
-                fill="currentColor"
+              style="opacity:0"
-                focusable="false"
+              value=""
-                height="1em"
+            />
-                viewBox="64 64 896 896"
+          </span>
-                width="1em"
+          <span
-              >
+            class="ant-select-selection-item"
-                <path
+          >
-                  d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            10 条/页
-                />
-              </svg>
-            </span>
           </span>
         </div>
+        <span
+          aria-hidden="true"
+          class="ant-select-arrow"
+          style="user-select:none;-webkit-user-select:none"
+          unselectable="on"
+        >
+          <span
+            aria-label="down"
+            class="anticon anticon-down"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              class=""
+              data-icon="down"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+              />
+            </svg>
+          </span>
+        </span>
       </div>
     </li>
   </ul>

components/notification/__tests__/__snapshots__/demo.test.js.snap

@@ -47,57 +47,61 @@ exports[`renders ./components/notification/demo/duration.md correctly 1`] = `
 exports[`renders ./components/notification/demo/placement.md correctly 1`] = `
 <div>
   <div
-    class="ant-select ant-select-enabled"
+    class="ant-select ant-select-single ant-select-show-arrow"
     style="width:120px;margin-right:10px"
   >
     <div
-      aria-autocomplete="list"
+      class="ant-select-selector"
-      aria-controls=""
-      aria-expanded="false"
-      aria-haspopup="true"
-      class="ant-select-selection
-            ant-select-selection--single"
-      role="combobox"
-      tabindex="0"
     >
-      <div
-        class="ant-select-selection__rendered"
-      >
-        <div
-          class="ant-select-selection-selected-value"
-          style="display:block;opacity:1"
-          title="topRight"
-        >
-          topRight
-        </div>
-      </div>
       <span
-        class="ant-select-arrow"
+        class="ant-select-selection-search"
-        style="user-select:none;-webkit-user-select:none"
-        unselectable="on"
       >
-        <span
+        <input
-          aria-label="down"
+          aria-activedescendant="undefined_list_0"
-          class="anticon anticon-down ant-select-arrow-icon"
+          aria-autocomplete="list"
-          role="img"
+          aria-controls="undefined_list"
-        >
+          aria-haspopup="listbox"
-          <svg
+          aria-owns="undefined_list"
-            aria-hidden="true"
+          autocomplete="off"
-            class=""
+          class="ant-select-selection-search-input"
-            data-icon="down"
+          role="combobox"
-            fill="currentColor"
+          style="opacity:0"
-            focusable="false"
+          value=""
-            height="1em"
+        />
-            viewBox="64 64 896 896"
+      </span>
-            width="1em"
+      <span
-          >
+        class="ant-select-selection-item"
-            <path
+      >
-              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+        topRight
-            />
-          </svg>
-        </span>
       </span>
     </div>
+    <span
+      aria-hidden="true"
+      class="ant-select-arrow"
+      style="user-select:none;-webkit-user-select:none"
+      unselectable="on"
+    >
+      <span
+        aria-label="down"
+        class="anticon anticon-down"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="down"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+          />
+        </svg>
+      </span>
+    </span>
   </div>
   <button
     class="ant-btn ant-btn-primary"

components/pagination/MiniSelect.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import Select, { OptionProps } from '../select';
+import Select from '../select';
 
 export default class MiniSelect extends React.Component<any, any> {
-  static Option = Select.Option as React.ClassicComponentClass<OptionProps>;
+  static Option = Select.Option;
 
   render() {
     return <Select size="small" {...this.props} />;

components/pagination/__tests__/__snapshots__/demo.test.js.snap

@@ -279,56 +279,60 @@ exports[`renders ./components/pagination/demo/changer.md correctly 1`] = `
       class="ant-pagination-options"
     >
       <div
-        class="ant-pagination-options-size-changer ant-select ant-select-enabled"
+        class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow"
       >
         <div
-          aria-autocomplete="list"
+          class="ant-select-selector"
-          aria-controls=""
-          aria-expanded="false"
-          aria-haspopup="true"
-          class="ant-select-selection
-            ant-select-selection--single"
-          role="combobox"
-          tabindex="0"
         >
-          <div
-            class="ant-select-selection__rendered"
-          >
-            <div
-              class="ant-select-selection-selected-value"
-              style="display:block;opacity:1"
-              title="10 / page"
-            >
-              10 / page
-            </div>
-          </div>
           <span
-            class="ant-select-arrow"
+            class="ant-select-selection-search"
-            style="user-select:none;-webkit-user-select:none"
-            unselectable="on"
           >
-            <span
+            <input
-              aria-label="down"
+              aria-activedescendant="undefined_list_0"
-              class="anticon anticon-down ant-select-arrow-icon"
+              aria-autocomplete="list"
-              role="img"
+              aria-controls="undefined_list"
-            >
+              aria-haspopup="listbox"
-              <svg
+              aria-owns="undefined_list"
-                aria-hidden="true"
+              autocomplete="off"
-                class=""
+              class="ant-select-selection-search-input"
-                data-icon="down"
+              role="combobox"
-                fill="currentColor"
+              style="opacity:0"
-                focusable="false"
+              value=""
-                height="1em"
+            />
-                viewBox="64 64 896 896"
+          </span>
-                width="1em"
+          <span
-              >
+            class="ant-select-selection-item"
-                <path
+          >
-                  d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            10 / page
-                />
-              </svg>
-            </span>
           </span>
         </div>
+        <span
+          aria-hidden="true"
+          class="ant-select-arrow"
+          style="user-select:none;-webkit-user-select:none"
+          unselectable="on"
+        >
+          <span
+            aria-label="down"
+            class="anticon anticon-down"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              class=""
+              data-icon="down"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+              />
+            </svg>
+          </span>
+        </span>
       </div>
     </li>
   </ul>
@@ -496,56 +500,61 @@ exports[`renders ./components/pagination/demo/changer.md correctly 1`] = `
       class="ant-pagination-options"
     >
       <div
-        class="ant-pagination-options-size-changer ant-select ant-select-disabled"
+        class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow ant-select-disabled"
       >
         <div
-          aria-autocomplete="list"
+          class="ant-select-selector"
-          aria-controls=""
-          aria-expanded="false"
-          aria-haspopup="true"
-          class="ant-select-selection
-            ant-select-selection--single"
-          role="combobox"
-          tabindex="-1"
         >
-          <div
-            class="ant-select-selection__rendered"
-          >
-            <div
-              class="ant-select-selection-selected-value"
-              style="display:block;opacity:1"
-              title="10 / page"
-            >
-              10 / page
-            </div>
-          </div>
           <span
-            class="ant-select-arrow"
+            class="ant-select-selection-search"
-            style="user-select:none;-webkit-user-select:none"
-            unselectable="on"
           >
-            <span
+            <input
-              aria-label="down"
+              aria-activedescendant="undefined_list_0"
-              class="anticon anticon-down ant-select-arrow-icon"
+              aria-autocomplete="list"
-              role="img"
+              aria-controls="undefined_list"
-            >
+              aria-haspopup="listbox"
-              <svg
+              aria-owns="undefined_list"
-                aria-hidden="true"
+              autocomplete="off"
-                class=""
+              class="ant-select-selection-search-input"
-                data-icon="down"
+              disabled=""
-                fill="currentColor"
+              role="combobox"
-                focusable="false"
+              style="opacity:0"
-                height="1em"
+              value=""
-                viewBox="64 64 896 896"
+            />
-                width="1em"
+          </span>
-              >
+          <span
-                <path
+            class="ant-select-selection-item"
-                  d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+          >
-                />
+            10 / page
-              </svg>
-            </span>
           </span>
         </div>
+        <span
+          aria-hidden="true"
+          class="ant-select-arrow"
+          style="user-select:none;-webkit-user-select:none"
+          unselectable="on"
+        >
+          <span
+            aria-label="down"
+            class="anticon anticon-down"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              class=""
+              data-icon="down"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+              />
+            </svg>
+          </span>
+        </span>
       </div>
     </li>
   </ul>
@@ -1367,56 +1376,60 @@ exports[`renders ./components/pagination/demo/mini.md correctly 1`] = `
       class="ant-pagination-options"
     >
       <div
-        class="ant-select-sm ant-pagination-options-size-changer ant-select ant-select-enabled"
+        class="ant-select ant-pagination-options-size-changer ant-select-sm ant-select-single ant-select-show-arrow"
       >
         <div
-          aria-autocomplete="list"
+          class="ant-select-selector"
-          aria-controls=""
-          aria-expanded="false"
-          aria-haspopup="true"
-          class="ant-select-selection
-            ant-select-selection--single"
-          role="combobox"
-          tabindex="0"
         >
-          <div
-            class="ant-select-selection__rendered"
-          >
-            <div
-              class="ant-select-selection-selected-value"
-              style="display:block;opacity:1"
-              title="10 / page"
-            >
-              10 / page
-            </div>
-          </div>
           <span
-            class="ant-select-arrow"
+            class="ant-select-selection-search"
-            style="user-select:none;-webkit-user-select:none"
-            unselectable="on"
           >
-            <span
+            <input
-              aria-label="down"
+              aria-activedescendant="undefined_list_0"
-              class="anticon anticon-down ant-select-arrow-icon"
+              aria-autocomplete="list"
-              role="img"
+              aria-controls="undefined_list"
-            >
+              aria-haspopup="listbox"
-              <svg
+              aria-owns="undefined_list"
-                aria-hidden="true"
+              autocomplete="off"
-                class=""
+              class="ant-select-selection-search-input"
-                data-icon="down"
+              role="combobox"
-                fill="currentColor"
+              style="opacity:0"
-                focusable="false"
+              value=""
-                height="1em"
+            />
-                viewBox="64 64 896 896"
+          </span>
-                width="1em"
+          <span
-              >
+            class="ant-select-selection-item"
-                <path
+          >
-                  d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            10 / page
-                />
-              </svg>
-            </span>
           </span>
         </div>
+        <span
+          aria-hidden="true"
+          class="ant-select-arrow"
+          style="user-select:none;-webkit-user-select:none"
+          unselectable="on"
+        >
+          <span
+            aria-label="down"
+            class="anticon anticon-down"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              class=""
+              data-icon="down"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+              />
+            </svg>
+          </span>
+        </span>
       </div>
       <div
         class="ant-pagination-options-quick-jumper"

components/select/__tests__/__snapshots__/index.test.js.snap

@@ -2,47 +2,59 @@
 
 exports[`Select Select Custom Icons should support customized icons 1`] = `
 <div
-  class="ant-select ant-select-enabled"
+  class="ant-select ant-select-single ant-select-show-arrow"
+  count="10"
 >
   <div
-    aria-autocomplete="list"
+    class="ant-select-selector"
-    aria-controls="test-uuid"
-    aria-expanded="false"
-    aria-haspopup="true"
-    class="ant-select-selection
-            ant-select-selection--single"
-    role="combobox"
-    tabindex="0"
   >
-    <div
-      class="ant-select-selection__rendered"
-    />
     <span
-      class="ant-select-arrow"
+      class="ant-select-selection-search"
-      style="user-select: none;"
-      unselectable="on"
     >
-      <span
+      <input
-        aria-label="down"
+        aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
-        class="anticon anticon-down ant-select-arrow-icon"
+        aria-autocomplete="list"
-        role="img"
+        aria-controls="rc_select_TEST_OR_SSR_list"
-      >
+        aria-haspopup="listbox"
-        <svg
+        aria-owns="rc_select_TEST_OR_SSR_list"
-          aria-hidden="true"
+        autocomplete="off"
-          class=""
+        class="ant-select-selection-search-input"
-          data-icon="down"
+        id="rc_select_TEST_OR_SSR"
-          fill="currentColor"
+        role="combobox"
-          focusable="false"
+        style="opacity: 0;"
-          height="1em"
+        value=""
-          viewBox="64 64 896 896"
+      />
-          width="1em"
-        >
-          <path
-            d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-          />
-        </svg>
-      </span>
     </span>
+    <span
+      class="ant-select-selection-placeholder"
+    />
   </div>
+  <span
+    aria-hidden="true"
+    class="ant-select-arrow"
+    style="user-select: none;"
+    unselectable="on"
+  >
+    <span
+      aria-label="down"
+      class="anticon anticon-down"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        class=""
+        data-icon="down"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+        />
+      </svg>
+    </span>
+  </span>
 </div>
 `;

components/select/__tests__/index.test.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { act } from 'react-dom/test-utils';
 import { mount } from 'enzyme';
 import Select from '..';
 import Icon from '../../icon';
@@ -12,6 +13,14 @@ describe('Select', () => {
   focusTest(Select);
   mountTest(Select);
 
+  function toggleOpen(wrapper) {
+    act(() => {
+      wrapper.find('.ant-select-selector').simulate('mousedown');
+      jest.runAllTimers();
+      wrapper.update();
+    });
+  }
+
   beforeEach(() => {
     jest.useFakeTimers();
   });
@@ -22,27 +31,14 @@ describe('Select', () => {
 
   it('should have default notFoundContent', () => {
     const wrapper = mount(<Select mode="multiple" />);
-    wrapper.find('.ant-select').simulate('click');
+    toggleOpen(wrapper);
-    jest.runAllTimers();
+    expect(wrapper.find('.ant-select-item-option').length).toBeFalsy();
-    const dropdownWrapper = mount(
+    expect(wrapper.find('.ant-empty').length).toBeTruthy();
-      wrapper
-        .find('Trigger')
-        .instance()
-        .getComponent(),
-    );
-    expect(dropdownWrapper.find('MenuItem').length).toBe(1);
-    expect(
-      dropdownWrapper
-        .find('MenuItem')
-        .at(0)
-        .text(),
-    ).toBe('No Data');
   });
 
   it('should support set notFoundContent to null', () => {
     const wrapper = mount(<Select mode="multiple" notFoundContent={null} />);
-    wrapper.find('.ant-select').simulate('click');
+    toggleOpen(wrapper);
-    jest.runAllTimers();
     const dropdownWrapper = mount(
       wrapper
         .find('Trigger')
@@ -54,8 +50,7 @@ describe('Select', () => {
 
   it('should not have default notFoundContent when mode is combobox', () => {
     const wrapper = mount(<Select mode={Select.SECRET_COMBOBOX_MODE_DO_NOT_USE} />);
-    wrapper.find('.ant-select').simulate('click');
+    toggleOpen(wrapper);
-    jest.runAllTimers();
     const dropdownWrapper = mount(
       wrapper
         .find('Trigger')
@@ -69,18 +64,17 @@ describe('Select', () => {
     const wrapper = mount(
       <Select mode={Select.SECRET_COMBOBOX_MODE_DO_NOT_USE} notFoundContent="not at all" />,
     );
-    wrapper.find('.ant-select').simulate('click');
+    toggleOpen(wrapper);
-    jest.runAllTimers();
     const dropdownWrapper = mount(
       wrapper
         .find('Trigger')
         .instance()
         .getComponent(),
     );
-    expect(dropdownWrapper.find('MenuItem').length).toBe(1);
+    expect(dropdownWrapper.find('.ant-select-item-option').length).toBeFalsy();
     expect(
       dropdownWrapper
-        .find('MenuItem')
+        .find('.ant-select-item-empty')
         .at(0)
         .text(),
     ).toBe('not at all');
@@ -100,7 +94,7 @@ describe('Select', () => {
         .getComponent(),
     );
     expect(dropdownWrapper.props().visible).toBe(true);
-    wrapper.find('.ant-select').simulate('click');
+    toggleOpen(wrapper);
     expect(onDropdownVisibleChange).toHaveBeenLastCalledWith(false);
     expect(dropdownWrapper.props().visible).toBe(true);
 
@@ -112,7 +106,7 @@ describe('Select', () => {
         .getComponent(),
     );
     expect(dropdownWrapper.props().visible).toBe(false);
-    wrapper.find('.ant-select').simulate('click');
+    toggleOpen(wrapper);
     expect(onDropdownVisibleChange).toHaveBeenLastCalledWith(true);
     expect(dropdownWrapper.props().visible).toBe(false);
   });
@@ -134,14 +128,12 @@ describe('Select', () => {
     });
   });
 
-  it('warning if user use `inputValue`', () => {
+  it('not warning if user use `inputValue`', () => {
     resetWarned();
     const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
 
     mount(<Select inputValue="" />);
-    expect(errorSpy).toHaveBeenLastCalledWith(
+    expect(errorSpy).not.toHaveBeenCalled();
-      'Warning: [antd: Select] `inputValue` is deprecated. Please use `searchValue` instead.',
-    );
 
     errorSpy.mockRestore();
   });

components/select/demo/basic.md

@@ -38,6 +38,9 @@ ReactDOM.render(
     <Select defaultValue="lucy" style={{ width: 120 }} loading>
       <Option value="lucy">Lucy</Option>
     </Select>
+    <Select defaultValue="lucy" style={{ width: 120 }} allowClear>
+      <Option value="lucy">Lucy</Option>
+    </Select>
   </div>,
   mountNode,
 );

components/select/demo/big-data.md

@@ -0,0 +1,58 @@
+---
+order: 23
+title:
+  zh-CN: 大数据
+  en-US: Big Data
+---
+
+## zh-CN
+
+Select 使用了[虚拟滚动](https://github.com/react-component/virtual-list)技术，因而获得了比 [3.0 更好的性能](https://codesandbox.io/s/beautiful-banzai-m72lv)。
+
+## en-US
+
+Select use [virtual scroll](https://github.com/react-component/virtual-list) which get better performance [than 3.0](https://codesandbox.io/s/beautiful-banzai-m72lv).
+
+```jsx
+import { Select, Typography, Divider } from 'antd';
+
+const { Title } = Typography;
+
+const options = [];
+for (let i = 0; i < 100000; i++) {
+  const value = `${i.toString(36)}${i}`;
+  options.push({
+    value,
+    disabled: i === 10,
+  });
+}
+
+function handleChange(value) {
+  console.log(`selected ${value}`);
+}
+
+ReactDOM.render(
+  <div>
+    <Title level={3}>Ant Design 4.0</Title>
+    <Title level={4}>{options.length} Items</Title>
+    <Select
+      mode="multiple"
+      style={{ width: '100%' }}
+      placeholder="Please select"
+      defaultValue={['a10', 'c12']}
+      onChange={handleChange}
+      options={options}
+    />
+
+    <Divider />
+
+    <Title level={3}>Ant Design 3.0</Title>
+    <iframe
+      title="Ant Design 3.0 Select demo"
+      src="https://codesandbox.io/embed/beautiful-banzai-m72lv?view=preview"
+      style={{ width: '100%', height: 300 }}
+    />
+  </div>,
+  mountNode,
+);
+```

components/select/demo/custom-dropdown-menu.md

@@ -14,7 +14,7 @@ title:
 Customize the dropdown menu via `dropdownRender`.
 
 ```jsx
-import { Select, Divider } from 'antd';
+import { Select, Divider, message } from 'antd';
 import { Plus } from '@ant-design/icons';
 
 const { Option } = Select;
@@ -27,9 +27,14 @@ ReactDOM.render(
       <div>
         {menu}
         <Divider style={{ margin: '4px 0' }} />
-        <div style={{ padding: '8px', cursor: 'pointer' }}>
+        <a
+          style={{ padding: '8px', display: 'block', cursor: 'pointer' }}
+          onClick={() => {
+            message.info('Add an item!');
+          }}
+        >
           <Plus /> Add item
-        </div>
+        </a>
       </div>
     )}
   >

components/select/demo/debug.md

@@ -0,0 +1,59 @@
+---
+order: 999
+title:
+  zh-CN: 4.0 Debug
+  en-US: 4.0 Debug
+debug: true
+---
+
+## zh-CN
+
+基本使用。
+
+## en-US
+
+Basic Usage.
+
+```jsx
+import { Select, Input, Button } from 'antd';
+
+const { Option } = Select;
+
+function handleChange(value) {
+  console.log(`selected ${value}`);
+}
+
+ReactDOM.render(
+  <div>
+    <Input style={{ width: 100 }} value="222" />
+    <Select style={{ width: 120 }} onChange={handleChange} showSearch placeholder="233">
+      <Option value="jack">Jack</Option>
+      <Option value="lucy">Lucy</Option>
+      <Option value="disabled" disabled>
+        Disabled
+      </Option>
+      <Option value="Yiminghe">yiminghe</Option>
+      <Option value="long">I am super super long!</Option>
+    </Select>
+    <Select
+      mode="multiple"
+      style={{ width: 120 }}
+      defaultValue={['lucy']}
+      onChange={handleChange}
+      showSearch
+      placeholder="233"
+    >
+      <Option value="jack">Jack</Option>
+      <Option value="lucy">Lucy</Option>
+      <Option value="disabled" disabled>
+        Disabled
+      </Option>
+      <Option value="Yiminghe">yiminghe</Option>
+      <Option value="long">I am super super long!</Option>
+    </Select>
+    <span>AntDesign</span>
+    <Button>222</Button>
+  </div>,
+  mountNode,
+);
+```

components/select/demo/search.md

@@ -45,7 +45,7 @@ ReactDOM.render(
     onBlur={onBlur}
     onSearch={onSearch}
     filterOption={(input, option) =>
-      option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
     }
   >
     <Option value="jack">Jack</Option>

components/select/index.tsx

@@ -1,281 +1,163 @@
+// TODO: 4.0 - codemod should help to change `filterOption` to support node props.
+
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import RcSelect, { Option, OptGroup } from 'rc-select';
-import classNames from 'classnames';
 import omit from 'omit.js';
-import { Loading, Down, Close, CloseCircleFilled, Check } from '@ant-design/icons';
+import classNames from 'classnames';
+import RcSelect, { Option, OptGroup, SelectProps as RcSelectProps } from 'rc-select';
+import { Down, Loading, Check, Close, CloseCircleFilled } from '@ant-design/icons';
+import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 
-import { ConfigConsumer, ConfigConsumerProps, RenderEmptyHandler } from '../config-provider';
+type RawValue = string | number;
-import warning from '../_util/warning';
-import { tuple } from '../_util/type';
 
-const SelectSizes = tuple('default', 'large', 'small');
+export type OptionType = typeof Option;
-
-export interface AbstractSelectProps {
-  prefixCls?: string;
-  className?: string;
-  showAction?: string | string[];
-  size?: (typeof SelectSizes)[number];
-  notFoundContent?: React.ReactNode | null;
-  transitionName?: string;
-  choiceTransitionName?: string;
-  showSearch?: boolean;
-  allowClear?: boolean;
-  disabled?: boolean;
-  showArrow?: boolean;
-  style?: React.CSSProperties;
-  tabIndex?: number;
-  placeholder?: string | React.ReactNode;
-  defaultActiveFirstOption?: boolean;
-  dropdownClassName?: string;
-  dropdownStyle?: React.CSSProperties;
-  dropdownMenuStyle?: React.CSSProperties;
-  dropdownMatchSelectWidth?: boolean;
-  onSearch?: (value: string) => void;
-  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
-  filterOption?:
-    | boolean
-    | ((inputValue: string, option: React.ReactElement<OptionProps>) => boolean);
-  id?: string;
-  defaultOpen?: boolean;
-  open?: boolean;
-  onDropdownVisibleChange?: (open: boolean) => void;
-  autoClearSearchValue?: boolean;
-  dropdownRender?: (menu?: React.ReactNode, props?: SelectProps) => React.ReactNode;
-  loading?: boolean;
-}
 
 export interface LabeledValue {
-  key: string;
+  key?: string;
+  value: RawValue;
   label: React.ReactNode;
 }
 
-export type SelectValue = string | string[] | number | number[] | LabeledValue | LabeledValue[];
+export type SelectValue = RawValue | RawValue[] | LabeledValue | LabeledValue[];
 
-export interface SelectProps<T = SelectValue> extends AbstractSelectProps {
+export interface InternalSelectProps<VT> extends Omit<RcSelectProps<VT>, 'mode'> {
-  value?: T;
-  /** @deprecated Use `searchValue` instead. */
-  inputValue?: string;
-  searchValue?: string;
-  defaultValue?: T;
-  mode?: 'default' | 'multiple' | 'tags' | 'combobox' | string;
-  optionLabelProp?: string;
-  firstActiveValue?: string | string[];
-  onChange?: (value: T, option: React.ReactElement<any> | React.ReactElement<any>[]) => void;
-  onSelect?: (value: T extends (infer I)[] ? I : T, option: React.ReactElement<any>) => void;
-  onDeselect?: (value: T extends (infer I)[] ? I : T) => void;
-  onBlur?: (value: T) => void;
-  onFocus?: () => void;
-  onPopupScroll?: React.UIEventHandler<HTMLDivElement>;
-  onInputKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
-  onMouseEnter?: (e: React.MouseEvent<HTMLInputElement>) => void;
-  onMouseLeave?: (e: React.MouseEvent<HTMLInputElement>) => void;
-  maxTagCount?: number;
-  maxTagTextLength?: number;
-  maxTagPlaceholder?: React.ReactNode | ((omittedValues: T[]) => React.ReactNode);
-  optionFilterProp?: string;
-  labelInValue?: boolean;
-  tokenSeparators?: string[];
-  getInputElement?: () => React.ReactElement<any>;
-  autoFocus?: boolean;
   suffixIcon?: React.ReactNode;
-  removeIcon?: React.ReactNode;
+  size?: 'large' | 'default' | 'small';
-  clearIcon?: React.ReactNode;
+  mode?: 'multiple' | 'tags' | 'SECRET_COMBOBOX_MODE_DO_NOT_USE';
-  menuItemSelectedIcon?: React.ReactNode;
 }
 
-export interface OptionProps {
+export interface SelectProps<VT>
-  disabled?: boolean;
+  extends Omit<InternalSelectProps<VT>, 'inputIcon' | 'mode' | 'getInputElement' | 'backfill'> {
-  value?: string | number;
+  mode?: 'multiple' | 'tags';
-  title?: string;
-  children?: React.ReactNode;
-  className?: string;
-  style?: React.CSSProperties;
 }
 
-export interface OptGroupProps {
+// We still use class here since `forwardRef` not support generic in typescript
-  label?: React.ReactNode;
+class Select<ValueType extends SelectValue = SelectValue> extends React.Component<
-}
+  SelectProps<ValueType>
+> {
+  static Option = Option;
 
-export interface SelectLocale {
+  static OptGroup = OptGroup;
-  notFoundContent?: string;
-}
-
-const SelectPropTypes = {
-  prefixCls: PropTypes.string,
-  className: PropTypes.string,
-  size: PropTypes.oneOf(SelectSizes),
-  notFoundContent: PropTypes.any,
-  showSearch: PropTypes.bool,
-  optionLabelProp: PropTypes.string,
-  transitionName: PropTypes.string,
-  choiceTransitionName: PropTypes.string,
-  id: PropTypes.string,
-};
-
-export default class Select<T = SelectValue> extends React.Component<SelectProps<T>, {}> {
-  static Option = Option as React.ClassicComponentClass<OptionProps>;
-
-  static OptGroup = OptGroup as React.ClassicComponentClass<OptGroupProps>;
 
   static SECRET_COMBOBOX_MODE_DO_NOT_USE = 'SECRET_COMBOBOX_MODE_DO_NOT_USE';
 
   static defaultProps = {
-    showSearch: false,
     transitionName: 'slide-up',
     choiceTransitionName: 'zoom',
   };
 
-  static propTypes = SelectPropTypes;
+  selectRef = React.createRef<RcSelect<ValueType>>();
 
-  private rcSelect: any;
+  public focus = () => {
-
+    if (this.selectRef.current) {
-  constructor(props: SelectProps<T>) {
+      this.selectRef.current.focus();
-    super(props);
-
-    warning(
-      props.mode !== 'combobox',
-      'Select',
-      'The combobox mode is deprecated, ' +
-        'it will be removed in next major version, ' +
-        'please use AutoComplete instead',
-    );
-
-    warning(
-      !('inputValue' in props),
-      'Select',
-      '`inputValue` is deprecated. Please use `searchValue` instead.',
-    );
-  }
-
-  getNotFoundContent(renderEmpty: RenderEmptyHandler) {
-    const { notFoundContent } = this.props;
-    if (notFoundContent !== undefined) {
-      return notFoundContent;
     }
-
-    if (this.isCombobox()) {
-      return null;
-    }
-
-    return renderEmpty('Select');
-  }
-
-  saveSelect = (node: any) => {
-    this.rcSelect = node;
   };
 
-  focus() {
+  public blur = () => {
-    this.rcSelect.focus();
+    if (this.selectRef.current) {
-  }
+      this.selectRef.current.blur();
-
-  blur() {
-    this.rcSelect.blur();
-  }
-
-  isCombobox() {
-    const { mode } = this.props;
-    return mode === 'combobox' || mode === Select.SECRET_COMBOBOX_MODE_DO_NOT_USE;
-  }
-
-  renderSuffixIcon(prefixCls: string) {
-    const { loading, suffixIcon } = this.props;
-    if (suffixIcon) {
-      return React.isValidElement<{ className?: string }>(suffixIcon)
-        ? React.cloneElement(suffixIcon, {
-            className: classNames(suffixIcon.props.className, `${prefixCls}-arrow-icon`),
-          })
-        : suffixIcon;
     }
-    if (loading) {
+  };
-      return <Loading />;
-    }
-    return <Down className={`${prefixCls}-arrow-icon`} />;
-  }
 
-  renderSelect = ({
+  getMode = () => {
-    getPopupContainer: getContextPopupContainer,
+    const { mode } = this.props as InternalSelectProps<ValueType>;
-    getPrefixCls,
+
-    renderEmpty,
+    if ((mode as any) === 'combobox') {
-  }: ConfigConsumerProps) => {
+      return undefined;
+    }
+
+    if (mode === Select.SECRET_COMBOBOX_MODE_DO_NOT_USE) {
+      return 'combobox';
+    }
+
+    return mode;
+  };
+
+  renderSelect = ({ getPrefixCls, renderEmpty }: ConfigConsumerProps) => {
     const {
       prefixCls: customizePrefixCls,
-      className = '',
+      suffixIcon,
-      size,
-      mode,
-      getPopupContainer,
-      removeIcon,
       clearIcon,
       menuItemSelectedIcon,
-      showArrow,
+      removeIcon,
-      inputValue,
+      loading,
-      searchValue,
+      notFoundContent,
-      ...restProps
+      className,
-    } = this.props;
+      size,
-    const rest = omit(restProps, ['inputIcon']);
+      listHeight = 256,
+      listItemHeight = 32,
+    } = this.props as InternalSelectProps<ValueType>;
 
     const prefixCls = getPrefixCls('select', customizePrefixCls);
-    const cls = classNames(
+    const mode = this.getMode();
-      {
-        [`${prefixCls}-lg`]: size === 'large',
-        [`${prefixCls}-sm`]: size === 'small',
-        [`${prefixCls}-show-arrow`]: showArrow,
-      },
-      className,
-    );
 
-    let { optionLabelProp } = this.props;
+    const isMultiple = mode === 'multiple' || mode === 'tags';
-    if (this.isCombobox()) {
+
-      // children 带 dom 结构时，无法填入输入框
+    // ===================== Empty =====================
-      optionLabelProp = optionLabelProp || 'value';
+    let mergedNotFound;
+    if (notFoundContent !== undefined) {
+      mergedNotFound = notFoundContent;
+    } else if (mode === 'combobox') {
+      mergedNotFound = null;
+    } else {
+      mergedNotFound = renderEmpty('Select');
     }
 
-    const modeConfig = {
+    // ===================== Icons =====================
-      multiple: mode === 'multiple',
+    // Clear Icon
-      tags: mode === 'tags',
+    let mergedClearIcon = clearIcon;
-      combobox: this.isCombobox(),
+    if (!clearIcon) {
-    };
+      mergedClearIcon = <CloseCircleFilled />;
+    }
 
-    const finalRemoveIcon = (removeIcon &&
+    // Arrow item icon
-      (React.isValidElement<{ className?: string }>(removeIcon)
+    let mergedSuffixIcon = null;
-        ? React.cloneElement(removeIcon, {
+    if (suffixIcon !== undefined) {
-            className: classNames(removeIcon.props.className, `${prefixCls}-remove-icon`),
+      mergedSuffixIcon = suffixIcon;
-          })
+    } else if (loading) {
-        : removeIcon)) || <Close className={`${prefixCls}-remove-icon`} />;
+      mergedSuffixIcon = <Loading spin />;
+    } else {
+      mergedSuffixIcon = <Down />;
+    }
 
-    const finalClearIcon = (clearIcon &&
+    // Checked item icon
-      (React.isValidElement<{ className?: string }>(clearIcon)
+    let mergedItemIcon = null;
-        ? React.cloneElement(clearIcon, {
+    if (menuItemSelectedIcon !== undefined) {
-            className: classNames(clearIcon.props.className, `${prefixCls}-clear-icon`),
+      mergedItemIcon = menuItemSelectedIcon;
-          })
+    } else if (isMultiple) {
-        : clearIcon)) || <CloseCircleFilled className={`${prefixCls}-clear-icon`} />;
+      mergedItemIcon = <Check />;
+    } else {
+      mergedItemIcon = null;
+    }
 
-    const finalMenuItemSelectedIcon = (menuItemSelectedIcon &&
+    let mergedRemoveIcon = null;
-      (React.isValidElement<{ className?: string }>(menuItemSelectedIcon)
+    if (removeIcon !== undefined) {
-        ? React.cloneElement(menuItemSelectedIcon, {
+      mergedRemoveIcon = removeIcon;
-            className: classNames(
+    } else {
-              menuItemSelectedIcon.props.className,
+      mergedRemoveIcon = <Close />;
-              `${prefixCls}-selected-icon`,
+    }
-            ),
+
-          })
+    const selectProps = omit(this.props, ['prefixCls', 'suffixIcon', 'size']);
-        : menuItemSelectedIcon)) || <Check className={`${prefixCls}-selected-icon`} />;
+
+    const mergedClassName = classNames(className, {
+      [`${prefixCls}-lg`]: size === 'large',
+      [`${prefixCls}-sm`]: size === 'small',
+    });
 
     return (
-      <RcSelect
+      <RcSelect<ValueType>
-        inputIcon={this.renderSuffixIcon(prefixCls)}
+        ref={this.selectRef}
-        removeIcon={finalRemoveIcon}
+        {...selectProps}
-        clearIcon={finalClearIcon}
+        listHeight={listHeight}
-        menuItemSelectedIcon={finalMenuItemSelectedIcon}
+        listItemHeight={listItemHeight}
-        showArrow={showArrow}
+        mode={mode}
-        {...rest}
-        {...modeConfig}
-        inputValue={searchValue || inputValue}
         prefixCls={prefixCls}
-        className={cls}
+        inputIcon={mergedSuffixIcon}
-        optionLabelProp={optionLabelProp || 'children'}
+        menuItemSelectedIcon={mergedItemIcon}
-        notFoundContent={this.getNotFoundContent(renderEmpty)}
+        removeIcon={mergedRemoveIcon}
-        getPopupContainer={getPopupContainer || getContextPopupContainer}
+        clearIcon={mergedClearIcon}
-        ref={this.saveSelect}
+        notFoundContent={mergedNotFound}
+        className={mergedClassName}
       />
     );
   };
@@ -284,3 +166,5 @@ export default class Select<T = SelectValue> extends React.Component<SelectProps
     return <ConfigConsumer>{this.renderSelect}</ConfigConsumer>;
   }
 }
+
+export default Select;

components/select/style/index.less

@@ -2,33 +2,49 @@
 @import '../../style/mixins/index';
 @import '../../input/style/mixin';
 
-@select-prefix-cls: ~'@{ant-prefix}-select';
+@import './single';
+@import './multiple';
 
-.selection__clear() {
+@select-prefix-cls: ~'@{ant-prefix}-select';
-  position: absolute;
+@select-height-without-border: @input-height-base - 2 * @border-width-base;
-  top: 50%;
+
-  right: @control-padding-horizontal - 1px;
+.select-selector() {
-  z-index: 1;
+  position: relative;
-  display: inline-block;
+  border: @border-width-base @border-style-base @select-border-color;
-  width: 12px;
+  border-radius: @border-radius-base;
-  height: 12px;
+  transition: all 0.3s @ease-in-out;
-  margin-top: -6px;
+
-  color: @disabled-color;
+  input {
-  font-size: @font-size-sm;
+    cursor: pointer;
-  font-style: normal;
-  line-height: 12px;
-  text-align: center;
-  text-transform: none;
-  background: @component-background;
-  cursor: pointer;
-  opacity: 0;
-  transition: color 0.3s ease, opacity 0.15s ease;
-  text-rendering: auto;
-  &::before {
-    display: block;
   }
-  &:hover {
+
-    color: @text-color-secondary;
+  .@{select-prefix-cls}-show-search& {
+    input {
+      cursor: auto;
+    }
+  }
+
+  .@{select-prefix-cls}-focused& {
+    .active();
+  }
+
+  .@{select-prefix-cls}-disabled& {
+    color: @disabled-color;
+    background: @input-disabled-bg;
+    cursor: not-allowed;
+
+    input {
+      cursor: not-allowed;
+    }
+  }
+}
+
+/* Reset search input style */
+.select-search-input-without-border() {
+  .@{select-prefix-cls}-selection-search-input {
+    background: transparent;
+    border: none;
+    outline: none;
   }
 }
 
@@ -37,494 +53,155 @@
 
   position: relative;
   display: inline-block;
-  outline: 0;
 
-  ul,
+  // ======================== Selection ========================
-  ol {
+  &-selection-item {
-    margin: 0;
+    overflow: hidden;
-    padding: 0;
+    white-space: nowrap;
-    list-style: none;
+    text-overflow: ellipsis;
   }
 
-  > ul > li > a {
+  // ======================= Placeholder =======================
-    padding: 0;
+  &-selection-placeholder {
-    background-color: @component-background;
+    opacity: 0.4;
   }
 
-  // arrow
+  // ========================== Arrow ==========================
   &-arrow {
     .iconfont-mixin();
 
     position: absolute;
-    top: 50%;
+    top: 55%;
     right: @control-padding-horizontal - 1px;
+    width: @font-size-sm;
+    height: @font-size-sm;
     margin-top: -@font-size-sm / 2;
     color: @disabled-color;
     font-size: @font-size-sm;
     line-height: 1;
+    text-align: center;
     transform-origin: 50% 50%;
+    transition: transform 0.3s;
+    pointer-events: none;
 
-    & &-icon svg {
+    .@{select-prefix-cls}-open & {
-      transition: transform 0.3s;
+      transform: rotate(180deg);
     }
   }
 
-  &-selection {
+  // ========================== Clear ==========================
-    display: block;
+  &-clear {
-    box-sizing: border-box;
-    background-color: @component-background;
-    border: @border-width-base @border-style-base @select-border-color;
-    // strange align fix for chrome but works
-    // https://gw.alipayobjects.com/zos/rmsportal/VFTfKXJuogBAXcvfAUWJ.gif
-    border-top-width: @border-width-base + 0.02px;
-    border-radius: @border-radius-base;
-    outline: none;
-    transition: all 0.3s @ease-in-out;
-    user-select: none;
-
-    &:hover {
-      .hover;
-    }
-
-    .@{select-prefix-cls}-focused &,
-    &:focus,
-    &:active {
-      .active;
-    }
-
-    &__clear {
-      .selection__clear();
-    }
-
-    &:hover &__clear {
-      opacity: 1;
-    }
-
-    &-selected-value {
-      float: left;
-      max-width: 100%;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-  }
-
-  &-no-arrow &-selection-selected-value {
-    padding-right: 0;
-  }
-
-  &-disabled {
-    color: @disabled-color;
-  }
-
-  &-disabled &-selection {
-    background: @input-disabled-bg;
-    cursor: not-allowed;
-    &:hover,
-    &:focus,
-    &:active {
-      border-color: @select-border-color;
-      box-shadow: none;
-    }
-
-    &__clear {
-      display: none;
-      visibility: hidden;
-      pointer-events: none;
-    }
-  }
-
-  &-disabled &-selection--multiple &-selection__choice {
-    padding-right: 10px;
-    color: fade(@black, 33%);
-    background: @background-color-base;
-    &__remove {
-      display: none;
-    }
-  }
-
-  &-selection--single {
-    position: relative;
-    height: @input-height-base;
-    cursor: pointer;
-
-    .@{select-prefix-cls}-selection__rendered {
-      margin-right: 24px;
-    }
-  }
-
-  &-no-arrow {
-    .@{select-prefix-cls}-selection__rendered {
-      margin-right: @control-padding-horizontal - 1px;
-    }
-  }
-
-  &-selection__rendered {
-    position: relative;
-    display: block;
-    margin-right: @control-padding-horizontal - 1px;
-    margin-left: @control-padding-horizontal - 1px;
-    line-height: @input-height-base - 2px;
-    // https://github.com/ant-design/ant-design/issues/3481#issuecomment-254721026
-    &::after {
-      display: inline-block;
-      width: 0;
-      visibility: hidden;
-      content: '.';
-      pointer-events: none;
-    }
-  }
-
-  &-lg {
-    font-size: @font-size-lg;
-    .@{select-prefix-cls}-selection--single {
-      height: @input-height-lg;
-    }
-    .@{select-prefix-cls}-selection__rendered {
-      line-height: @input-height-lg - 2px;
-    }
-    .@{select-prefix-cls}-selection--multiple {
-      min-height: @input-height-lg;
-      .@{select-prefix-cls}-selection__rendered {
-        li {
-          height: @input-height-lg - 8px;
-          line-height: @input-height-lg - 8px;
-        }
-      }
-      .@{select-prefix-cls}-selection__clear,
-      .@{select-prefix-cls}-arrow {
-        top: @input-height-lg / 2;
-      }
-    }
-  }
-
-  &-sm {
-    .@{select-prefix-cls}-selection--single {
-      height: @input-height-sm;
-    }
-    .@{select-prefix-cls}-selection__rendered {
-      margin-left: @control-padding-horizontal-sm - 1px;
-      line-height: @input-height-sm - 2px;
-    }
-    .@{select-prefix-cls}-selection--multiple {
-      min-height: @input-height-sm;
-      .@{select-prefix-cls}-selection__rendered {
-        li {
-          height: @input-height-sm - 8px;
-          line-height: @input-height-sm - 10px;
-        }
-      }
-      .@{select-prefix-cls}-selection__clear,
-      .@{select-prefix-cls}-arrow {
-        top: @input-height-sm / 2;
-      }
-    }
-    .@{select-prefix-cls}-selection__clear,
-    .@{select-prefix-cls}-arrow {
-      right: @control-padding-horizontal-sm;
-    }
-  }
-
-  &-disabled &-selection__choice__remove {
-    color: @disabled-color;
-    cursor: default;
-    &:hover {
-      color: @disabled-color;
-    }
-  }
-
-  &-search__field__wrap {
-    position: relative;
-    display: inline-block;
-  }
-
-  &-selection__placeholder,
-  &-search__field__placeholder {
-    // for TreeSelect compatibility
     position: absolute;
     top: 50%;
-    right: 9px;
+    right: @control-padding-horizontal - 1px;
-    left: 0;
+    z-index: 1;
-    max-width: 100%;
+    display: inline-block;
-    height: 20px;
+    width: @font-size-sm;
-    margin-top: -10px;
+    height: @font-size-sm;
-    overflow: hidden;
+    margin-top: -@font-size-sm / 2;
-    color: @input-placeholder-color;
+    color: @disabled-color;
-    line-height: 20px;
+    font-size: @font-size-sm;
-    white-space: nowrap;
+    font-style: normal;
-    text-align: left;
+    line-height: 1;
-    text-overflow: ellipsis;
+    text-align: center;
-  }
+    text-transform: none;
-
+    background: @component-background;
-  &-search__field__placeholder {
+    cursor: pointer;
-    left: @control-padding-horizontal;
-  }
-
-  &-search__field__mirror {
-    position: absolute;
-    top: 0;
-    left: 0;
-    white-space: pre;
     opacity: 0;
-    pointer-events: none;
+    transition: color 0.3s ease, opacity 0.15s ease;
-  }
+    text-rendering: auto;
-
+    &::before {
-  &-search--inline {
+      display: block;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-
-    .@{select-prefix-cls}-search__field__wrap {
-      width: 100%;
-      height: 100%;
     }
-
+    &:hover {
-    .@{select-prefix-cls}-search__field {
-      width: 100%;
-      height: 100%;
-      font-size: 100%;
-      line-height: 1;
-      background: transparent;
-      border-width: 0;
-      border-radius: @border-radius-base;
-      outline: 0;
-    }
-
-    > i {
-      float: right;
-    }
-  }
-
-  &-selection--multiple {
-    min-height: @input-height-base;
-    padding-bottom: 3px;
-    cursor: text;
-    .clearfix;
-
-    .@{select-prefix-cls}-search--inline {
-      position: static;
-      float: left;
-      width: auto;
-      max-width: 100%;
-      padding: 0;
-      .@{select-prefix-cls}-search__field {
-        width: 0.75em;
-        max-width: 100%;
-      }
-    }
-
-    .@{select-prefix-cls}-selection__rendered {
-      height: auto;
-      margin-bottom: -3px;
-      margin-left: 5px;
-    }
-
-    .@{select-prefix-cls}-selection__placeholder {
-      margin-left: 6px;
-    }
-
-    > ul > li,
-    .@{select-prefix-cls}-selection__rendered > ul > li {
-      height: @input-height-base - 8px;
-      // for tree-select
-      margin-top: 3px;
-      line-height: @input-height-base - 8px - 2px;
-    }
-
-    .@{select-prefix-cls}-selection__choice {
-      position: relative;
-      float: left;
-      max-width: 99%;
-      margin-right: 4px;
-      padding: 0 20px 0 10px;
-      overflow: hidden;
-      color: @tag-default-color;
-      background-color: @tag-default-bg;
-      border: 1px solid @border-color-split;
-      border-radius: @border-radius-sm;
-      cursor: default;
-      transition: padding 0.3s @ease-in-out;
-      &__disabled {
-        padding: 0 10px;
-      }
-    }
-
-    .@{select-prefix-cls}-selection__choice__content {
-      display: inline-block;
-      max-width: 100%;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      transition: margin 0.3s @ease-in-out;
-    }
-
-    .@{select-prefix-cls}-selection__choice__remove {
-      .iconfont-mixin();
-
-      position: absolute;
-      right: 4px;
-      display: inline-block;
       color: @text-color-secondary;
-      font-weight: bold;
-      font-size: @font-size-sm;
-      line-height: inherit;
-      cursor: pointer;
-      transition: all 0.3s;
-      .iconfont-size-under-12px(10px);
-      &:hover {
-        color: @icon-color-hover;
-      }
     }
 
-    .@{select-prefix-cls}-selection__clear,
+    .@{select-prefix-cls}:hover & {
-    .@{select-prefix-cls}-arrow {
+      opacity: 1;
-      top: @input-height-base / 2;
     }
   }
 
-  &-allow-clear &-selection--single &-selection-selected-value {
+  // ========================== Popup ==========================
-    padding-right: 16px;
+  &-dropdown {
-  }
+    .reset-component;
 
-  &-allow-clear &-selection--multiple &-selection__rendered,
+    position: absolute;
-  &-show-arrow &-selection--multiple &-selection__rendered {
+    top: -9999px;
-    margin-right: 20px; // In case that clear button will overlap content
+    left: -9999px;
-  }
+    z-index: @zindex-dropdown;
+    box-sizing: border-box;
+    overflow: hidden;
+    font-size: @font-size-base;
+    // Fix select render lag of long text in chrome
+    // https://github.com/ant-design/ant-design/issues/11456
+    // https://github.com/ant-design/ant-design/issues/11843
+    font-variant: initial;
+    background-color: @select-dropdown-bg;
+    border-radius: @border-radius-base;
+    outline: none;
+    box-shadow: @box-shadow-base;
 
-  &-open {
+    &.slide-up-enter.slide-up-enter-active&-placement-bottomLeft,
-    .@{select-prefix-cls}-arrow {
+    &.slide-up-appear.slide-up-appear-active&-placement-bottomLeft {
-      &-icon svg {
+      animation-name: antSlideUpIn;
-        transform: rotate(180deg);
-      }
     }
-    .@{select-prefix-cls}-selection {
-      .active();
-    }
-  }
 
-  &-combobox {
+    &.slide-up-enter.slide-up-enter-active&-placement-topLeft,
-    .@{select-prefix-cls}-arrow {
+    &.slide-up-appear.slide-up-appear-active&-placement-topLeft {
+      animation-name: antSlideDownIn;
+    }
+
+    &.slide-up-leave.slide-up-leave-active&-placement-bottomLeft {
+      animation-name: antSlideUpOut;
+    }
+
+    &.slide-up-leave.slide-up-leave-active&-placement-topLeft {
+      animation-name: antSlideDownOut;
+    }
+
+    &-hidden {
       display: none;
     }
-    .@{select-prefix-cls}-search--inline {
-      float: none;
-      width: 100%;
-      height: 100%;
-    }
-    .@{select-prefix-cls}-search__field__wrap {
-      width: 100%;
-      height: 100%;
-    }
-    .@{select-prefix-cls}-search__field {
-      position: relative;
-      z-index: 1;
-      width: 100%;
-      height: 100%;
-      box-shadow: none;
-      transition: all 0.3s @ease-in-out, height 0s;
-    }
-  }
-  &-combobox&-allow-clear &-selection:hover &-selection__rendered,
-  &-combobox&-show-arrow &-selection:hover &-selection__rendered {
-    margin-right: 20px; // In case that clear button will overlap content
-  }
-}
-
-.@{select-prefix-cls}-dropdown {
-  .reset-component;
-
-  position: absolute;
-  top: -9999px;
-  left: -9999px;
-  z-index: @zindex-dropdown;
-  box-sizing: border-box;
-  font-size: @font-size-base;
-  // Fix select render lag of long text in chrome
-  // https://github.com/ant-design/ant-design/issues/11456
-  // https://github.com/ant-design/ant-design/issues/11843
-  font-variant: initial;
-  background-color: @select-dropdown-bg;
-  border-radius: @border-radius-base;
-  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 {
-    animation-name: antSlideUpIn;
   }
 
-  &.slide-up-enter.slide-up-enter-active&-placement-topLeft,
+  // ========================= Options =========================
-  &.slide-up-appear.slide-up-appear-active&-placement-topLeft {
+  &-item {
-    animation-name: antSlideDownIn;
+    position: relative;
-  }
+    display: block;
+    min-height: 32px;
+    padding: 5px @control-padding-horizontal;
+    color: @text-color;
+    font-weight: normal;
+    line-height: 22px;
+    cursor: pointer;
+    transition: background 0.3s ease;
 
-  &.slide-up-leave.slide-up-leave-active&-placement-bottomLeft {
+    // =========== Group ============
-    animation-name: antSlideUpOut;
+    &-group {
-  }
-
-  &.slide-up-leave.slide-up-leave-active&-placement-topLeft {
-    animation-name: antSlideDownOut;
-  }
-
-  &-hidden {
-    display: none;
-  }
-
-  &-menu {
-    max-height: 250px;
-    margin-bottom: 0;
-    padding-left: 0; // Override default ul/ol
-    overflow: auto;
-    list-style: none;
-    outline: none;
-
-    &-item-group-list {
-      margin: 0;
-      padding: 0;
-
-      > .@{select-prefix-cls}-dropdown-menu-item {
-        padding-left: 20px;
-      }
-    }
-
-    &-item-group-title {
-      height: 32px;
-      padding: 0 @control-padding-horizontal;
       color: @text-color-secondary;
       font-size: @font-size-sm;
-      line-height: 32px;
     }
 
-    &-item-group-list &-item:first-child:not(:last-child),
+    // =========== Option ===========
-    &-item-group:not(:last-child) &-item-group-list &-item:last-child {
+    &-option {
-      border-radius: 0;
+      display: flex;
-    }
 
-    &-item {
+      &-content {
-      position: relative;
+        flex: auto;
-      display: block;
+        overflow: hidden;
-      padding: 5px @control-padding-horizontal;
+        white-space: nowrap;
-      overflow: hidden;
+        text-overflow: ellipsis;
-      color: @text-color;
+      }
-      font-weight: normal;
-      line-height: 22px;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      cursor: pointer;
-      transition: background 0.3s ease;
 
-      &:hover:not(&-disabled) {
+      &-state {
+        flex: none;
+      }
+
+      &-active:not(&-disabled) {
         background-color: @item-hover-bg;
       }
 
-      &:first-child {
-        border-radius: @border-radius-base @border-radius-base 0 0;
-      }
-
-      &:last-child {
-        border-radius: 0 0 @border-radius-base @border-radius-base;
-      }
-
       &-selected {
         color: @text-color;
         font-weight: @select-item-selected-font-weight;
@@ -534,68 +211,14 @@
       &-disabled {
         color: @disabled-color;
         cursor: not-allowed;
-
-        &:hover {
-          color: @disabled-color;
-          cursor: not-allowed;
-        }
-      }
-
-      &-active:not(&-disabled) {
-        background-color: @select-item-active-bg;
-      }
-
-      &-divider {
-        height: 1px;
-        margin: 1px 0;
-        overflow: hidden;
-        line-height: 0;
-        background-color: @border-color-split;
       }
     }
   }
 
-  &&--multiple {
+  // ============================================================
-    .@{select-prefix-cls}-dropdown-menu-item {
+  // ==                          Size                          ==
-      padding-right: @control-padding-horizontal + 20;
+  // ============================================================
-      & .@{select-prefix-cls}-selected-icon {
+  &-lg {
-        position: absolute;
+    font-size: @font-size-lg;
-        top: 50%;
-        right: @control-padding-horizontal;
-        color: transparent;
-        font-weight: bold;
-        font-size: 12px;
-        text-shadow: 0 0.1px 0, 0.1px 0 0, 0 -0.1px 0, -0.1px 0;
-        transform: translateY(-50%);
-        transition: all 0.2s;
-      }
-
-      &:hover .@{select-prefix-cls}-selected-icon {
-        color: fade(@black, 87%);
-      }
-
-      &-disabled .@{select-prefix-cls}-selected-icon {
-        display: none;
-      }
-
-      &-selected .@{select-prefix-cls}-selected-icon,
-      &-selected:hover .@{select-prefix-cls}-selected-icon {
-        display: inline-block;
-        color: @primary-color;
-      }
-    }
-  }
-
-  // Patch for popup adjust
-  // https://github.com/ant-design/ant-design/issues/14422
-  &--empty&--multiple &-menu-item {
-    padding-right: @control-padding-horizontal;
-  }
-
-  &-container-open,
-  &-open {
-    .@{select-prefix-cls}-dropdown {
-      display: block;
-    }
   }
 }

components/select/style/multiple.less

@@ -0,0 +1,144 @@
+@import './index';
+
+@select-selection-height: @input-height-base - @input-padding-vertical-base * 2;
+@select-multiple-padding: @input-padding-vertical-base - @border-width-base;
+
+/**
+ * Do not merge `height` & `line-height` under style with `selection` & `search`,
+ * since chrome may update to redesign with its align logic.
+ */
+
+.@{select-prefix-cls}-multiple {
+  // ========================= Selector =========================
+  .@{select-prefix-cls}-selector {
+    .select-selector();
+    .select-search-input-without-border();
+
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    // Multiple is little different that horizontal is follow the vertical
+    padding: 0 @select-multiple-padding @select-multiple-padding;
+  }
+
+  // ======================== Selections ========================
+  .@{select-prefix-cls}-selection-item {
+    position: relative;
+    display: flex;
+    flex: none;
+    box-sizing: border-box;
+    max-width: 100%;
+
+    height: @select-selection-height;
+    margin-top: @select-multiple-padding;
+    margin-right: @input-padding-vertical-base;
+    padding: 0 (@padding-xs / 2) 0 @padding-xs;
+    line-height: @select-selection-height - @border-width-base * 2;
+    background: @background-color-base;
+    border: 1px solid @border-color-split;
+    // strange align fix for chrome but works
+    // https://gw.alipayobjects.com/zos/rmsportal/VFTfKXJuogBAXcvfAUWJ.gif
+    border-top-width: @border-width-base + 0.4px;
+    border-radius: @border-radius-sm;
+    cursor: default;
+    transition: font-size 0.3s, line-height 0.3s, height 0.3s;
+    user-select: none;
+
+    // It's ok not to do this, but 24px makes bottom narrow in view should adjust
+    &-content {
+      display: inline-block;
+      margin-right: @padding-xs / 2;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      transform: translateY(-1px);
+    }
+
+    &-remove {
+      .iconfont-mixin();
+
+      display: inline-block;
+      color: @text-color-secondary;
+      font-weight: bold;
+      font-size: @font-size-sm;
+      line-height: inherit;
+      cursor: pointer;
+      .iconfont-size-under-12px(10px);
+      &:hover {
+        color: @icon-color-hover;
+      }
+    }
+  }
+
+  // ========================== Input ==========================
+  .@{select-prefix-cls}-selection-search {
+    position: relative;
+    margin-left: @select-multiple-padding / 2;
+
+    &-input,
+    &-mirror {
+      height: @select-selection-height;
+      font-family: @font-family;
+      line-height: @select-selection-height - @border-width-base * 2;
+      transition: all 0.3s;
+    }
+
+    &-input {
+      width: 100%;
+      margin-top: @select-multiple-padding;
+    }
+
+    &-mirror {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 999;
+      white-space: nowrap;
+      visibility: hidden;
+    }
+  }
+
+  // ======================= Placeholder =======================
+  .@{select-prefix-cls}-selection-placeholder {
+    position: absolute;
+    top: 0;
+    left: @control-padding-horizontal;
+    height: @select-height-without-border;
+    line-height: @select-height-without-border;
+    transition: all 0.3s;
+  }
+
+  // ============================================================
+  // ==                          Size                          ==
+  // ============================================================
+  .select-size(@suffix, @input-height) {
+    @merged-cls: ~'@{select-prefix-cls}-@{suffix}';
+    &.@{merged-cls} {
+      @select-selection-height: @input-height - @input-padding-vertical-base * 2;
+      @select-height-without-border: @input-height - @border-width-base * 2;
+
+      .@{select-prefix-cls}-selection-item {
+        height: @select-selection-height;
+        line-height: @select-selection-height - @border-width-base * 2;
+      }
+
+      .@{select-prefix-cls}-selection-search {
+        height: @select-selection-height + @select-multiple-padding;
+
+        &-input,
+        &-mirror {
+          height: @select-selection-height;
+          line-height: @select-selection-height - @border-width-base * 2;
+        }
+      }
+
+      .@{select-prefix-cls}-selection-placeholder {
+        height: @select-height-without-border;
+        line-height: @select-height-without-border;
+      }
+    }
+  }
+
+  .select-size('lg', @input-height-lg);
+  .select-size('sm', @input-height-sm);
+}

components/select/style/single.less

@@ -0,0 +1,107 @@
+@import './index';
+
+.@{select-prefix-cls}-single {
+  // ========================= Selector =========================
+  .@{select-prefix-cls}-selector {
+    display: flex;
+
+    .@{select-prefix-cls}-selection-search {
+      width: 100%;
+
+      &-input {
+        width: 100%;
+      }
+    }
+
+    .@{select-prefix-cls}-selection-item,
+    .@{select-prefix-cls}-selection-placeholder {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      padding: 0 @input-padding-horizontal-base;
+      line-height: @input-height-base;
+      transition: all 0.3s;
+      pointer-events: none;
+
+      // Firefox inline-block position calculation is not same as Chrome & Safari. Patch this:
+      @supports (-moz-appearance: meterbar) {
+        & {
+          line-height: @select-height-without-border;
+        }
+      }
+    }
+  }
+
+  // With arrow should provides `padding-right` to show the arrow
+  &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selector,
+  &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-item {
+    padding-right: @control-padding-horizontal + @font-size-sm;
+  }
+
+  // Opacity selection if open
+  &.@{select-prefix-cls}-open .@{select-prefix-cls}-selection-item {
+    opacity: 0.4;
+  }
+
+  // ========================== 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-selector();
+      .select-search-input-without-border();
+      width: 100%;
+
+      height: @input-height-base;
+      padding: 0 @input-padding-horizontal-base;
+
+      .@{select-prefix-cls}-selection-search-input {
+        height: @select-height-without-border;
+      }
+    }
+  }
+
+  // ============================================================
+  // ==                          Size                          ==
+  // ============================================================
+  .select-size(@suffix, @input-height) {
+    @merged-cls: ~'@{select-prefix-cls}-@{suffix}';
+
+    &.@{merged-cls}:not(.@{select-prefix-cls}-customize-input) {
+      .@{select-prefix-cls}-selector {
+        height: @input-height;
+
+        .@{select-prefix-cls}-selection-item,
+        .@{select-prefix-cls}-selection-placeholder {
+          line-height: @input-height;
+        }
+      }
+
+      // Not customize
+      &:not(.@{select-prefix-cls}-customize-input) {
+        .@{select-prefix-cls}-selection-search-input {
+          height: @input-height - 2 * @border-width-base;
+        }
+      }
+    }
+  }
+
+  .select-size('lg', @input-height-lg);
+  .select-size('sm', @input-height-sm);
+
+  // Size small need additional set padding
+  &.@{select-prefix-cls}-sm {
+    &:not(.@{select-prefix-cls}-customize-input) {
+      .@{select-prefix-cls}-selector {
+        &,
+        .@{select-prefix-cls}-selection-item,
+        .@{select-prefix-cls}-selection-placeholder {
+          padding: 0 @input-padding-horizontal-sm;
+        }
+      }
+    }
+  }
+}

components/table/__tests__/Table.pagination.test.js

@@ -224,7 +224,7 @@ describe('Table.pagination', () => {
         },
       }),
     );
-    wrapper.find('.ant-select').simulate('click');
+    wrapper.find('.ant-select-selector').simulate('mousedown');
     jest.runAllTimers();
     const dropdownWrapper = mount(
       wrapper
@@ -232,9 +232,9 @@ describe('Table.pagination', () => {
         .instance()
         .getComponent(),
     );
-    expect(dropdownWrapper.find('MenuItem').length).toBe(4);
+    expect(wrapper.find('.ant-select-item-option').length).toBe(4);
     dropdownWrapper
-      .find('MenuItem')
+      .find('.ant-select-item-option')
       .at(3)
       .simulate('click');
     expect(onShowSizeChange).toHaveBeenCalled();

components/tabs/__tests__/__snapshots__/demo.test.js.snap

@@ -1771,184 +1771,224 @@ exports[`renders ./components/tabs/demo/icon.md correctly 1`] = `
 exports[`renders ./components/tabs/demo/nest.md correctly 1`] = `
 <div>
   <div
-    class="ant-select ant-select-enabled"
+    class="ant-select ant-select-single ant-select-show-arrow"
     style="width:200px"
   >
     <div
-      aria-autocomplete="list"
+      class="ant-select-selector"
-      aria-controls=""
-      aria-expanded="false"
-      aria-haspopup="true"
-      class="ant-select-selection
-            ant-select-selection--single"
-      role="combobox"
-      tabindex="0"
     >
-      <div
-        class="ant-select-selection__rendered"
-      />
       <span
-        class="ant-select-arrow"
+        class="ant-select-selection-search"
-        style="user-select:none;-webkit-user-select:none"
-        unselectable="on"
       >
-        <span
+        <input
-          aria-label="down"
+          aria-activedescendant="undefined_list_0"
-          class="anticon anticon-down ant-select-arrow-icon"
+          aria-autocomplete="list"
-          role="img"
+          aria-controls="undefined_list"
-        >
+          aria-haspopup="listbox"
-          <svg
+          aria-owns="undefined_list"
-            aria-hidden="true"
+          autocomplete="off"
-            class=""
+          class="ant-select-selection-search-input"
-            data-icon="down"
+          role="combobox"
-            fill="currentColor"
+          style="opacity:0"
-            focusable="false"
+          value=""
-            height="1em"
+        />
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-            />
-          </svg>
-        </span>
       </span>
+      <span
+        class="ant-select-selection-placeholder"
+      />
     </div>
+    <span
+      aria-hidden="true"
+      class="ant-select-arrow"
+      style="user-select:none;-webkit-user-select:none"
+      unselectable="on"
+    >
+      <span
+        aria-label="down"
+        class="anticon anticon-down"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="down"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+          />
+        </svg>
+      </span>
+    </span>
   </div>
   <div
-    class="ant-select ant-select-enabled"
+    class="ant-select ant-select-single ant-select-show-arrow"
     style="width:200px"
   >
     <div
-      aria-autocomplete="list"
+      class="ant-select-selector"
-      aria-controls=""
-      aria-expanded="false"
-      aria-haspopup="true"
-      class="ant-select-selection
-            ant-select-selection--single"
-      role="combobox"
-      tabindex="0"
     >
-      <div
-        class="ant-select-selection__rendered"
-      />
       <span
-        class="ant-select-arrow"
+        class="ant-select-selection-search"
-        style="user-select:none;-webkit-user-select:none"
-        unselectable="on"
       >
-        <span
+        <input
-          aria-label="down"
+          aria-activedescendant="undefined_list_0"
-          class="anticon anticon-down ant-select-arrow-icon"
+          aria-autocomplete="list"
-          role="img"
+          aria-controls="undefined_list"
-        >
+          aria-haspopup="listbox"
-          <svg
+          aria-owns="undefined_list"
-            aria-hidden="true"
+          autocomplete="off"
-            class=""
+          class="ant-select-selection-search-input"
-            data-icon="down"
+          role="combobox"
-            fill="currentColor"
+          style="opacity:0"
-            focusable="false"
+          value=""
-            height="1em"
+        />
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-            />
-          </svg>
-        </span>
       </span>
+      <span
+        class="ant-select-selection-placeholder"
+      />
     </div>
+    <span
+      aria-hidden="true"
+      class="ant-select-arrow"
+      style="user-select:none;-webkit-user-select:none"
+      unselectable="on"
+    >
+      <span
+        aria-label="down"
+        class="anticon anticon-down"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="down"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+          />
+        </svg>
+      </span>
+    </span>
   </div>
   <div
-    class="ant-select ant-select-enabled"
+    class="ant-select ant-select-single ant-select-show-arrow"
     style="width:200px"
   >
     <div
-      aria-autocomplete="list"
+      class="ant-select-selector"
-      aria-controls=""
-      aria-expanded="false"
-      aria-haspopup="true"
-      class="ant-select-selection
-            ant-select-selection--single"
-      role="combobox"
-      tabindex="0"
     >
-      <div
-        class="ant-select-selection__rendered"
-      />
       <span
-        class="ant-select-arrow"
+        class="ant-select-selection-search"
-        style="user-select:none;-webkit-user-select:none"
-        unselectable="on"
       >
-        <span
+        <input
-          aria-label="down"
+          aria-activedescendant="undefined_list_0"
-          class="anticon anticon-down ant-select-arrow-icon"
+          aria-autocomplete="list"
-          role="img"
+          aria-controls="undefined_list"
-        >
+          aria-haspopup="listbox"
-          <svg
+          aria-owns="undefined_list"
-            aria-hidden="true"
+          autocomplete="off"
-            class=""
+          class="ant-select-selection-search-input"
-            data-icon="down"
+          role="combobox"
-            fill="currentColor"
+          style="opacity:0"
-            focusable="false"
+          value=""
-            height="1em"
+        />
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-            />
-          </svg>
-        </span>
       </span>
+      <span
+        class="ant-select-selection-placeholder"
+      />
     </div>
+    <span
+      aria-hidden="true"
+      class="ant-select-arrow"
+      style="user-select:none;-webkit-user-select:none"
+      unselectable="on"
+    >
+      <span
+        aria-label="down"
+        class="anticon anticon-down"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="down"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+          />
+        </svg>
+      </span>
+    </span>
   </div>
   <div
-    class="ant-select ant-select-enabled"
+    class="ant-select ant-select-single ant-select-show-arrow"
     style="width:200px"
   >
     <div
-      aria-autocomplete="list"
+      class="ant-select-selector"
-      aria-controls=""
-      aria-expanded="false"
-      aria-haspopup="true"
-      class="ant-select-selection
-            ant-select-selection--single"
-      role="combobox"
-      tabindex="0"
     >
-      <div
-        class="ant-select-selection__rendered"
-      />
       <span
-        class="ant-select-arrow"
+        class="ant-select-selection-search"
-        style="user-select:none;-webkit-user-select:none"
-        unselectable="on"
       >
-        <span
+        <input
-          aria-label="down"
+          aria-activedescendant="undefined_list_0"
-          class="anticon anticon-down ant-select-arrow-icon"
+          aria-autocomplete="list"
-          role="img"
+          aria-controls="undefined_list"
-        >
+          aria-haspopup="listbox"
-          <svg
+          aria-owns="undefined_list"
-            aria-hidden="true"
+          autocomplete="off"
-            class=""
+          class="ant-select-selection-search-input"
-            data-icon="down"
+          role="combobox"
-            fill="currentColor"
+          style="opacity:0"
-            focusable="false"
+          value=""
-            height="1em"
+        />
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-            />
-          </svg>
-        </span>
       </span>
+      <span
+        class="ant-select-selection-placeholder"
+      />
     </div>
+    <span
+      aria-hidden="true"
+      class="ant-select-arrow"
+      style="user-select:none;-webkit-user-select:none"
+      unselectable="on"
+    >
+      <span
+        aria-label="down"
+        class="anticon anticon-down"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="down"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+          />
+        </svg>
+      </span>
+    </span>
   </div>
   <div
     class="ant-tabs ant-tabs-top ant-tabs-line"
@@ -2478,56 +2518,60 @@ exports[`renders ./components/tabs/demo/position.md correctly 1`] = `
   >
     Tab position：
     <div
-      class="ant-select ant-select-enabled"
+      class="ant-select ant-select-single ant-select-show-arrow"
     >
       <div
-        aria-autocomplete="list"
+        class="ant-select-selector"
-        aria-controls=""
-        aria-expanded="false"
-        aria-haspopup="true"
-        class="ant-select-selection
-            ant-select-selection--single"
-        role="combobox"
-        tabindex="0"
       >
-        <div
-          class="ant-select-selection__rendered"
-        >
-          <div
-            class="ant-select-selection-selected-value"
-            style="display:block;opacity:1"
-            title="top"
-          >
-            top
-          </div>
-        </div>
         <span
-          class="ant-select-arrow"
+          class="ant-select-selection-search"
-          style="user-select:none;-webkit-user-select:none"
-          unselectable="on"
         >
-          <span
+          <input
-            aria-label="down"
+            aria-activedescendant="undefined_list_0"
-            class="anticon anticon-down ant-select-arrow-icon"
+            aria-autocomplete="list"
-            role="img"
+            aria-controls="undefined_list"
-          >
+            aria-haspopup="listbox"
-            <svg
+            aria-owns="undefined_list"
-              aria-hidden="true"
+            autocomplete="off"
-              class=""
+            class="ant-select-selection-search-input"
-              data-icon="down"
+            role="combobox"
-              fill="currentColor"
+            style="opacity:0"
-              focusable="false"
+            value=""
-              height="1em"
+          />
-              viewBox="64 64 896 896"
+        </span>
-              width="1em"
+        <span
-            >
+          class="ant-select-selection-item"
-              <path
+        >
-                d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+          top
-              />
-            </svg>
-          </span>
         </span>
       </div>
+      <span
+        aria-hidden="true"
+        class="ant-select-arrow"
+        style="user-select:none;-webkit-user-select:none"
+        unselectable="on"
+      >
+        <span
+          aria-label="down"
+          class="anticon anticon-down"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+      </span>
     </div>
   </div>
   <div

components/tree-select/interface.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { AbstractSelectProps } from '../select';
+import { SelectProps } from '../select';
 
 export type TreeNode = TreeNodeNormal | TreeNodeSimpleMode;
 
@@ -31,15 +31,13 @@ export interface TreeDataSimpleMode {
   rootPId?: string;
 }
 
-export interface TreeSelectProps<T extends TreeNodeValue> extends AbstractSelectProps {
+export interface TreeSelectProps<T extends TreeNodeValue> extends Omit<SelectProps<T>, 'onChange'> {
   autoFocus?: boolean;
   defaultValue?: T;
   dropdownStyle?: React.CSSProperties;
   filterTreeNode?: (inputValue: string, treeNode: any) => boolean | boolean;
   labelInValue?: boolean;
   loadData?: (node: any) => void;
-  maxTagCount?: number;
-  maxTagPlaceholder?: React.ReactNode | ((omittedValues: any[]) => React.ReactNode);
   multiple?: boolean;
   notFoundContent?: React.ReactNode;
   onChange?: (value: T, label: any, extra: any) => void;

components/tree/__tests__/__snapshots__/directory.test.js.snap

@@ -493,6 +493,7 @@ exports[`Directory Tree defaultExpandParent 1`] = `
 exports[`Directory Tree expand click 1`] = `
 <div
   class="ant-tree-list ant-tree ant-tree-directory ant-tree-block-node"
+  disabled=""
   role="tree"
 >
   <div>
@@ -742,6 +743,7 @@ exports[`Directory Tree expand click 1`] = `
 exports[`Directory Tree expand click 2`] = `
 <div
   class="ant-tree-list ant-tree ant-tree-directory ant-tree-block-node"
+  disabled=""
   role="tree"
 >
   <div>
@@ -885,6 +887,7 @@ exports[`Directory Tree expand click 2`] = `
 exports[`Directory Tree expand double click 1`] = `
 <div
   class="ant-tree-list ant-tree ant-tree-directory ant-tree-block-node"
+  disabled=""
   role="tree"
 >
   <div>
@@ -1134,6 +1137,7 @@ exports[`Directory Tree expand double click 1`] = `
 exports[`Directory Tree expand double click 2`] = `
 <div
   class="ant-tree-list ant-tree ant-tree-directory ant-tree-block-node"
+  disabled=""
   role="tree"
 >
   <div>
@@ -1277,6 +1281,7 @@ exports[`Directory Tree expand double click 2`] = `
 exports[`Directory Tree expand with state control click 1`] = `
 <div
   class="ant-tree-list ant-tree ant-tree-directory ant-tree-block-node"
+  disabled=""
   role="tree"
 >
   <div>
@@ -1411,6 +1416,7 @@ exports[`Directory Tree expand with state control click 1`] = `
 exports[`Directory Tree expand with state control doubleClick 1`] = `
 <div
   class="ant-tree-list ant-tree ant-tree-directory ant-tree-block-node"
+  disabled=""
   role="tree"
 >
   <div>
@@ -1545,6 +1551,7 @@ exports[`Directory Tree expand with state control doubleClick 1`] = `
 exports[`Directory Tree expandedKeys update 1`] = `
 <div
   class="ant-tree-list ant-tree ant-tree-directory ant-tree-block-node"
+  disabled=""
   role="tree"
 >
   <div>

package.json

@@ -77,7 +77,7 @@
     "rc-pagination": "~1.20.5",
     "rc-progress": "~2.5.0",
     "rc-rate": "~2.5.0",
-    "rc-select": "~9.2.0",
+    "rc-select": "~10.0.0-alpha.11",
     "rc-slider": "~8.6.11",
     "rc-steps": "~3.5.0",
     "rc-switch": "~1.9.0",
@@ -90,6 +90,7 @@
     "rc-trigger": "^2.6.2",
     "rc-upload": "~2.7.0",
     "rc-util": "^4.10.0",
+    "rc-virtual-list": "^0.0.0-alpha.25",
     "react-lazy-load": "^3.0.13",
     "react-lifecycles-compat": "^3.0.4",
     "react-slick": "~0.25.2",

tests/__mocks__/rc-virtual-list.js

@@ -0,0 +1,3 @@
+import List from 'rc-virtual-list/lib/mock';
+
+export default List;

tests/shared/demoTest.js

@@ -3,6 +3,8 @@ import { render } from 'enzyme';
 import MockDate from 'mockdate';
 import moment from 'moment';
 
+// We should avoid use it in 4.0. Reopen if can not handle this.
+const USE_REPLACEMENT = false;
 const testDist = process.env.LIB_DIR === 'dist';
 
 /**
@@ -12,7 +14,7 @@ const testDist = process.env.LIB_DIR === 'dist';
  * So we need hack of this to modify the `aria-controls`.
  */
 function ariaConvert(wrapper) {
-  if (!testDist) return wrapper;
+  if (!testDist || !USE_REPLACEMENT) return wrapper;
 
   const matches = new Map();
 

typings/custom-typings.d.ts

@@ -16,8 +16,6 @@ declare module 'shallowequal';
 
 declare module 'css-animation*';
 
-declare module 'rc-select';
-
 declare module 'rc-cascader';
 
 declare module 'array-tree-filter';