Last Updated: 31 Jan 2019 12:35 by ADMIN
Created on: 30 Jan 2019 16:12
Category: Editor
Type: Bug Report
In Chrome, The getSelectedElement() function returns a [body] tag when an [input type='number'] is selected


  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)
(Total attached files size should be smaller than 20mb. Allowed extensions: .zip, .rar, .jpg, .png, .gif)
1 comment
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">
        <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;" />
<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]"));

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