Unplanned
Last Updated: 10 Sep 2020 22:55 by Scott
Scott
Created on: 07 Sep 2020 16:24
Category: UI for Blazor
Type: Feature Request
1
Allow selecting and copying text from inputs with Enabled=false

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...

 

 

6 comments
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).