tinymce / tinymce-blazor

Blazor integration
MIT License
45 stars 13 forks source link

Editor writes content backwards when enclosed within Blazorise Validations component #33

Open gdunit opened 2 years ago

gdunit commented 2 years ago

Hi, I have run into a very strange issue when using the component inside Blazorise. Steps to repro (also see repro link here - https://github.com/gdunit/TinyMceBackwardsRepro)

  1. Create Blazorise Form then Validations components
  2. Embed the editor within the Validations (this is required in my solution due to structure of components)
  3. Editor is configured to use bind-Value and Field properties
  4. When the editor is focused, any keypress results in the cursor being returned to the start of the editor and therefore text appears 'backwards' when typed. I strongly suspect this is because of the editor being refocused on each keypress due to something that is triggered by the validation checking.
<Form>
    <Validations Model="@this" ValidateOnLoad="false">
        @*This TextEdit just here to demonstrate relationship to other components in form*@
        <Validation>
            <Field>
                <TextEdit @bind-Text="SingleLineText">
                    <Feedback>
                        <ValidationError/>
                    </Feedback>
                </TextEdit>
            </Field>
        </Validation>
        <Editor Field="@(() => TinyMceRichText)" @bind-Value="TinyMceRichText"></Editor>
    </Validations>
</Form>

@code{

    [Required]
    public string? SingleLineText { get; set; }
    public string? TinyMceRichText { get; set; } = "Hello";
}
exalate-issue-sync[bot] commented 2 years ago

Ref: INT-2736

jscasca commented 2 years ago

So this only happens when the validations component has a Model or an EditContext. I'm not sure how blazorise works this out but it would take deep dive into the code to figure out what's happening here.

I'm not sure the editor is being refocused, but it might be re-rendering that bit after the validation occurs. Why this only happens with a Model/EditContext is beyond me. Any help from a blazorise expert is welcome

jcbohlin commented 2 years ago

I see the same issue when using the Editor in a column using the RadzenDataGrid control. The editor works correctly in version 0.0.8, but breaks in 0.0.9 and later. Repro project is available here - https://github.com/jcbohlin/TinyMceBackwardsRadzenDatagridRepro

deyanslavov commented 11 months ago

Happens to me as well when the Editor component is insde a Form with EditContext. Any possibility this would be fixed at some point?

lorenzo-pomili commented 11 months ago

have you tried adding bind-value:event for example: @bind-Value="TinyMceRichText" @bind-Value:event="oninput"?, that seems to work for me