{"action":"opened","issue":{"url":"https://api.github.com/repos/ant-design/ant-design/issues/4815","repository_url":"https://api.github.com/repos/ant-design/ant-design","labels_url":"https://api.github.com/repos/ant-design/ant-design/issues/4815/labels{/name}","comments_url":"https://api.github.com/repos/ant-design/ant-design/issues/4815/comments","events_url":"https://api.github.com/repos/ant-design/ant-design/issues/4815/events","html_url":"https://github.com/ant-design/ant-design/issues/4815","id":206429966,"number":4815,"title":"table组件的filterDropdown与日期组件RangePicker一起用的时候有BUG","user":{"login":"encorehe","id":6395357,"avatar_url":"https://avatars.githubusercontent.com/u/6395357?v=3","gravatar_id":"","url":"https://api.github.com/users/encorehe","html_url":"https://github.com/encorehe","followers_url":"https://api.github.com/users/encorehe/followers","following_url":"https://api.github.com/users/encorehe/following{/other_user}","gists_url":"https://api.github.com/users/encorehe/gists{/gist_id}","starred_url":"https://api.github.com/users/encorehe/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/encorehe/subscriptions","organizations_url":"https://api.github.com/users/encorehe/orgs","repos_url":"https://api.github.com/users/encorehe/repos","events_url":"https://api.github.com/users/encorehe/events{/privacy}","received_events_url":"https://api.github.com/users/encorehe/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2017-02-09T07:52:01Z","updated_at":"2017-02-09T07:52:01Z","closed_at":null,"body":"<!-- Issue Template -->\r\n\r\n<!--\r\nantd 的用法咨询，建议通过以下渠道，官方 issues 目前没有足够精力提供此类咨询服务：\r\n\r\n1. [Stack Overflow](http://stackoverflow.com/questions/tagged/antd)\r\n2. [Segment Fault](https://segmentfault.com/t/antd)（中文）\r\n\r\n如果是报告 bug，请按照下列格式书写，并务必提供复现步骤，否则恕难解决，感谢您的支持。\r\n-->\r\n\r\n#### Environment(required)\r\n\r\n表格组件的列使用了filterDropdown 这个filterDropdown包含了一个RangePicker日期组件，默认点击选择日期是好的，但是在选择年份的时候日期组件跑到页面左上角去了，查看Elements，发现页面上多了一个日期组件并且它的位置是left:0;top:0;望解答 谢谢\r\n\r\n//date组件\r\nimport { DatePicker } from 'antd';\r\nimport moment from 'moment';\r\nconst { MonthPicker, RangePicker } = DatePicker;\r\n\r\nconst dateFormat = 'YYYY/MM/DD';\r\nconst monthFormat = 'YYYY/MM';\r\n\r\nconst Date = () => {\r\n  return(\r\n    <div>\r\n      <RangePicker\r\n        defaultValue={[moment('2015/01/01', dateFormat), moment('2015/01/01', dateFormat)]}\r\n        format={dateFormat}\r\n      />\r\n    </div>\r\n  )\r\n}\r\n\r\n//表格组件\r\nimport { Table, Input, Button } from 'antd';\r\n\r\nconst data = [{\r\n  key: '1',\r\n  name: 'John Brown',\r\n  age: 32,\r\n  address: 'New York No. 1 Lake Park',\r\n}, {\r\n  key: '2',\r\n  name: 'Jim Green',\r\n  age: 42,\r\n  address: 'London No. 1 Lake Park',\r\n}, {\r\n  key: '3',\r\n  name: 'Joe Black',\r\n  age: 32,\r\n  address: 'Sidney No. 1 Lake Park',\r\n}, {\r\n  key: '4',\r\n  name: 'Jim Red',\r\n  age: 32,\r\n  address: 'London No. 2 Lake Park',\r\n}];\r\n\r\nconst App = React.createClass({\r\n  getInitialState() {\r\n    return {\r\n      filterDropdownVisible: false,\r\n      data,\r\n      searchText: '',\r\n    };\r\n  },\r\n  onInputChange(e) {\r\n    this.setState({ searchText: e.target.value });\r\n  },\r\n  onSearch() {\r\n    const { searchText } = this.state;\r\n    const reg = new RegExp(searchText, 'gi');\r\n    this.setState({\r\n      filterDropdownVisible: false,\r\n      data: data.map((record) => {\r\n        const match = record.name.match(reg);\r\n        if (!match) {\r\n          return null;\r\n        }\r\n        return {\r\n          ...record,\r\n          name: (\r\n            <span>\r\n              {record.name.split(reg).map((text, i) => (\r\n                i > 0 ? [<span className=\"highlight\">{match[0]}</span>, text] : text\r\n              ))}\r\n            </span>\r\n          ),\r\n        };\r\n      }).filter(record => !!record),\r\n    });\r\n  },\r\n  render() {\r\n    const columns = [{\r\n      title: 'Name',\r\n      dataIndex: 'name',\r\n      key: 'name',\r\n      filterDropdown: (\r\n        <div className=\"custom-filter-dropdown\">\r\n         <Date/>\r\n          <Button type=\"primary\" onClick={this.onSearch}>Search</Button>\r\n        </div>\r\n      ),\r\n      filterDropdownVisible: this.state.filterDropdownVisible,\r\n      onFilterDropdownVisibleChange: visible => this.setState({ filterDropdownVisible: visible }),\r\n    }, {\r\n      title: 'Age',\r\n      dataIndex: 'age',\r\n      key: 'age',\r\n    }, {\r\n      title: 'Address',\r\n      dataIndex: 'address',\r\n      key: 'address',\r\n    }];\r\n    return <Table columns={columns} dataSource={this.state.data} />;\r\n  },\r\n});\r\nReactDOM.render(<App />, mountNode);\r\n\r\n\r\n\r\n- antd version:\r\n- OS and its version:\r\n- Browser and its version:\r\n\r\n#### What did you do? Please provide steps to re-produce your problem.\r\n\r\n<!-- e.g. I just imported Button from antd -->\r\n\r\n#### What do you expected?\r\n\r\n<!-- e.g. It works fine as official website -->\r\n\r\n#### What happen?\r\n\r\n<!-- e.g. Style is not as expected. (And it will be better to provide screenshot) -->\r\n\r\n#### Re-producible online demo\r\n\r\n<!-- Please fork http://codepen.io/benjycui/pen/KgPZrE?editors=001 to re-produce you issue -->\r\n"}}
{"actor":{"display_login":"encorehe"}}