search

CroudTech / vue-quill

Quill component for vue
MIT License
121 stars 22 forks source link

output="html" causes unintentional focus #22

Open staghouse opened 6 years ago

staghouse commented 6 years ago

I have a Vue file that iterates over a JSON object and generates a form based on the data (it is nested and has siblings) - the end effect is I have multiple inputs and some use the Quill editor in place of a textarea.

When applying :content="value" (value being my iterated value from my key:value pair) I need to also add output="html" in order to show the value (the value is HTML). The problem is when doing so I am it seems when the Quill editor is rendered it is also getting a focused on. This might seem a bit trivial but I have rather large forms and if after render the last editor is focused on that means the user ends up at the bottom of the page instead of at the top where they started. Additionally some of the form content is hidden and when the focus is trigger is causes a weird positioning in the visible area.

Ultimately I don't see a reason why the Quill editor should get focused on automatically as this type of behavior is not inherent in standard input types.

BrockReece commented 6 years ago

Hi @ericlakatos

Thanks for bringing this up. I will look into it.

BrockReece commented 6 years ago

I have double checked the code and built a sandbox but I can't seem to replicate your issue?

https://codesandbox.io/s/qqr13100y4

Could you have a look at that and tell me if I am missing something?

BrockReece commented 6 years ago

Ah sorry, I think I figured it out. When mounting a HTML editor, it used the deprecated pasteHtml method which was stealing focus.

I have changed this to set the raw html of the editor instead and published a new pre-release version (v1.5.0-0) for you to try out. I have updated the above sandbox to use this pre-release if you want to test in isolation.

staghouse commented 6 years ago

Confirming change is working - I used the pre-release on my local because of the complexity of my specific iteration of the issue.

Thanks!

staghouse commented 6 years ago

This update may have made another bug - the cursor can not be set on any particular character, the focus will always resort to the END of the text. This is happening in both my local and in your above sandbox.

BrockReece commented 6 years ago

I don't have that issue in my sandbox. What browser are you using?

I will be travelling for the rest of today, but I will have another look at this later.

staghouse commented 6 years ago

Ah, seems to be happening on Firefox specifically.

BrockReece commented 6 years ago

Oh ok, I will need to think about this then.

dappiu commented 4 years ago

@BrockReece maybe this https://github.com/surmon-china/vue-quill-editor/pull/263 may point you in the right direction? They also discussing the same issue in the React wrapper https://github.com/zenoamaro/react-quill/issues/317