support controlled open for Select, close #10482

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

@@ -44,12 +44,12 @@ exports[`renders ./components/select/demo/automatic-tokenization.md correctly 1`
 exports[`renders ./components/select/demo/basic.md correctly 1`] = `
 <div>
   <div
-    class="ant-select ant-select-enabled"
+    class="ant-select ant-select-open ant-select-focused ant-select-enabled"
     style="width:120px"
   >
     <div
       aria-autocomplete="list"
-      aria-expanded="false"
+      aria-expanded="true"
       aria-haspopup="true"
       class="ant-select-selection
             ant-select-selection--single"
@@ -92,8 +92,61 @@ exports[`renders ./components/select/demo/basic.md correctly 1`] = `
       </span>
     </div>
   </div>
+  <div>
+    <div
+      class="ant-select-dropdown ant-select-dropdown--single ant-select-dropdown-placement-bottomLeft "
+    >
+      <div
+        style="overflow:auto;transform:translateZ(0)"
+      >
+        <ul
+          class="ant-select-dropdown-menu  ant-select-dropdown-menu-root ant-select-dropdown-menu-vertical"
+          role="listbox"
+          tabindex="0"
+        >
+          <li
+            aria-selected="false"
+            class="ant-select-dropdown-menu-item"
+            role="option"
+            style="user-select:none;-webkit-user-select:none"
+            unselectable="on"
+          >
+            Jack
+          </li>
+          <li
+            aria-selected="true"
+            class="ant-select-dropdown-menu-item ant-select-dropdown-menu-item-active ant-select-dropdown-menu-item-selected"
+            role="option"
+            style="user-select:none;-webkit-user-select:none"
+            unselectable="on"
+          >
+            Lucy
+          </li>
+          <li
+            aria-disabled="true"
+            aria-selected="false"
+            class="ant-select-dropdown-menu-item ant-select-dropdown-menu-item-disabled"
+            role="option"
+            style="user-select:none;-webkit-user-select:none"
+            unselectable="on"
+          >
+            Disabled
+          </li>
+          <li
+            aria-selected="false"
+            class="ant-select-dropdown-menu-item"
+            role="option"
+            style="user-select:none;-webkit-user-select:none"
+            unselectable="on"
+          >
+            yiminghe
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
   <div
-    class="ant-select ant-select-disabled"
+    class="ant-select ant-select-enabled"
     style="width:120px"
   >
     <div
@@ -103,7 +156,7 @@ exports[`renders ./components/select/demo/basic.md correctly 1`] = `
       class="ant-select-selection
             ant-select-selection--single"
       role="combobox"
-      tabindex="-1"
+      tabindex="0"
     >
       <div
         class="ant-select-selection__rendered"

components/select/__tests__/index.test.js

@@ -3,6 +3,8 @@ import { mount } from 'enzyme';
 import Select from '..';
 import focusTest from '../../../tests/shared/focusTest';
 
+const { Option } = Select;
+
 describe('Select', () => {
   focusTest(Select);
 
@@ -55,4 +57,25 @@ describe('Select', () => {
     expect(dropdownWrapper.find('MenuItem').length).toBe(1);
     expect(dropdownWrapper.find('MenuItem').at(0).text()).toBe('not at all');
   });
+
+  it('should be controlled by open prop', () => {
+    const onDropdownVisibleChange = jest.fn();
+    const wrapper = mount(
+      <Select open onDropdownVisibleChange={onDropdownVisibleChange}>
+        <Option value="1">1</Option>
+      </Select>
+    );
+    let dropdownWrapper = mount(wrapper.find('Trigger').instance().getComponent());
+    expect(dropdownWrapper.props().visible).toBe(true);
+    wrapper.find('.ant-select').simulate('click');
+    expect(onDropdownVisibleChange).toHaveBeenLastCalledWith(false);
+    expect(dropdownWrapper.props().visible).toBe(true);
+
+    wrapper.setProps({ open: false });
+    dropdownWrapper = mount(wrapper.find('Trigger').instance().getComponent());
+    expect(dropdownWrapper.props().visible).toBe(false);
+    wrapper.find('.ant-select').simulate('click');
+    expect(onDropdownVisibleChange).toHaveBeenLastCalledWith(true);
+    expect(dropdownWrapper.props().visible).toBe(false);
+  });
 });

components/select/demo/basic.md

@@ -24,13 +24,13 @@ function handleChange(value) {
 
 ReactDOM.render(
   <div>
-    <Select defaultValue="lucy" style={{ width: 120 }} onChange={handleChange}>
+    <Select defaultValue="lucy" style={{ width: 120 }} onChange={handleChange} open>
       <Option value="jack">Jack</Option>
       <Option value="lucy">Lucy</Option>
       <Option value="disabled" disabled>Disabled</Option>
       <Option value="Yiminghe">yiminghe</Option>
     </Select>
-    <Select defaultValue="lucy" style={{ width: 120 }} disabled>
+    <Select defaultValue="lucy" style={{ width: 120 }} onDropdownVisibleChange={open => console.log(open)}>
       <Option value="lucy">Lucy</Option>
     </Select>
   </div>,

components/select/index.en-US.md

@@ -57,6 +57,8 @@ Select component to select value from options.
 | onPopupScroll | Called when dropdown scrolls | function | - |
 | onSearch | Callback function that is fired when input changed. | function(value: string) |  |
 | onSelect | Called when a option is selected, the params are option's value (or key) and option instance. | function(value, option:Option) | - |
+| open | controlled open state of dropdown | boolean | - |
+| onDropdownVisibleChange | call when dropdown open | function(open) | - |
 
 ### Select Methods
 

components/select/index.tsx

@@ -30,6 +30,8 @@ export interface AbstractSelectProps {
   getPopupContainer?: (triggerNode: Element) => HTMLElement;
   filterOption?: boolean | ((inputValue: string, option: React.ReactElement<OptionProps>) => any);
   id?: string;
+  open?: boolean;
+  onDropdownVisibleChange?: (open: boolean) => void;
 }
 
 export interface LabeledValue {

components/select/index.zh-CN.md

@@ -58,6 +58,8 @@ title: Select
 | onPopupScroll | 下拉列表滚动时的回调 | function | - |
 | onSearch | 文本框值变化时回调 | function(value: string) |  |
 | onSelect | 被选中时调用，参数为选中项的 value (或 key) 值 | function(value, option:Option) | - |
+| open | 是否展开下拉菜单 | boolean | - |
+| onDropdownVisibleChange | 展开下拉菜单的回调 | function(open) | - |
 
 > 注意，如果发现下拉菜单跟随页面滚动，或者需要在其他弹层中触发 Select，请尝试使用 `getPopupContainer={triggerNode => triggerNode.parentNode}` 将下拉弹层渲染节点固定在触发器的父元素中。
 

package.json

@@ -71,7 +71,7 @@
     "rc-pagination": "~1.17.0",
     "rc-progress": "~2.2.2",
     "rc-rate": "~2.4.0",
-    "rc-select": "~8.2.0",
+    "rc-select": "~8.2.3",
     "rc-slider": "~8.6.0",
     "rc-steps": "~3.2.1",
     "rc-switch": "~1.7.0",