Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix SSR receiving value update cause other inputs to lose focus #247

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

amoshydra
Copy link

@amoshydra amoshydra commented Jul 11, 2018

Change

This PR will check if there is a range selected in quill and call it only when necessary.

Expected behaviour

Updating value of the editor should not blur other input fields

Current behaviour

When the SSR version of vue-quill-editor receive an updated value it will attempt to restore the selection within the text field.

if (newData) {
  if (newData != oldData) {
    const range = quill.getSelection()
    quill.root.innerHTML = newData
    setTimeout(() => {
      quill.setSelection(range)
    })
  }

https://github.com/surmon-china/vue-quill-editor/blob/02c1741/src/ssr.js#L134-L141

However, quill.setSelection(range) is called even when vue-quill-editor is not focused. This usually cause the variable range to be null. Thus, setSelection(null) will cause quill to clear all selection instead (edit: Including all inputs fields within the page) See: https://github.com/quilljs/quill/blob/16d4130a75d7bc2bfb7315694e69d1e08f764641/core/selection.js#L339

Example: https://codepen.io/amoshydra/pen/ZjYbRa

  • Initially the example input field has focus and has text selected
  • Afterquill.setSelection(null) is called the input field lose selection and lose focus

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant