[FIXED] [#686] "Non clickable" button's drop down menu in Window's Safari and Samsung Galaxy Tablet default browser

  1. #1

    [FIXED] [#686] "Non clickable" button's drop down menu in Window's Safari and Samsung Galaxy Tablet default browser

    Hi,

    The problem with menu is only in Safari (my version was 5.1.7 (7534.57.2)) and Samsung Tablet 2.0. IE/Chrome/Opera are fine.

    When you click on "User" button then drop down menu is displayed. As soon you try to hoover over it then it disappear instantly.

    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>DropDownMenu</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:Viewport
            runat="server"
            Layout="BorderLayout">
            <Items>
                <ext:Panel runat="server" Region="North">
                    <TopBar>
                        <ext:Toolbar
                            runat="server">
                            <Items>
                                <ext:ToolbarFill runat="server" />
                                <ext:Button runat="server" Text="User">
                                    <Menu>
                                        <ext:Menu
                                            runat="server">
                                            <Items>
                                                <ext:MenuItem runat="server" Text="My Settings" />
                                                <ext:MenuSeparator />
                                                <ext:MenuItem runat="server" Text="Logout" />
                                            </Items>
                                        </ext:Menu>
                                    </Menu>
                                </ext:Button>
                            </Items>
                        </ext:Toolbar>
                    </TopBar>
                </ext:Panel>
            </Items>
        </ext:Viewport>
    </body>
    </html>
    Last edited by fabricio.murta; Oct 14, 2017 at 7:38 PM.
  2. #2
    Hi Matt,

    only in Safari and Samsung Tablet 2.0
    Do you mean that it is specific to the device and that is not reproducible on other Tablet devices that you tested on so far?
    Last edited by Daniil; Feb 09, 2015 at 5:26 AM.
  3. #3
    Yes, reproducible on Samsung Tablet 2 (default browser) and Safari (windows web browser) only.

    I assume if you fix the problem under Safari for Windows then the Tablet browser should be OK too.

    The other Windows (8) based browser's are fine.

    PS.. now I can see your point :) It sounds like I meant Safari for Samsung Tablet, I will update the title.
    Last edited by matt; Feb 06, 2015 at 2:37 PM.
  4. #4
    Thank you, reproduced.

    Created an Issue:
    https://github.com/extnet/Ext.NET/issues/686

    Here is a test case with a possible workaround. Please let us know if the workaround works well for you and we might incorporate it to SVN.

    Example
    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Ext.NET v3 Example</title>
    
        <script>
            Ext.menu.Item.override({
                focus: function() {
                    var restore = false,
                        origFnMenu,
                        origFnCmp;
    
                    if (Ext.isSafari) {
                        origFnMenu = this.parentMenu.onFocusLeave;
                        this.parentMenu.onFocusLeave = Ext.emptyFn;
    
                        if (this.parentMenu.ownerCmp) {
                            origFnCmp = this.parentMenu.ownerCmp.onFocusLeave;
                            this.parentMenu.ownerCmp.onFocusLeave = Ext.emptyFn;
                        }
    
                        restore = true;
                    }
    
                    this.callParent(arguments);
    
                    if (restore) {
                        this.parentMenu.onFocusLeave = origFnMenu;
    
                        if (this.parentMenu.ownerCmp) {
                            this.parentMenu.ownerCmp.onFocusLeave = origFnCmp;
                        }
                    }
                }
            });
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
    
        <ext:Button runat="server" Text="User">
            <Menu>
                <ext:Menu
                    runat="server">
                    <Items>
                        <ext:MenuItem runat="server" Text="My Settings" />
                        <ext:MenuSeparator />
                        <ext:MenuItem runat="server" Text="Logout" />
                    </Items>
                </ext:Menu>
            </Menu>
        </ext:Button>
    </body>
    </html>
  5. #5
    Hi Danill,

    Sorry for the late answer, been away for a while.

    Yes, I confirm, Safari for Windows is working great. Tonight I will test it on the tablet and give you final answer.

    Thank you,
  6. #6

    Another issue... Sub menu

    Hi,

    The patch doesn't work for sub menus. Can you check that please ?


    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
    	<title>DropDownMenu</title>
    	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
    </head>
    <body>
    	<ext:ResourceManager runat="server" />
    	<ext:Viewport
    		runat="server"
    		Layout="BorderLayout">
    		<Items>
    			<ext:Panel runat="server" Region="North">
    				<TopBar>
    					<ext:Toolbar
    						runat="server">
    						<Items>
    							<ext:ToolbarFill runat="server" />
    							<ext:Button runat="server" Text="User">
    								<Menu>
    									<ext:Menu
    										runat="server">
    										<Items>
    											<ext:MenuItem runat="server" Text="My Settings" />
    											<ext:MenuSeparator />
    											<ext:MenuItem runat="server" Text="Logout" />
    											<ext:MenuSeparator />
    											<ext:MenuItem
    												runat="server"
    												Text="My Theme">
    												<Menu>
    													<ext:Menu runat="server">
    														<Items>
    															<ext:MenuItem
    																runat="server"
    																Text="Office Gray" />
    															<ext:MenuItem
    																runat="server"
    																Text="Office Blue" />
    															<ext:MenuItem
    																runat="server"
    																Text="Crisp" />
    															<ext:MenuItem
    																runat="server"
    																Text="Neptune" />
    															<ext:MenuItem
    																runat="server"
    																Text="Crisp Touch" />
    															<ext:MenuItem
    																runat="server"
    																Text="Neptune Touch" />
    														</Items>
    													</ext:Menu>
    												</Menu>
    											</ext:MenuItem>
    										</Items>
    									</ext:Menu>
    								</Menu>
    							</ext:Button>
    						</Items>
    					</ext:Toolbar>
    				</TopBar>
    			</ext:Panel>
    		</Items>
    	</ext:Viewport>
    </body>
    </html>

    Thank you,
  7. #7
    Probably, a fix should be extended to set onFocusLeave to Ext.emptyFn to a parent menu of parentMenu menu as well.
  8. #8
    Hello!

    This issue has been allegedly fixed by ExtJS (by their related forum thread) and I couldn't reproduce it in latest Ext.NET (4.5.0-current) at least using google chrome in device emulation mode. So I guess it is all good now.

    If you still experience this issue, just let us know and we'll reopen it.

    As of safari for windows, it has been discontinued for a while so we shouldn't really rely on it anymore.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] Example Image Organizer Mode="Remote" not working Drop
    By threewonders in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: May 21, 2014, 4:06 PM
  2. Replies: 6
    Last Post: May 31, 2013, 3:04 AM
  3. [CLOSED] Multiselection in the grid when "Darg & Drop" is available.
    By Leonid_Veriga in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Mar 26, 2012, 9:47 PM
  4. Replies: 4
    Last Post: Oct 11, 2011, 2:42 AM
  5. [CLOSED] Setting "Menu" for Button
    By mattwoberts in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Aug 26, 2011, 5:53 PM

Tags for this Thread

Posting Permissions