Progress® Telerik® UI for ASP.NET AJAX Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 19 Mar 2019 14:19 by ADMIN
IT
Created on: 30 Jan 2019 16:12
Category: Editor
Type: Bug Report
1
In Chrome, The getSelectedElement() function returns a [body] tag when an [input type='number'] is selected

Setup:  

  1. Create a page with a basic Rad Editor, with HTML mode enabled
  2. Go into HTML Mode, add at least the following:
    <input type="number" />
  3. Go back to Design Mode
  4. Click on the numeric input

To See the Problem:

  1. In the console of the Browser's Developer Tools, get a reference to the Rad Editor
  2. Call its getSelectedElement() function
  3. In Chrome, the returned element will be a <body> tag (NOT GOOD)
  4. In Firefox, it will be an apparently random (maybe the first?) user-selectable element within the HTML (NOT GOOD)
  5. In IE11, it will be the numeric input (DESIRED)
  6. In Edge, it will be a <body> tag (NOT GOOD)
2 comments
ADMIN
Rumen
Posted on: 08 Mar 2019 09:57
I have good news that the problem is fixed and available for testing in the Latest Internal Build version 2019.1.308.

You can download the LIB from https://www.telerik.com/account/product-download?product=RCAJAX -> click on the Internal Builds tab -> download Telerik_UI_for_ASP.NET_AJAX_2019_1_308_Dev_hotfix.zip or Telerik_UI_for_ASP.NET_AJAX_2019_1_308_Trial_hotfix.zip depending on your license.

Here are the Release Notes -> In Chrome, the getSelectedElement() function returns a [body] tag when an [input type='number'] is selected.

The fix will be also part of the upcoming in May major R2 2019 release.

Best regards,
Rumen
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
ADMIN
Rumen
Posted on: 31 Jan 2019 12:35
Hi Peter,

Thank you for reporting this issue! It is much appreciated!

I converted the support ticket to a public feedback portal item of type Bug Report so that more users learn about it and see the solution below. You can access the public item from here.

I compared the browser's iframe.contentWindow.document.activeElement setting with the RadEditor's editor.getSelectedElement() and found that the number type should be added to the isTextElement internal method so that getSelectedElement should start to work properly with this input type. The same is true for the range, date, datetime-local, month, time and week.

I logged the problem and we will fix it for R2 2019. Until than you can use the function override below highlighted in orange:

<telerik:radeditor runat="server" id="RadEditor1" OnClientSelectionChange="OnClientSelectionChange">
    <Content>
        <input type="text" style="width: 100px; height: 22px;" /><input type="number" style="width: 100px; height: 22px;" /><textarea></textarea>
        <input type="range" style="width: 100px; height: 22px;" />
        <input type="date" style="width: 100px; height: 22px;" />
        <input type="datetime-local" style="width: 100px; height: 22px;" />
        <input type="month" style="width: 100px; height: 22px;" />
        <input type="time" style="width: 100px; height: 22px;" />
        <input type="week" style="width: 100px; height: 22px;" />
    </Content>
</telerik:radeditor>
<input type="button" value="Paste Content" onclick="InsertSpan(); return false;" />
<script type="text/javascript">
    function OnClientSelectionChange(editor, args) {
        alert("active element: " + document.getElementById('RadEditor1_contentIframe').contentWindow.document.activeElement + "\n" + "RadEditor getSelectedElement is: " + editor.getSelectedElement() + "\n" + editor.getSelectedElement().getAttribute("type"));
    }
 
    var $E = Telerik.Web.UI.Editor;
    var utils = $E.Utils;
    var $ = $telerik.$;
    $E.Utils.isTextElement = function (node) {
        return utils.isTag(node, "textarea") || (utils.isTag(node, "input") && $(node).is(":not([type]),[type=text],[type=password],[type=number],[type=range],[type=date],[type=datetime-local],[type=month],[type=time],[type=week]"));
    }
</script>


The solution works for Chrome, IE and Edge. In Firefox many of the inputs are disabled and the browser's document.getElementById('RadEditor1_contentIframe').contentWindow.document.activeElement property returns incorrect elements when selecting input elements.

As a small note of gratitude for your bug report, I updated your Telerik points.

Best Regards,
Rumen
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Create an account Log In
View
Type
Status
Category