Quill.js focus issue in a Phoenix project

Phoenix Forum Questions / Help
,
1

I’m not sure if this belongs here or if I need to ask in some quill.js forum. I’m posting it here in the hope that somebody has a simple answer for this.

I have tried to integrate quill.js into a Phoenix project. I used this blog post as a starting point, although I’m not allowing image embedding, so I left all that out.

Almost everything seems to work, just one little thing that is not working. If I edit and then, without interacting with any of the other form fields, I click on the Quill component and type a letter, say ‘d’, a ‘d’ is printed inside the Quill component. HOWEVER, the first form element (title) is also cleared.

I’m guessing this is some confusion about the focus, since the Quill component is not a “real” HTML input field. As long as I have focused another form field and interacted with it in some way (typing a character, selection an item in a dropdown, etc), the form behaves properly.

2

Could be not saving the params in the form’s change event or not merging the params in the hook’s pushed event.

Hard to know without seeing the code.

3

I don’t have a problem sharing code, if only I know what code to share.

However, I probable messed up the explanation. The problem has nothing to do with saving. Let me try to break it down a little bit better. The first scenario is NOT a problem.

Let’s say I have a blog most with 3 fields: a title, a “body” and a category, which is a select. The following works fine:

  1. I click to edit an existing post
  2. I change a character in the title or a click on the category dropdown
  3. I click on the body (the Quill component) and type some text
  4. the title does not change

Now, here is the problematic scenario:

  1. I click to edit an existing post
  2. I immediately click on the body entry (the Quill.js component) without interacting with any of the other fields
  3. I type a letter, let’s say ‘w’
  4. the letter ‘w’ is added to the body. At the same time, the title (the first field) is as in the input no longer holds any text.
  5. I have to retype the title before trying to save

I’m really bad at explaining things. If you could let me know what code to share, as in function(s), I’ll post them up here.

I don’t understand enough about the browser to know how it inserts the Quill.js component into the focus order, since it is not an actual widget (or HTML form element). I’m just guessing here but I think it gets confused about which form element has the input focus if I don’t interact with one of the other elements (that is something that is an <input> or a <textarea> before I interact with the Quill.js component.

But if that were true, why is that the WYSIWYG editor does receive the keystroke AND the title <input> also seems to receive it? That is what I don’t seem to be able to wrap my head around.

4

It doesn’t sound like a focus issue. Is the focus moving from the quill editor to another input? As in, you can only type one character into the quill before focus moves to another input?

If the title is cleared and doesn’t change to “w”, why do you think the title input is receiving the keystrokes? Sounds more like you’re wiping the title out on the backend, but that’s just a guess.

Show the handle_event functions.

Put some dbg statements into those functions so you can see the params you’re passing to to_form.