Completed
Last Updated: 02 Aug 2023 06:29 by ADMIN
Release 4.4.0 (07/19/2023) (R3 PI1)
Scott
Created on: 07 Sep 2020 16:24
Category: UI for Blazor
Type: Feature Request
60
Allow selecting and copying text from non-editable inputs (read-only mode)

I saw a few other posts that requested this feature which in all of the cases was denied saying to use Enabled instead...

The reason we need a ReadOnly state is because the user can not highlight to select the text to  copy/paste if desired... that would be the reason we need ReadOnly vs disabled...

Disabled does not allow you to select the text to copy/paste...

---

ADMIN EDIT

A workaround is to re-enable the pointer events and to, optionally, set a highlight color:

<style>
    /* Re-enable selection and scrolling of disabled textboxes.
    Apply text selection style.
    Can cause some side effects with appearance of hover and focus states */
    
    /* UI for Blazor 3.0 + */
    .k-input-inner.k-disabled,
    .k-disabled > .k-input-inner,
    input.k-textbox[disabled] {
        pointer-events: initial;
    }

    .k-input-inner[disabled]::selection {
        color: #fff;
        background-color: #ff6358;
    }

    /* UI for Blazor 2.30 - */

    .k-input.k-state-disabled,
    .k-state-disabled > .k-input,
    .k-state-disabled > .k-dateinput-wrap > .k-input,
    input.k-textbox[disabled] {
        pointer-events: initial;
    }

    .k-input[disabled]::selection {
        color: #fff;
        background-color: #ff6358;
    }

</style>

<TelerikTextBox @bind-Value="@tbText" Enabled="false" />
<TelerikTextArea @bind-Value="@taText" Enabled="false" />
<TelerikDatePicker @bind-Value="@dpDate" Enabled="false" />
<TelerikDropDownList @bind-Value="@ddlVal" Data="@ddlData" Enabled="false" />

@code{
    string tbText { get; set; } = "lorem ipsum";
    string taText { get; set; } = "lorem ipsum\ndolor sit amet\nlorem ipsum\ndolor sit amet";
    DateTime dpDate { get; set; } = DateTime.Now;
    List<int> ddlData { get; set; } = Enumerable.Range(1, 10).ToList();
    int ddlVal { get; set; } = 2;
}

---

 

18 comments
ADMIN
Hristian Stefanov
Posted on: 02 Aug 2023 06:29

Hi Christian,

Yes, it is possible as of version 4.4. I confirm that your observations are completely correct.

Here is a base example:

<TelerikTextBox Placeholder="test content" Width="180px" ReadOnly="true" />

Regards,
Hristian Stefanov
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources!
Christian
Posted on: 01 Aug 2023 12:05
This is now possible via ReadOnly from 4.4.0+ on, I assume?
ADMIN
Hristian Stefanov
Posted on: 27 Jun 2023 19:38

Hi Smiljan,

I want to express my heartfelt appreciation for your extraordinary patience during the course of my investigations. The duration of the process exceeded our initial expectations due to certain internal factors, such as extensive discussions within our team and a significant workload in recent weeks.

Now I'm finally able to share news on this item.

I want to assure you that the work on the implementation of the feature has already begun. Our team has dedicated efforts toward its development, and we anticipate its inclusion in one of our upcoming releases. As soon as we have a definitive timeline, the status of this item will be updated to "Planned," along with the expected completion date.

Regards,
Hristian Stefanov
Progress Telerik

As of R2 2023, the default icon type will be SVG instead of Font. See this blogpost for more information.
ADMIN
Hristian Stefanov
Posted on: 16 May 2023 09:39

Hi Smiljan,

Thank you for bringing this to our attention.

Indeed, the feature is highly requested. It seems to have somehow slipped out of our planning.

I will reach out to our management to determine the appropriate future release for incorporating the feature, taking into consideration our capacity.

I will get back here with new updates very soon.

Regards,
Hristian Stefanov
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources!
Smiljan
Posted on: 09 May 2023 16:21

How come that this feature is still in ‘Unplanned’ phase, but highly requested/voted?
I’m looking at ‘Planned’ list and most of them have cca 1-20 votes…

BR, Smiljan

ADMIN
Marin Bratanov
Posted on: 17 Feb 2022 19:12

Hello,

To get updates when something happens (say, a release number is known), click the Follow button on the portal page.

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Nemo
Posted on: 16 Feb 2022 16:40
Hi, readonly text editor is quite often used and will be very helpful to have a native solution. Also instead of having a separate ReadonlyTextArea, it might be better to add ReadOnly property/attribute to the existing TelerikTextArea control. Any update on when this will be implemented? Thanks.
ADMIN
Marin Bratanov
Posted on: 12 Dec 2021 11:02

Hello Tony,

The HTML editor is not a plain input, and disabling it is supposed to disable interaction with the content. If you want to keep interaction, I recommend using an if-block to either render the editor, or the HTML string that it would otherwise work with.

Regards,
Marin Bratanov
Progress Telerik

Learn about the important changes coming in UI for Blazor 3.0 in January 2022!
Tony
Posted on: 11 Dec 2021 19:11

How do I extend this to the text inside an HTML Editor control?

What if the control contains HTML that has links that should be clickable?

ADMIN
Marin Bratanov
Posted on: 05 Dec 2021 08:59

Hi Tony,

I updated the opener post with a few more selectors that target date inputs and dropdownlists.

The pattern here is that you need to find the input whose pointer-events CSS rule you need to set to initial so that selection can happen. You can do that by inspecting the rendered HTML to see what selector you need for the particular case.

Regards,
Marin Bratanov
Progress Telerik

Learn about the important changes coming in UI for Blazor 3.0 in January 2022!
Tony
Posted on: 03 Dec 2021 15:08

Excellent - that works a treat!

Do you have similar styles for the other controls? I notice the same issue when I try to copy values from drop downs, dates etc.

ADMIN
Marin Bratanov
Posted on: 11 Nov 2020 08:19

Hi all,

I've edited the opener post to add a workaround you can consider for the time being.

 

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Scott
Posted on: 10 Sep 2020 22:55

<input class="k-textbox" readonly value="TestData" />
<input class="k-textbox" disabled value="TestData" />

This shows what I am talking about... the readonly one, you can highlight the text and copy it...

the disabled one you can't.... the telerik textbox can only produce the disabled one... would like for it to produce the readonly one so that users have a way to select/copy the text...

ADMIN
Marin Bratanov
Posted on: 09 Sep 2020 14:38

Hi Scott,

I renamed this feature request to better reflect your goal - I don't find it likely that it would be solved through a readonly attribute, though.

What I can suggest at this point is that you consider an if-else block instead of the Editable parameter - if the field is to be editable, render an enabled input, if not - render plain text without a component and inputs.

 

Regards,
Marin Bratanov
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

Scott
Posted on: 08 Sep 2020 20:01

My goal was to allow the user to copy from the textbox, but not allow them to change it... when it is disabled, the Telerik class stops it from being highlighted/copied... so I was looking to use readonly instead of disabled as highlighting/copying is allowed for readonly with the Telerik class k-textbox applied... 

I also tried overriding the css applied when disabled by using 

pointer-events: auto;

but this doesn't work....

ADMIN
Marin Bratanov
Posted on: 08 Sep 2020 05:32

Hello Scott,

With simple inputs, I can copy from both disabled and readonly text

 

<input disabled value="I am disabled" />
<br /><br />
<input readonly value="I am read-only" />

 

Thus, the rules we have for disabled inputs are a bonus that is not solved by adding a readonly attribute.

The k-textbox class has a cascade that sets pointer-events: none for disabled inputs, but not for readonly inputs, hence the difference - I cannot copy from the disabled one defined like this:

 

<input disabled value="I am disabled" class="k-textbox" />
<br /><br />
<input readonly value="I am read-only" class="k-textbox" />

 

Disabling the pointer events on a readonly input has different behavior than on a disabled one, and that's something the browser controls, you can test it without any Telerik code like this:

 

<input disabled value="I am disabled" class="custom-class" />
<br /><br />
<input readonly value="I am read-only" class="custom-class" />

<style>
    .custom-class[readonly] {
        pointer-events: none;
        border: 1px solid red;
    }
</style>

 

With regards to your second paragraph - I am not sure I understand the goal in relation to the original request. Do you want the user to be able to copy text from a disabled input? My initial understanding was that you do not, and that matches the behavior we have.

Regards,
Marin Bratanov
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

Scott
Posted on: 07 Sep 2020 18:54

Correct, I can not highlight the text to copy it when the disabled attribute is present on an input textbox... however if I remove disabled and instead add a readonly attribute... I can highlight and copy from it... still defined as a k-textbox in the class attribute...

I did verify that the k-textbox class is causing this as when I removed it but still kept the disable attribute, I actually could highlight and copy the text then... i tried removing just the pointer-events from the css but that still doesn't allow it to be highlighted/copied.... which i thought was odd....? Is there some other css also preventing the text from being highlighted?

ADMIN
Marin Bratanov
Posted on: 07 Sep 2020 17:09

Hello Scott,

The disabled CSS class we add to the rendering of disabled components sets the pointer-events rule to "none" for the inputs, which disables selection and thus - copying. Can you show me how you can copy from a disabled input of ours?

On a side note - when you have sent information to the user, they can copy it anyway - both in Server-side blazor (e.g., by extracting it from the DOM), and for WebAssembly (where it often also arrives as a REST HTTP call response).

 

Regards,
Marin Bratanov
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).