unable to deselect table on iOS

[Trevor]

The problem can be seen on the demo editor.

On iOS, tap the "Insert Table" toolbar button to add a table to the editor content window,
Notice that the new table is 'selected',
If you tap somewhere else in the content window, the table remains selected

In a desktop browser, the table will become deselected as soon as you click elsewhere in the content window.  On Android, the table becomes deselected as soon as you tap elsewhere in the content window.

Can I get a solution to this problem?

Thanks,
Trevor.

[Trevor]

Can I get a response to this please?

[Dimitar]

Hello Trevor,

I was able to reproduce the behavior described, only when I click in the editor area to the right of the table.
If you click in the area below or above the table, the cursor moves and the first cell of the table is deselected. I have attached a short video, showing that behavior on an iOS 7.1 iPad Safari.
The same behavior is observed when there is additional text content as well.

There is a difference in the way Android and iOS handle taps position. You may experience it in the address bar of iOS Safari and Android Chrome - in Safari when you tap inside a word in the address bar, the cursor moves either before or after that word. In Android Chrome, the cursor would be placed at the exact position tapped. These native specifics lead to different experience in the two mobile OS browsers.

If you are observing RadEditor behavior other than the one described above, could you attach a short video that demonstrates it to show us the experience on your side?

Regards,
Dimitar
Telerik

 

 

[Trevor]

Hello,

The issue is not difficult to reproduce. I'll attach screenshots that demonstrate the problem using the Telerik demo editor.

steps:

1. tap somewhere in the content area (screen1)
2. use the toolbar button to insert a table (screen2)
3. tap elsewhere in the content area - notice the cursor - notice the table is still selected (screen3)
4. tap elsewhere in the content area - notice the cursor - notice the table is still selected (screen4)
5. tap elsewhere in the content area - notice the cursor - notice the table is still selected (screen5)
6. double-tap a word to select it - notice the table is still selected (screen6)

to deselect the table, you can switch to HTML mode then back to Design mode.

Please let me know what can be done to correct this problem. Thank you.

[Joana]

Hello Trevor,

RadEditor's content area is an editable iframe which uses the Rich Text Editing engine of the used browser. There are some limitations with the usage of iframe in Safari like scrolling. Regarding the issue with the selection of tables, we have logged it in our bug tracking system for improvement.

In the meantime, we have prepared you the following workaround:

<telerik:RadEditor ID="RadEditor1" runat="server" OnClientLoad="OnClientLoad"  OnClientCommandExecuted="OnClientCommandExecuted">
</telerik:RadEditor>
<script type="text/javascript">
            function OnClientLoad(editor, args) {
                if ($telerik.isMobileSafari) {
                    var element = document.all ? editor.get_document().body : editor.get_document();
                    $telerik.addExternalHandler(element, "click", function (e) {
                        if (e.target.nodeName != "TD" && Telerik.Web.UI.Editor.Utils.getElementParentByTag(e.target, "TABLE")) {
                            var editorWindow = editor.get_contentWindow();
                            clearSelection(editorWindow);
                        }
                    });
                }
            }
            function OnClientCommandExecuted(editor, args) {
                if ($telerik.isMobileSafari) {
                    if (editor.getSelectedElement().nodeName == "TD") {
                        var editorWindow = editor.get_contentWindow();
                         clearSelection(editorWindow);
                    }
                }
            }

            function clearSelection(object) {
                if (object.getSelection) {
                    object.getSelection().removeAllRanges();
                }
            }


        </script>

Regards,
Joana
Telerik