Design rendering failure with Uncaught TypeError: Cannot read properties of null (reading 'commonAncestorContainer') when using ToolbarMode="RibbonBarShowOnFocus"

Progress® Telerik® UI for ASP.NET AJAX Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Completed

Last Updated: 14 Apr 2026 12:04 by ADMIN

Release 2026 Q1 SP2

Wayne

Created on: 13 Apr 2026 20:05

Category: Editor

Type: Bug Report

Design rendering failure with Uncaught TypeError: Cannot read properties of null (reading 'commonAncestorContainer') when using ToolbarMode="RibbonBarShowOnFocus"

After upgrade from
<package id="Telerik.Licensing" version="1.6.16" targetFramework="net472" />
<package id="Telerik.UI.for.AspNet.Ajax.Net462" version="2025.3.825" targetFramework="net472" />

we started experiencing the following error:

1. Add editor with ToolbarMode="RibbonBarShowOnFocus", no code-behind is required

        <telerik:RadEditor ID="Editor" runat="server" Width="100%"
            ToolbarMode="RibbonBarShowOnFocus">
        </telerik:RadEditor>

2. Open page, editor is empty and "Design" tab is active

3. Click on "Html" tab. Important: don't click on the editor content area while "Design" tab is active!

4. Paste some html, e.g.
<p>Your third Quarter Dining Rewards are Ready!</p>

5. Click to "Design" tab. Content is not rendered, editor is broken.

6. Find error in console

ScriptResource.axd?d=SIX1nT3k5ctYiH_Z5iBDXSZnshOXvXkzvSku5HLBqZlwfCmxfuwQE-bsvfCtuJcU8Kf5mMmqIz4_-haUfplj_Y2fBjNYHTB6sDwvO7dqA9dlR0fcUTx4578VpqHDjGrfk4WQ4Qs5nyG4zIAFDPwYjQ2&t=7fbf35ab:1 Uncaught TypeError: Cannot read properties of null (reading 'commonAncestorContainer')
at Object.getState (ScriptResource.axd?d=SIX1nT3k5ctYiH_Z5iBDXSZnshOXvXkzvSku5HLBqZlwfCmxfuwQE-bsvfCtuJcU8Kf5mMmqIz4_-haUfplj_Y2fBjNYHTB6sDwvO7dqA9dlR0fcUTx4578VpqHDjGrfk4WQ4Qs5nyG4zIAFDPwYjQ2&t=7fbf35ab:1:143451)
at Object.getToolState (ScriptResource.axd?d=SIX1nT3k5ctYiH_Z5iBDXSZnshOXvXkzvSku5HLBqZlwfCmxfuwQE-bsvfCtuJcU8Kf5mMmqIz4_-haUfplj_Y2fBjNYHTB6sDwvO7dqA9dlR0fcUTx4578VpqHDjGrfk4WQ4Qs5nyG4zIAFDPwYjQ2&t=7fbf35ab:2:7097)
at Object.setRibbonBarToolState (ScriptResource.axd?d=SIX1nT3k5ctYiH_Z5iBDXSZnshOXvXkzvSku5HLBqZlwfCmxfuwQE-bsvfCtuJcU8Kf5mMmqIz4_-haUfplj_Y2fBjNYHTB6sDwvO7dqA9dlR0fcUTx4578VpqHDjGrfk4WQ4Qs5nyG4zIAFDPwYjQ2&t=7fbf35ab:3:124809)
at Object._onEditorSelectionChange (ScriptResource.axd?d=SIX1nT3k5ctYiH_Z5iBDXSZnshOXvXkzvSku5HLBqZlwfCmxfuwQE-bsvfCtuJcU8Kf5mMmqIz4_-haUfplj_Y2fBjNYHTB6sDwvO7dqA9dlR0fcUTx4578VpqHDjGrfk4WQ4Qs5nyG4zIAFDPwYjQ2&t=7fbf35ab:3:124488)
at Array.<anonymous> (MsAjaxJs?v=D6VN0fHlwFSIWjbVzi6mZyE9Ls-4LNrSSYVGRU46XF81:1:2148)
at MsAjaxJs?v=D6VN0fHlwFSIWjbVzi6mZyE9Ls-4LNrSSYVGRU46XF81:1:50368
at Object.raiseEvent (ScriptResource.axd?d=TDVjdgRbdvNAY3tnbizUcIjfDUXiq5ixpnBN0VcDALLSiZ3CMr6-87hfvIaN_0cz2j3vISyRnNQUUXuS5a7lBoLr1EhUzo3XC7p-5gq6HdUFDfDXoZF6FnTKoxdUmGE70&t=7fbf35ab:3:34795)
at Function.callBaseMethod (MsAjaxJs?v=D6VN0fHlwFSIWjbVzi6mZyE9Ls-4LNrSSYVGRU46XF81:1:8931)
at Object.raiseEvent (ScriptResource.axd?d=SIX1nT3k5ctYiH_Z5iBDXSZnshOXvXkzvSku5HLBqZlwfCmxfuwQE-bsvfCtuJcU8Kf5mMmqIz4_-haUfplj_Y2fBjNYHTB6sDwvO7dqA9dlR0fcUTx4578VpqHDjGrfk4WQ4Qs5nyG4zIAFDPwYjQ2&t=7fbf35ab:1:326487)
at Object.set_html (ScriptResource.axd?d=SIX1nT3k5ctYiH_Z5iBDXSZnshOXvXkzvSku5HLBqZlwfCmxfuwQE-bsvfCtuJcU8Kf5mMmqIz4_-haUfplj_Y2fBjNYHTB6sDwvO7dqA9dlR0fcUTx4578VpqHDjGrfk4WQ4Qs5nyG4zIAFDPwYjQ2&t=7fbf35ab:2:26992)

This is a production issue so any quick fixes/workarounds will be greatly appreciated.

Attached Files:

screen-recording-2026-04-13-155039-mp4.zip

1 comment

ADMIN

Vasko

Posted on: 14 Apr 2026 10:53

Hello Wayne,

Thank you for the provided recording and steps to reproduce the issue, I can confirm that this is indeed a bug.

After some testing, I have created the following workaround which relies on overriding an internal function related to the RibbonBar implementation inside the Editor:

(function () {
    try {
        let $T = Telerik.Web.UI;
        let Editor = $T.Editor;

        if ($T && Editor && Editor.RibbonBarToolAdapter) {
            let original = Editor.RibbonBarToolAdapter.prototype.setRibbonBarToolState;
            $T.Editor.RibbonBarToolAdapter.prototype.setRibbonBarToolState = function (toolsArray, optionalState) {
                // If no tools specified use default set of tools
                if (!toolsArray) { toolsArray = this._ribbonBarButtons; }

                let editor = this.get_editor(),
                    range = Telerik.Web.UI.Editor.DomRange.rangeFromWindow(editor.get_contentWindow());

                let contentArea = editor.get_contentArea();
                let ancestor = range?.commonAncestorContainer;
                let isRangeInsideContentArea = ancestor && (contentArea === ancestor || $telerik.$.contains(contentArea, ancestor));

                if (!range || !isRangeInsideContentArea) {
                    range = editor.domRangeToFirstText();
                }

                this._rangeState = range;

                for (let i = 0; i < toolsArray.length; i++) {
                    let oTool = toolsArray[i];
                    let toolName = oTool.get_value();
                    let state = optionalState; // State can be supplied as optional arg

                    if (null == state) { state = editor.getToolState(toolName, range); }

                    if (null != state) { this._setRibbonBarButtonState(oTool, state); }
                }
            }
        }
    } catch (e) {
        // There is nothing to do.
    }
})();

With this override, the error no longer appears, please test with it and share with me your results.

Additionally, I have converted this item to a bug report and have updated your Telerik Points for bringing our attention to this matter.

Regards,
Vasko
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!