Progress® Telerik® UI for Blazor Feedback Portal
Back to Feed
Request a Feature Report a Bug
Unplanned
Last Updated: 07 Dec 2021 16:22 by ADMIN
Patrik Madliak
Created on: 07 Dec 2021 16:16
Category: Editor
Type: Bug Report
4
Disabled or ReadOnly Editor is still focusable and editable

When the Editor is disabled, the user can still focus it by tabbing and edit the content. The issue occurs in both Div and Iframe EditMode.

Click on the textbox and press TAB:

<input type="text" tabindex="0" />

<TelerikEditor Enabled="false"
			  EditMode="@EditorEditMode.Div"
			  Height="200px" />

1 comment
ADMIN
Dimo
Posted on: 07 Dec 2021 16:22

Hi Patrik,

Thanks, this is a real gotcha and the Editor should not allow it.

I experimented with the component to find a workaround. It seems the only way to avoid editing is to replace the disabled Editor with a <div> that displays the Editor value:

<label> <TelerikCheckBox @bind-Value="@EditorEnabled" /> Enable Editor </label>

@if (EditorEnabled)
{
    <TelerikEditor Enabled="@EditorEnabled"
                   EditMode="@EditorEditMode.Div"
                   @bind-Value="@EditorValue"
                   Height="@EditorHeight">
    </TelerikEditor>
}
else
{
<div style="height:@EditorHeight" class="k-editor k-state-disabled">
    <div class="k-editor-content">
        @((MarkupString)EditorValue)
    </div>
</div>
}

@code {
    string EditorValue { get; set; } = "<p>foo bar baz</p>";
    bool EditorEnabled { get; set; } = false;
    string EditorHeight { get; set; } = "160px";
}

Regards,
Dimo
Progress Telerik

Learn about the important changes coming in UI for Blazor 3.0 in January 2022!
Create an account Log In
View
Type
Status
Category