Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

Blazor JSinterop invokeMethodAsync on blur event is affecting js component behavior

$
0
0

I've modified a blazor-js component based on QuillJs to enable two-way binding from the text editor to blazor/c# property

I've done this by adding a 'blur' event listener and invoking a method c# method from js:

(All source code here)https://github.com/gismofx/TextEditor/blob/3ea6d0705a443d8ea81bdcce46814ef2261e1e26/src/Blazored.TextEditor/wwwroot/Blazored-BlazorQuill.js#L40

//On Blur - we update the object in dotnet            quillElement.__quill.editor.scroll.domNode.addEventListener('blur',                () => {                    if (quillElement.__quill.options.debug === "info") {                        console.log('info: Quill Editor blur event for '+ quillElement.id);                    }                    QuillFunctions.dotNetRefs.get(quillElement.id).invokeMethodAsync('DeltaChanged', QuillFunctions.getQuillContent(quillElement));                }            );

The two-way binding works just fine.

Issue:When interacting with quill's toolbar, e.g. to change some highligted text's format, the cursor jumps to start of text and formatting it not applied. If you repeat, it applied the fomatting. This happens every time.

See recording of strange behavior:strange behavior

If I remove the invokeMethodAsync call, it restores correct functionality and formatting is applied correctly.

Is there different event to use or another way to keep binding and not affect the quill functionality?


Viewing all articles
Browse latest Browse all 4839

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>