Existing tag bindings are removed when phx live view updates the ui on form validation using phx_change: :validate

phoenix
liveview
#1

I’m using Phoenix live view on an edit form template with some textarea fields using ckeditor.
So When the application loads everything seems fine.
But when I start typing on any input field, The ckeditor fields loose the editor bindings. and fields are gone, with just labels left.

So Is there any event that I can bind to when phx live view updates the view. So that I can rebind all the fields with ckeditor again.

#2

I’m not sure what ckeditor is but if it follows the HTML5 custom components spec then it should work without really any issue (unless the DOM shuffles around too much that it ends up recreating). If it’s just loose javascript that binds to an ID or something that I would entirely expect that to have issues. Which style does it do?

#3

Hi Sorry for late reply, I have been travelling, even as I write this.

So the ckeditor(WYSIWYG editor) is binded to the input via a class names like class="ckeditor-input".
And the form I’m using is a phoenix live view form, validated using phx_change.

So when I start to type, phx_validate starts to validate the form by updating the form on each change. Which results in CKeditor binding to be removed. So I need to figure out how to rebind again on form validations.

#4

What is happening is probably this:

  1. There is an input or textarea tag on the page
  2. This wysiwig editor registers an event listener on that specific tag
  3. you type something
  4. liveview triggers on the change event and replaces the input tag with an identically looking new input tag, but the event listener registered in step 2 is not registered on that new tag and was probably garbage collected when the old tag disappeared.

You could look into ckeditor, whether you can specify what element it registers its event listeners on (some events propagate, so it might be able to listen on a containing element). I doubt that you can fix this on the liveview side of things.

You might be lucky to use methods on this page to re-init the editor. I have not tried it, but inline() or replace() might do it.

2 Likes
#5

In future live view versions we will allow you to say some areas should not be replaced/touched by LiveView, but this feature is not there currently.

3 Likes
Is it possible to mark certain parts of a template so that it is not updated by LiveView?
#6

Thanks, I could think of creating alias input element out of form scope that can handle ckeditor changes and update the main element on blur for now. Will try that.

1 Like