The official release of Ext.NET Mobile is now available. Ext.NET Mobile is an ASP.NET component framework for building Phone and Tablet specific mobile web applications. Read More

[OPEN] [#1507] [4.2.2] Callout CloseOnOutsideClick not working for ComboBox Selection

  1. #1

    [OPEN] [#1507] [4.2.2] Callout CloseOnOutsideClick not working for ComboBox Selection

    Hi,

    I have a callout with CloseOnOutsideClick="true" option enabled.

    When I bind a ComboBox into the Bodywidget, When I was selecting any ComboBox item then the callout is disappearing.

    Code:
    <ext:TagLabel ID="Tag1" runat="server" Width="210" Stacked="true" MaxLength="100">
        <Tags>
            <ext:Tag Text="Update">
            </ext:Tag>
        </Tags>
        <Callouts>
            <ext:Callout ID="callout1" runat="server" Title="Updat field" BodyStyle="padding:0px 10px 0px 10px;" CloseOnOutsideClick="true" Trigger="Click">
                 <BodyWidget>
                    <ext:Panel runat="server" Layout="VBoxLayout" AnchorHorizontal="100%" Width="300" Padding="10" Border="false">
                            <Defaults>
                                <ext:Parameter Name="margins" Value="0 0 10 0" Mode="Value" />
                            </Defaults>
                            <LayoutConfig>
                                <ext:VBoxLayoutConfig Align="Stretch" />
                            </LayoutConfig>
                            <Items>
                                <ext:ComboBox ID="ComboBox1" Editable="false" runat="server" StyleSpec="margin-right:5px">
                                    <Items>
                                        <ext:ListItem Text="1" Value="1" />
                                        <ext:ListItem Text="2" Value="2" />
                                        <ext:ListItem Text="3" Value="3" />
                                        <ext:ListItem Text="4" Value="4" />
                                        <ext:ListItem Text="5" Value="5" />
                                        <ext:ListItem Text="6" Value="6" />
                                        <ext:ListItem Text="7" Value="7" />
                                        <ext:ListItem Text="8" Value="8" />
                                        <ext:ListItem Text="9" Value="9" />
                                        <ext:ListItem Text="10" Value="10" />
                                    </Items>
                                </ext:ComboBox>
                            </Items>
                    </ext:Panel>
                 </BodyWidget>
            </ext:Callout>
        </Callouts>
    </ext:TagLabel>
    I am not able select anything from the ComboBox1 and not able to proceed further. Help me out from this bug.

    Thank you
  2. #2
    Hello @iansriley!

    I see you already asked this some time ago here and we didn't notice the question. I apologize for that as that's pretty much a bug with the callout component and still happens down to version 4 of Ext.NET.

    In fact, the problem is the combo box picker. Page DOM-wise, the picker is not within the combo box, so when you click there it is like clicking somewhere in the page outside the callout, thus triggering it out.

    You may want to make that callout manually closable but if you really want to trick Ext.NET into thinking the click was inside the callout, you can, for each combo box you have inside the callout, tell Ext.NET to also consider it as a click within with the following override (it shows the code necessary for the single ComboBox1 within:

    <script type="text/javascript">
        Ext.define("Ext.net.Callout", {
            override: "Ext.net.Callout",
            onDocMouseDown: function (e) {
                var me = this,
                    t;
    
                if (!e.within(me.el.dom)) {
                    if (me.trigger !== "manual" &&
                        (e.within(me.target) || e.within(App.ComboBox1.getPicker().getEl()))) {
                        t = this.delegate ? e.getTarget(this.delegate) : true;
    
                        if (t) {
                            return;
                        }
                    }
    
                    me.disable();
                    Ext.defer(me.doEnable, 100, me);
                }
            }
        });
    </script>
    I hope this helps!

    As this error also happens on Ext.NET 4.2.2, we've just logged it as #1507. Please notice we may fix it for good on our next Ext.NET 4 release, but the fix will not be making it to Ext.NET 2 series.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 2
    Last Post: Feb 15, 2017, 8:28 AM
  2. Replies: 2
    Last Post: Mar 26, 2015, 1:49 PM
  3. Replies: 1
    Last Post: Feb 20, 2015, 6:05 PM
  4. Replies: 1
    Last Post: Jan 06, 2015, 12:18 PM
  5. [CLOSED] Forcing combobox to remain open after selection
    By SymSure in forum 1.x Premium Help
    Replies: 1
    Last Post: May 30, 2011, 10:38 PM

Posting Permissions