getSelectedElement issue on FF e Chrome

[Luigi Gaeta]

I'm trying to implement custom dialog to show a user-friendly window to insert form's elements in radEditor, but I'm unable to find a workaround for a known issue on "getSelectedElement()" method of the radEditor client API.
My telerik controls version is 2011.2.830.35
To recreate the issue use this code:

<telerik:RadEditor ID="RadEditor1" runat="server" >
    <ContextMenus>
        <telerik:EditorContextMenu TagName="INPUT">
            <telerik:EditorTool name="fieldModifica" Text="Modifica proprietà..." />
        </telerik:EditorContextMenu>
        <telerik:EditorContextMenu TagName="SELECT">
            <telerik:EditorTool name="selectModifica" Text="Modifica proprietà..." />
        </telerik:EditorContextMenu>
    </ContextMenus>
    <Content>
        <select id="aSelect"><option value="first">first</option><option value="second">second</option></select><br />
        <input type="text" id="anInputBox" value="an input box"></input>
    </Content>
</telerik:RadEditor>


<script type="text/javascript">
//<![CDATA[

function ModifyFieldProperty(commandName, editor, args, tagname, fieldtype) {
    var elem = editor.getSelectedElement(); //returns the selected element.
    alert("elem.tagName: " + elem.tagName + " - tagname: " + tagname);
}

Telerik.Web.UI.Editor.CommandList["fieldModifica"] = function(commandName, editor, args) {
    ModifyFieldProperty(commandName, editor, args, "INPUT", "text");
};

Telerik.Web.UI.Editor.CommandList["selectModifica"] = function(commandName, editor, args) {
    ModifyFieldProperty(commandName, editor, args, "SELECT", "");
};

//]]>
</script>

If you try to right-click on the select or text box and choose the voice "Modifica proprietà..." in the context menu the code show you the correct value for "elem.tagName" in IE and Firefox, but it's ever "BODY" for Goggle Chrome (first issue).

Second issue: in firefox the select element is not clickable and so, it's impossible to show the custom context menu.

Third issue: in Google Chrome the select element is clickable but not show the context menu.

The browser version were I'm testing the code:

Chrome 13.0.782.220
Firefox 6.0.2
IE 9.0.8112.16421

There's a workaround for this issues?
Many thanks
Luigi Gaeta

[Rumen]

Hi Luigi,

First issue: If you try to right-click on the select or text box and choose the voice "Modifica proprietà..." in the context menu the code show you the correct value for "elem.tagName" in IE and Firefox, but it's ever "BODY" for Goggle Chrome - I logged this problem for research and fixing in our bug tracking system. Here you can find the PITS Issue: Public URL.

Second issue: in firefox the select element is not clickable and so, it's impossible to show the custom context menu - this is a browser bug / limitation. In Firefox and Chrome even the built-in context menu of the browser does not popup when the user right clicks on a select element. You can reproduce the same behavior in a standard editable iframe /div element as well as in our competitors' web based editors. No solution/ workaround is available currently. This feature should be implemented / enabled by the WebKit developers.

Third issue: in Google Chrome the select element is clickable but not show the context menu - I was unable to reproduce this behavior. You can see my test in the following video: http://screencast.com/t/4tTdcAjy.


All the best,
Rumen
the Telerik team