[Bug Report] [Component] [input] input加了clearable属性后输入内容宽度会发生变化！失去焦点恢复原始宽度，获取焦点又会宽度改变

[lait233]

Bug Type: Component

Environment

• Vue Version: 3.2.37
• Element Plus Version: 2.2.6
• Browser / OS: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.75 Safari/537.36
• Build Tool: CDN

Reproduction

Related Component

• el-input

Reproduction Link

Element Plus Playground

Steps to reproduce

点击复现连接即可看到
在中文名称input输入内容然后失去焦点。然后在获取焦点就会变形

What is Expected?

input宽度不变形

What is actually happening?

input加了clearable属性就会变形

Additional comments

(empty)

[tolking]

It is recommended to set a min-width or width for the Input component.

reference #7287

[skychf]

是有这样的问题，体验不是很好， 建议宽度不要改变！（设置宽度也是不行的）

[tuutoo]

今天我也发现了这问题. 原因是我的文本并不是左对齐, 而是居中对齐的. 然后你会发现鼠标移入和移出的时候, 文本就在那左右跳.
建议只要是输入框有文本的时候, 就一直显示这个删除按钮. 不要在Hover的时候来回显示的...不需要这样.

可以参考AntD vue和Vuetify的输入框, 都是这样的.

https://antdv.com/components/input-cn#components-input-demo-allow-clear
https://vuetifyjs.com/zh-Hans/components/text-fields/#section-53ef6e059664

[chenxch]

今天我也发现了这问题. 原因是我的文本并不是左对齐, 而是居中对齐的. 然后你会发现鼠标移入和移出的时候, 文本就在那左右跳. 建议只要是输入框有文本的时候, 就一直显示这个删除按钮. 不要在Hover的时候来回显示的...不需要这样.

可以参考AntD vue和Vuetify的输入框, 都是这样的.

https://antdv.com/components/input-cn#components-input-demo-allow-clear https://vuetifyjs.com/zh-Hans/components/text-fields/#section-53ef6e059664

hover这个应该是组件库交互设计上的差异，我认为主要的问题点应该是在目前我们的clearable不是采用flex布局导致的。

[zcf0508]

Same problem.

[HeftyKoo]

Duplicate: #7287

[itum-git]

主要原因是input外部缺少固定宽度的容器，这个问题比较棘手，可能官方也没有好的处理方式，可以使用栅格布局，用<el-row><el-col>包裹<el-form-item>，这样就不用担心宽度的变化