When [Bug Report] readony and clearable exist at the same time, the content can be emptied.

[viewweiwu]

Element UI version

2.4.3

OS/Browsers version

chrome67 / win10

Vue version

2.5.17-beta.0

Reproduction Link

https://jsfiddle.net/ubtc8453/1/

Steps to reproduce

点击 input 后面的 x，内容会被清空

What is Expected?

不清空内容

What is actually happening?

内容会被清空

[element-bot]

Translation of this issue:

Element UI version
2.4.3

OS/Browsers version
Chrome67 / win10

Vue version
2.5.17-beta.0

Reproduction Link
https://jsfiddle.net/ubtc8453/1/

Steps to reproduce
Click on the X behind input, and the content will be emptied

What is Expected?
Non emptying content

What is actually happening?
The content will be emptied

[ziyoung]

@viewweiwu 其实，我觉得这并不算是一个 bug。设置 readonly 属性后，用户无法修改 input 的 value。但是通过 js 依然可以修改 value，而点击清除按钮是通过 js 的方式修改 value。

[ziyoung]

@viewweiwu 当 readonly 为 true 时，就不再显示后面的清除按钮。https://jsfiddle.net/zhiyang/ubtc8453/5/

[viewweiwu]

@ziyoung 我觉得可以做成如果是 readonly 时，不显示 clearable 按钮

[ziyoung]

我觉得还是交给用户来控制吧，也许更灵活一点。@jikkai 怎么看？

[jikkai]

我个人倾向 readonly 时即使设置了 clearable 也不应该显示清除按钮，这个灵活性对用户来说好像没什么意义
找到个历史 issue #10997 ，我觉得这应该算是个 bug……

[ghost]

@jikkai
我觉得我遇到了像 @ziyoung 说的"灵活一点的"应用场景：
需求要求 el-input 的值只能来自于点击弹出的 dialog 选择的返回结果，这种情况下，

1. 我们是需要控制 el-input 不能输入的，即设置 readonly 属性
2. 同时，我也是需要 clearable 来清空 el-input 的 value 的
   不知道是否有其他方式实现我的这种需求？

[ghost]

@jikkai
我觉得我遇到了像 @ziyoung 说的"灵活一点的"应用场景：
需求要求 el-input 的值只能来自于点击弹出的 dialog 选择的返回结果，这种情况下，

1. 我们是需要控制 el-input 不能输入的，即设置 readonly 属性
2. 同时，我也是需要 clearable 来清空 el-input 的 value 的
   不知道是否有其他方式实现我的这种需求？

我使用如下方案解决了这个问题：e-input 的 focus 事件直接调用 blur 方法，以代替实现 readonly 的功能。不知道有没有其他问题。