Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
gdunit opened this issue Jan 9, 2022 · 5 comments
Labels
GitHub help wanted Extra attention is needed

Comments

@gdunit
Copy link

gdunit commented Jan 9, 2022

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
Copy link

Ref: INT-2736

@jscasca
Copy link
Contributor

jscasca commented Jan 10, 2022

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

@jscasca jscasca added the help wanted Extra attention is needed label Jan 12, 2022
@jcbohlin
Copy link

jcbohlin commented Apr 7, 2022

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
Copy link

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
GitHub help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests

5 participants