下拉选择组件从内部组件到 ant-design 不得不说的三个故事

前言
昨天接到了第一个需求吧，目标就是一句话：把 @mtfe/react-dropdown 组件替换为 antd 的Select组件

用图来说就是从

到

分解一下工作点
表现当长度过长时，不会出现滚动条，而是向左或向右扩展
正常的过滤以及选择功能

具体实现：
要求 组件自由配置输入框与下拉框宽度样式 灵活配置下拉框相对位置
输入字符过滤，键盘上下键和回车可以在下拉框中控制选择内容

明确之后就可以具体开工了

步骤
一：熟悉旧代码
事情也比较简单，暂时需求只是替换页面一个组件，所以大致浏览一下页面代码，主要集中注意力到旧组件的逻辑
当然可能这里更难的是进行咱们美团内部 git 初始化，总之 clone 下仓库之后还是比较顺利的

二：熟悉ant-design
以前用过一些ant-design，所以简单熟悉一下各种 API，Select 中文文档还是说的比较直观的，说实话各种语法糖还是比较多的，这也是 ant 除了外观设计不错之外值得称道的点，不过过度设计和功能简洁实用之间度其实才是最难的点吧，虽然个人不太懂，但据说 ant 还是比较吊的，另外最近好像开始 SSE conf 报名了，感觉大神云集，想去看看啊，咳咳跑题了，总之设计要在 易用强大和过度设计之间取舍还是比较难的，希望自己有机会可以学习一下。

当阅读文档时还是比较顺利的，第二条（正常的过滤以及选择功能）ant 原生提供，所以这就完全不必费心，不得不再赞一个，功能确实比较强大，整体设计也简单、人性化

至于第一条，好像也可以很简单的解决了，直接用第二三个属性配置一下就就好了。ok，文章结束了

显然这个题目表示这篇文章尚未结束，第三个属性坑爹的失效了。

三：有一点问题

antd 的 dropdown 组件是相对页面绝对定位，并且是 JS 动态设置位