Last Updated: 26 Nov 2014 17:31 by ADMIN
Created on: 30 Apr 2014 13:38
Category: PanelBar
Type: Feature Request
FIX: Textbox placed inside a RadPanelBar loses focus on keyboard pop-up in Internet Explorer 10/11 Metro mode on Windows 8/8.1 tablets

Posted on: 26 Nov 2014 17:31
The issue has been fixed and its fix will be released in Q3 2014 SP1.
Posted on: 30 Apr 2014 13:40
If a textbox or other control with editable content such as RadTreeView is placed inside a RadPanelBar loses focus when the software keyboard pops up in Internet Explorer 10/11 Metro mode on Windows 8/8.1 tablets. This prevents the user from typing/editing.

The issue can be fixed with the following workaround logic:

If the keyboard animation is over before the textbox inside the PanelBar is focused, then you could type inside the textbox. This is achieved by placing another textbox on the page, outside the PanelBar and hiding it with CSS:

<input type="text" id="hiddenInput" style="width: 0; height: 0; border:none; position:absolute; top:-1000px"/>

Then, on an appropriate for your case event that would focus the textbox inside the PanelBar, if the browser used matches IE 10/11 on a tablet, you should put focus on the dummy textbox and use setTimeout() for about 800 milliseconds to wait for the keyboard animation to complete. After that the focus is switched to the textbox inside the PanelBar and typing is possible.
Browse the following code from the sample for quick reference: 

                function normalFlowOnClientContextMenuItemClicked() {
                    var selectedNode = treeView.get_selectedNode();
                    if (selectedNode != null || selectedNode != undefined) {
                        var tree = selectedNode.get_treeView();
                    else {
                        alert("Select a TreeNode to edit");

                function OnClientContextMenuItemClicked() {
                // If the browser is mobile IE, we put the focus on a textbox on our page, so that the IE keyboard pops up.
                   if (\bARM\b;|\bTouch\b/i) != -1) {
                        var textBox = document.getElementById("hiddenInput");

                // Wait the keyboard animation to be completed and then you are able to edit the tree node selected.
                        var millisecondsToWait = 800;
                        setTimeout(normalFlowOnClientContextMenuItemClicked, millisecondsToWait);
                    else {