Focus doesn't work in Chrome or Safari

5 posts, 0 answers
  1. Johnathan
    Johnathan avatar
    31 posts
    Member since:
    Sep 2012

    Posted 20 Oct 2014 Link to this post

    Hello all. I'm attempting to call focus for a radeditor control during the that's contained within a radwindow popup during the page load event. The focus() call works correctly for IE & Firefox, but in Safari & Chrome, it doesn't, requiring our users to click within the content area before they can start typing. Is there a way to correct this?
  2. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 22 Oct 2014 Link to this post

    Hi Johnathan,

    I might be wrong, but it seems to me that the jQuery focus() method is used which works for focus-able HTML elements, but when it comes to complex controls like the RadEditor it is recommended using the supported and exposed client-side API of the control. In your case you should use the editor's setFocus() method.

    If you still have issues on the matter, please provide some code examples of the implemented logic, so that I could be able to further investigate it.

    Regards,
    Ianko
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Johnathan
    Johnathan avatar
    31 posts
    Member since:
    Sep 2012

    Posted 22 Oct 2014 in reply to Ianko Link to this post

    Hi Ianko,

    Thanks for your help. So, I change the page to try setting the radeditor control focus using client-side setfocus(). I do this using the pageLoad() function attached. Using alerts, I have determined that the pageLoad() function (and as a result, the radeditor's setfocus() method) is called twice in Google Chrome & Safari, resulting in the radeditor losing its focus for some reason. It works correctly in IE & FF. I also wanted to mentioned that I put the setTimeout() function around setfocus() method to confirm that it initially has focus until the second time the setfocus() method is called for the radeditor control. Here's the JS code I'm using (It is contained within a RadScriptBlock control, just FYI). 

    function pageLoad() {
        //alert('page load called!');
        var multiPage = $find("<%=MainMultiPage.ClientID %>");
        var pageView = multiPage.get_selectedPageView();
        var pageViewName = pageView.get_id();
     
        if ($find('<%= Status_StatusTable.ClientID %>') != null && pageViewName.indexOf('StatusPageView') > 0) {
            SetStatusFocus();
        }
     
        if ($find('<%= Note_ProgressTable.ClientID %>') != null && pageViewName.indexOf('ProgressPageView') > 0) {
            SetFocusOnNote('<%= Note_ProgressTable.ClientID %>');
        }
        if (document.getElementById('<%= Note_ProgressTable.ClientID %>TextArea') != null && pageViewName.indexOf('ProgressPageView') > 0) {
            SetFocusOnNoteTextArea('<%= Note_ProgressTable.ClientID %>');
        }
     
        if ($find('<%= Note_CodeChangeTable.ClientID%>') != null && pageViewName.indexOf('CodeChangePageView') > 0) {
            SetFocusOnNote('<%= Note_CodeChangeTable.ClientID%>');
        }
        if (document.getElementById('<%= Note_CodeChangeTable.ClientID%>TextArea') != null && pageViewName.indexOf('CodeChangePageView') > 0) {
            SetFocusOnNoteTextArea('<%= Note_CodeChangeTable.ClientID%>');
        }
     
        if ($find('<%= Note_SolutionTable.ClientID%>') != null && pageViewName.indexOf('SolutionPageView') > 0) {
            SetFocusOnNote('<%= Note_SolutionTable.ClientID%>');
        }
        if (document.getElementById('<%= Note_SolutionTable.ClientID%>TextArea') != null && pageViewName.indexOf('SolutionPageView') > 0) {
            SetFocusOnNoteTextArea('<%= Note_SolutionTable.ClientID%>');
        }
     
        if (pageViewName.indexOf('ReferencePageView') > 0) {
            SetFocusOnReference();
        }
     
    }
    function SetFocusOnNote(sID) {
        setTimeout(function () {
            try {
                alert(sID);
                $find(sID).setFocus();
            }
            catch (e) {
                alert(e.message);
            }
        }, 3000);
    }


  5. Johnathan
    Johnathan avatar
    31 posts
    Member since:
    Sep 2012

    Posted 22 Oct 2014 Link to this post

    I wanted to give an update on this issue. I was able to resolve this problem by changing the pageLoad() function to "windows.onload = function() {....". It still loads the page twice in Chrome & Safari, however the radeditor maintains focus as it should.
  6. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 24 Oct 2014 Link to this post

    Hello Johnathan,

    I tried to recreate the same scenario on my end, but to no avail. The load events are raised only once.

    Indeed, under Chrome the focusing of the editor should be done with a setTimeout due to the iframe loading.

    It would be helpful if you could provide a simple, locally runnable page that isolates the encountered behavior, so that I could be able to examine the exact situation.

    Regards,
    Ianko
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017