vue-form-json-schema icon indicating copy to clipboard operation
vue-form-json-schema copied to clipboard

Published 20 hours ago • verified publisher icon jarvelov

Element UI Input Behavior

Open aaryadewa opened this issue 4 years ago • 6 comments

I am using Element UI components in this example.

Everytime I typing in the input component (el-input), the cursor is always jump to the end of the character. How to prevent this behavior? ~~Can I~~ How to correctly use Element UI components with this great library? Thank you

aaryadewa avatar Jun 17 '20 02:06 aaryadewa

Hi, thanks for reporting this issue.

I see the problem and I am not sure what causes it. It kind of looks like they're setting the value of the input element every time the prop value changes, but I'm not sure where the problem lies. I'll have to read the source code for the el-input component and see what causes this behavior.

I'll get back to you as soon as I've found what causes the issue.

jarvelov avatar Jun 17 '20 20:06 jarvelov

Many thanks for your quick response and to following up this issue, @jarvelov.

aaryadewa avatar Jun 18 '20 01:06 aaryadewa

Did you find the cause / solution for this?

keybrdist avatar Oct 31 '20 18:10 keybrdist

Hi @aaryadewa and @keybrdist

I did actually finally track down what caused this issue today. I have a partial fix released in v2.9.1. However, I can't get codesandbox to upgrade to the new version though so I can't provide a demo link right now. I will edit this comment tomorrow and include a fork of this example with VFJS upgraded to v2.9.1 where I demonstrate the partial fix.

It will take a bit more work to provide a complete solution, but I'm feeling confident it is within reach.

jarvelov avatar Nov 03 '20 00:11 jarvelov

Just an update. I haven't found a proper solution yet but I am still trying to find a way to get the el-input component play nice with VFJS.

jarvelov avatar Nov 06 '20 22:11 jarvelov

Thanks for your time on this!

For now I implemented a work around by changing the input type to just a regular html input inside a div with class name "el-input", "el-textarea", etc.. as well as class names "el-input__inner", "el-textarea__inner", etc.. applied to the actual input element. This effectively works exactly the way it should as far as I can tell. I also used "blur" as my "on" listeners, however that may only have been necessary for my own needs.

keybrdist avatar Nov 20 '20 03:11 keybrdist