Why ckeditor lose focus on any char entered in Laravel 8 / livewire 2 app?

Question

In Laravel 8 / livewire 2 app I added ckeditor and it works, with livewire data updating with jkavascript, but problem is that when I enter 1 char in ckeditor area, it lose focus next next entered symbolsa are lost. I do :

            <div wire:ignore class="p-2 w-full">

                <textarea
                    wire:model.lazy="form.content"
                    class="form-control"
                    id="content_textarea"></textarea>
                <x-jet-input-error for="form.content" class="mt-2"/>
            </div>

...

                ClassicEditor
                    .create( document.querySelector( '#content_textarea' ), {
                        extraPlugins: [ SimpleUploadAdapterPlugin ],
                        // ...
                    } )

                    .then(editor => {
                        editor.model.document.on('change:data', () => {
                             console.log('change:data editor.getData()::')
                             console.log(editor.getData())
                        @this.set('form.content', editor.getData() )
                        })
                    })

                    .catch( error => {
                        console.error( error );
                    } );

I use lazy for all inputs on this form and they work ok - in browsers console I see fetching messages only when user leaves the input. In change:data event above I see that event is triggered and I supposed this break lazy mode, but I do not know how that can be fixed?

Thanks!

Answer 1

I found decision with using change:isFocused event :

CKEditorInit: function () {
    ClassicEditor
        .create( document.querySelector( '#content_textarea' ), {
            extraPlugins: [ SimpleUploadAdapterPlugin ],
        } )

        .then(editor => {
            editor.ui.focusTracker.on( 'change:isFocused', ( evt, name, isFocused ) => {
                if ( !isFocused ) {
                    const doc = document.getElementById('news_admin_page_container');
                    var wireIds = window.livewire.find(doc.getAttribute("wire:id"))
                    wireIds.set('form.content', editor.getData())
                }
            } );  // 'change:isFocused'