📝 Add instruction for dropdownRender

ant-design · Sep 24, 2019 · 2de1a15 · 2de1a15 · afc163 · Sep 24, 2019
1 parent c9a30ef
commit 2de1a15
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 21 deletions.
diff --git a/components/select/demo/custom-dropdown-menu.md b/components/select/demo/custom-dropdown-menu.md
@@ -7,34 +7,59 @@ title:
 
 ## zh-CN
 
-使用 `dropdownRender` 对下拉菜单进行自由扩展。
+使用 `dropdownRender` 对下拉菜单进行自由扩展。自定义内容点击时会关闭浮层，如果不喜欢关闭，可以添加 `onMouseDown={e => e.preventDefault()}` 进行阻止（更多详情见 [#13448](https://github.com/ant-design/ant-design/issues/13448)）。
 
 ## en-US
 
-Customize the dropdown menu via `dropdownRender`.
+Customize the dropdown menu via `dropdownRender`. The selection will be closed if click `dropdownRender` area, you can prevent it by wrapping `onMouseDown={e => e.preventDefault()}` (see more at [#13448](https://github.com/ant-design/ant-design/issues/13448)).
 
 ```jsx
 import { Select, Icon, Divider } from 'antd';
 
 const { Option } = Select;
 
-ReactDOM.render(
-  <Select
-    defaultValue="lucy"
-    style={{ width: 120 }}
-    dropdownRender={menu => (
-      <div>
-        {menu}
-        <Divider style={{ margin: '4px 0' }} />
-        <div style={{ padding: '8px', cursor: 'pointer' }}>
-          <Icon type="plus" /> Add item
-        </div>
-      </div>
-    )}
-  >
-    <Option value="jack">Jack</Option>
-    <Option value="lucy">Lucy</Option>
-  </Select>,
-  mountNode,
-);
+let index = 0;
+
+class App extends React.Component {
+  state = {
+    items: ['jack', 'lucy'],
+  };
+
+  addItem = () => {
+    console.log('addItem');
+    const { items } = this.state;
+    this.setState({
+      items: [...items, `New item ${index++}`],
+    });
+  };
+
+  render() {
+    const { items } = this.state;
+    return (
+      <Select
+        style={{ width: 240 }}
+        placeholder="custom dropdown render"
+        dropdownRender={menu => (
+          <div>
+            {menu}
+            <Divider style={{ margin: '4px 0' }} />
+            <div
+              style={{ padding: '4px 8px', cursor: 'pointer' }}
+              onMouseDown={e => e.preventDefault()}
+              onClick={this.addItem}
+            >
+              <Icon type="plus" /> Add item
+            </div>
+          </div>
+        )}
+      >
+        {items.map(item => (
+          <Option key={item}>{item}</Option>
+        ))}
+      </Select>
+    );
+  }
+}
+
+ReactDOM.render(<App />, mountNode);
 ```
diff --git a/components/select/index.en-US.md b/components/select/index.en-US.md
@@ -94,3 +94,9 @@ Select component to select value from options.
 | -------- | ----------- | --------------------- | ------- | ------- |
 | key      |             | string                | -       |         |
 | label    | Group label | string\|React.Element | -       |         |
+
+## FAQ
+
+### The dropdown is closed when click `dropdownRender` area?
+
+See the [dropdownRender example](/components/select/#components-select-demo-custom-dropdown-menu).
diff --git a/components/select/index.zh-CN.md b/components/select/index.zh-CN.md
@@ -97,3 +97,9 @@ title: Select
 | ----- | ---- | --------------------- | ------ | ---- |
 | key   |      | string                | -      |      |
 | label | 组名 | string\|React.Element | 无     |      |
+
+## FAQ
+
+### 点击 `dropdownRender` 里的内容浮层关闭怎么办？
+
+看下 [dropdownRender 例子](/components/select-cn/#components-select-demo-custom-dropdown-menu) 里的说明。