RangePicker 重影问题 和 Safari与Chrome显示不一致问题

[zhenzong]

Environment(required)

• antd version: 2.7.0
• OS and its version: macOS Sierra 10.12.2
• Browser and its version: safari: 10.0.2; chrome: 56.0.2924.87 (64-bit)

RangePicker使用代码

<FormItem label="时间" hasFeedback {...formItemLayout}>
    {
        getFieldDecorator('time', {
            rules: [
                { require: true, type: 'array', message: '请选择时间段'}
            ],
            initialValue: [zhNowAfter7, zhNowAfter14]
        })(
            <RangePicker/>
        )
    }
</FormItem>

1. RangePicker在safari中显示会重影，应该是placeholder没有消除。如下图：
   
   复现步骤：
   a. 正常选择日期，此时不会出现上述情况；
   b. 点击清除按钮，清除掉日期；
   c. 重新选择日期，这时候会出现上述情况。

如果鼠标在hover一下，重影就会消失。官方例子也有这样的情况。如下图：

期望情况：
选择时间后，显示正常。

2. RangePicker同样代码在Safari中显示与Chrome中显示不一样：
   Safari显示：
   
   Chrome显示：
   
   注意途中RangePicker的长度不一样。

官方例子中也有这样的情况
Safari显示：

Chrome显示：

添加css代码可以解决这样的问题：

.ant-calendar-picker {
   width: 100%;
}

[benjycui]

RangePicker在safari中显示会重影，应该是placeholder没有消除。

这个问题没有重现。

RangePicker同样代码在Safari中显示与Chrome中显示不一样

这个不确定是否 by designed，设计稿看不出。。 cc @Chinglik

[zhenzong]

这个问题没有重现

好吧，早上再试了一下确实不行。但是昨晚确实是有的，也截图了。郁闷。总之，谢谢啦！

[afc163]

RangePicker同样代码在Safari中显示与Chrome中显示不一样

这个是因为 input 的默认宽度在不同浏览器下不太一样，chrome 会短一点。如果希望一样长，建议用 style 属性设置宽度。

[xileliu]

@zhenzong 重影问题是怎么解决的！

[zhenzong]

这个，你也遇到了？ 我也母鸡呀，我是莫名其妙遇到了，然后又莫名其妙好了。
当时我感觉应该是选择时间后，组件的焦点有问题，后来又出不来这个问题了。

[xileliu]

我现在就是在safari 上是有的，和你描述的一样；

[zhenzong]

我也母鸡呀，我的现在却是是没有问题，也确实没有改过什么。
建议把代码，复现步骤贴出来，请大大们帮帮忙。 @benjycui

[benjycui]

Please provide a re-producible demo: http://codepen.io/benjycui/pen/KgPZrE?editors=001

麻烦提供必现的 demo 和步骤，不然都是宇宙射线的锅。

[xileliu]

https://ant.design/components/form-cn/ 这个文档用safari打开；

[crazyair]

@benjycui

safari 版本

[crazyair]

@benjycui 你们是没发现这个问题吗？

[benjycui]

...

[crazyair]

[benjycui]

@qq645381995 我不是否认你们碰到的问题，所以麻烦提供必现的例子、步骤等。

[crazyair]

@benjycui 没有例子 和 步骤 就是 官网 或者 http://codepen.io/anon/pen/wGOWGW?editors=001
都是会发生的
不一样的也许是 浏览器版本 或者 mac 区域设置了

[yesmeck]

@benjycui 我这能重现的，看起来像是 safari 的 bug，placeholder 的 dom 节点已经移除了，但是字还在。

[crazyair]

@yesmeck 会解决吗？还是？

[zhenzong]

这个问题找到原因和复现步骤了吗？好好奇是什么问题额。

[zhenzong]

今天我又看到了这个问题的复现。
可以比较稳定的复现方式是： 点击时间控件，然后选择时间，注意，选择的时间宽度上宽一点。确保择完后鼠标不会经过时间控件，也就是说不再触发控件的（hover 还是 mouse leave？）这样的事件。然后就出现这个问题了。多试几次，会出现的这个问题的。

修复方式：
当存在start, end这两个时间值时，则placeholder都设置为空字符串。 我提了pr #7079。 额，因为我不知道为什么设置值后placeholder不消失。

没有修复的问题是（如下图）：
当弹出时间选择框，选择了时间后，也会有类似 #4782 的问题，这个问题应该是存在于antd RangePicker所依赖的react-component库里的calender组件里。

[benjycui]

Relative: https://stackoverflow.com/questions/39624902/new-input-placeholder-behavior-in-safari-10-no-longer-hides-on-change-via-java

[benjycui]

Relative: Matt-Esch/virtual-dom#426 https://jsbin.com/rogoludahu/edit?html,js,output

但我本地的 Safari 无法重现。

[crazyair]

你的 safari 到底什么鬼

[benjycui]

你的 safari 到底什么鬼

可能是因为我的杀毒软件比较厉害，把 bug 都杀了。

对于使用 RangePicker 碰到重影的人，如果你们使用 https://jsbin.com/rogoludahu/edit?html,js,output 也能重现问题，那么只能推测是 Safari 的 bug，事实上，RangePicker 那几个地方的 placeholder 都只是原生 input 的placeholder 而已。

[zhenzong]

我第一次点击也会出现重影，然后再点一下重影消失。

那看起来是Safari的问题。antd能否处理一下这种情况？

[zhenzong]

Safari 版本是 10.1.2 (12603.3.8)

难道是新引入的，，2333333333。。。。

[crazyair]

@zhenzong zhNowAfter7 这个你可以说说你是怎么封装的？

[zhenzong]

没有封装啊，用的moment库
const zhNowAfter7 = moment().locale('zh-cn').utcOffset(8).add(7, 'days');

[crazyair]

好吧 高看你了 你不会

const zhNowAfterDays =(day)=>{
         retunrn moment().locale('zh-cn').utcOffset(8).add(day, 'days');
}

[zhenzong]

@qq645381995 额，需要的话，就自己抽出一个方法。

@benjycui 是不是可以考虑一下兼容一下这种问题呀？不过，antd和react-component里的Calendar都需要改了。

[benjycui]

@benjycui 是不是可以考虑一下兼容一下这种问题呀？不过，antd和react-component里的Calendar都需要改了。

Nope, see: https://discussions.apple.com/thread/7732774?start=0&tstart=0

It is not worth doing so.