Skip to content

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

@gdunit

Description

@gdunit

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";
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions