Focus not lost when using tab instead of mouse click

4 posts, 0 answers
  1. Nolan
    Nolan avatar
    1 posts
    Member since:
    Mar 2007

    Posted 06 Nov 2008 Link to this post

    I have a row of items, including a RadTimePicker with a TimePopupButton.  If I click the popup, and then click the mouse out of the popup, the popup closes.  If instead of clicking I use the tab key, the popup stays open until I click somewhere.  Is this intentional behavior, and if so is there a way to change it so the popup closes when the tab button is used to alter the input focus?  Here's the RadTimePicker definition I currently have.

                            <telerik:RadTimePicker ID="SurgeryTime" runat="server" MinDate="1780-01-01" Culture="English (United States)" Width="80" style="margin-right: 15px;"   >
                                <TimePopupButton CssClass="" />
                                <TimeView ID="TimeView1" StartTime="1:0:0" EndTime="23:00:00" Interval="0:15:0" Columns="5"
                                TimeFormat="HH:mm" runat="server">
                                </TimeView>

                                <DateInput ID="DateInput1" DateFormat="HH:mm" runat="server">
                                </DateInput>

                                <Calendar UseColumnHeadersAsSelectors="True" UseRowHeadersAsSelectors="True" runat="server">
                                </Calendar>
                                <DatePopupButton CssClass="" Visible="False" />
                            </telerik:RadTimePicker>&nbsp;

  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 07 Nov 2008 Link to this post

    Hi Nolan,

    My suggection to achieve this feature is to add the following Javascript, which will check for the keypress event in the document.

    JavaScript:

    <script type="text/javascript"
    document.onkeypress = keyPress; 
    function keyPress(ev) 
        ev || (ev = window.event); 
        var code = (ev.keyCode ? ev.keyCode: (ev.charCode ? ev.charCode: ev.which)); 
        if (code == 9) // keycode for TAB key
        { 
            var picker = $find("<%= RadTimePicker1.ClientID %>"); 
            picker.hideTimePopup(); 
            return 9; 
        } 
    </script> 


    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. John Snyder
    John Snyder avatar
    43 posts
    Member since:
    Mar 2006

    Posted 16 Dec 2008 Link to this post

    You may want to consider using onkeydown or onkeyup since onkeypress does not capture the Tab key in IE7 (and possibly some others).  Otherwise it worked well for me.  I have 3 calendars so I just hide all 3 of them when the tab key is pressed.
  5. Calvin Bowens
    Calvin Bowens avatar
    13 posts
    Member since:
    Dec 2004

    Posted 10 Feb 2009 Link to this post

    I tried this (onkeyup since i'm using IE7) and it opens the calendar then immediately closes it.  Any suggestions?
Back to Top