input清除按钮点击无效

发现问题

环境：android、wechat

在android的微信浏览器中，存在一个bug：input的光标和清除按钮重叠，导致点击清除按钮无效。

具体表现为：

示意图.png

input 长度是不定的，当输入框获取焦点时，清除图标显示，此时输入框长度变短。

复现步骤：

1. 输入很长的一段文字，超过输入框的显示区域
2. 点击输入框外的任意区域，使输入框失去焦点。
3. 点击输入框显示区域的最右侧边界，然后点击清除按钮，会发现不起作用。

错误代码可参看 错误案例

请注意需要在android的微信中打开，才会复现。

error.gif

额外说明

vux、Ant design mobile 的input组件都是上述方式，也存在此问题。

思考原因

pc、ios、以及android的普通浏览器环境均正常，很明显是微信android端的兼容性问题了。

分析是因为，点击输入框显示区域的最右侧，输入框长度变短后，光标的位置和清除按钮的位置重叠了，这导致点击清除按钮被穿透，实际点击的可能还是光标，或者input的未显示区域。

解决方案

给清除按钮预留出空间，避免输入框和清除按钮重叠。

参考elementUI的实现方式的源码可查看正常案例

correct.gif

截图软件

LICEcap