[FIXED] [#1339] [4.1.0] ComboBox with DisplayTpl cleared when losing focus in 4.1

  1. #1

    [FIXED] [#1339] [4.1.0] ComboBox with DisplayTpl cleared when losing focus in 4.1

    Hi,
    The 4.1 release may have introduced a problem with ComboBoxes using DisplayTpl. When selecting a value from the dropdown, the behaviour is correct, but if you tab onto and then away from a ComboBox that has a DisplayTpl, the value is cleared. This was not a problem with 4.0.

    In the following code, if you select a value for the ComboBox and then tab away, the value remains (as it should). If you then tab back to the ComboBox and then away without changing the value in the ComboBox, it will be cleared.

    <%@ Page Language="C#" %>
    <!DOCTYPE html>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            this.Store1.DataSource = new object[]
            {
                new object[] { "AL", "Alabama", "The Heart of Dixie", 5.99},
                new object[] { "AK", "Alaska", "The Land of the Midnight Sun", 5.99},
                new object[] { "AZ", "Arizona", "The Grand Canyon State", 5.99},
                new object[] { "AR", "Arkansas", "The Natural State", 5.99},
            };
        }
    </script>
    
    <html>
    <head runat="server">
        <script src="../Content/JS/ExtjsUsefulStuff.js?NoCache=ok"></script>
        <title>Comboboxes - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
        <style>
            .list-item {
                font: normal 11px tahoma, arial, helvetica, sans-serif;
                padding: 3px 10px 3px 10px;
                border: 1px solid #fff;
                border-bottom: 1px solid #eeeeee;
                white-space: normal;
                color: #555;
            }
    
    
                .list-item h3 {
                    display: block;
                    font: inherit;
                    font-weight: bold;
                    margin: 0px;
                    color: #222;
                }
        </style>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
    
            <ext:ComboBox
                runat="server"
                Width="250"
                Editable="false"
                DisplayField="state"
                ValueField="abbr"
                QueryMode="Local"
                ForceSelection="true"
                TriggerAction="All"
                EmptyText="Select a state...">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="abbr" />
                                    <ext:ModelField Name="state" />
                                    <ext:ModelField Name="nick" />
                                    <ext:ModelField Name="price" Type="Float" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ListConfig>
                    <ItemTpl runat="server">
                        <Html>
                            <div class="list-item">
                                    <h3>{state}</h3>
                                    {nick:ellipsis(15)}, {price:usMoney}
                            </div>
                        </Html>
                    </ItemTpl>
    
    
                </ListConfig>
                <DisplayTpl runat="server">
                    <Html>
                        <tpl for=".">
                            {state} {nick:ellipsis(15)}, {price:usMoney}
                        </tpl>
                    </Html>
                </DisplayTpl>
            </ext:ComboBox>
            <ext:TextField runat="server" />
        </form>
    </body>
    </html>
    I have used the following workaround, but I'm not sure if it will cause other problems (the only change is the if statement in line 22):

    Ext.define('Override.Ext.form.field.ComboBox', {
        override: 'Ext.form.field.ComboBox',
        setValue: function (value) {
            var me = this,
                bind, valueBind;
    
    
            if (me.hasFocus) {
                bind = me.getBind();
                valueBind = bind && bind.value;
                if (valueBind && valueBind.syncing) {
                    if ((Ext.isEmpty(value) && Ext.isEmpty(me.value)) || value === me.value) {
                        return me;
                    } else if (Ext.isArray(value) && Ext.isArray(me.value) && Ext.Array.equals(value, me.value)) {
                        return me;
                    }
                }
            } else {
              
    
    // add this if statement so lastSelectedRecords is only cleared when value is null
                if (value === null) me.lastSelectedRecords = null;                
            }
    
    
            if (value != null) {
                me.doSetValue(value);
            }
    
    
            else {
                me.suspendEvent('select');
                me.valueCollection.beginUpdate();
                me.pickerSelectionModel.deselectAll();
                me.valueCollection.endUpdate();
                me.resumeEvent('select');
            }
    
    
            return me;
        }
    });
    Last edited by fabricio.murta; Jan 05, 2017 at 11:33 PM.
  2. #2
    Hello @chrisuae!

    Thanks for the report! We have just filed bug ID #1339 to track this issue.

    By the way, if you just set ForceSelection="false" the error no longer happens (even without the override you suggested). You may find it useful to give it a try -- the combo box is not forcing any selection on load anyway.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hello,

    Reproduced with pure ExtJS and reported to Sencha:
    https://www.sencha.com/forum/showthread.php?311598
  4. #4
    Hello!

    Good news, both ExtJS fiddle and Ext.NET after merging to ExtJS 6.2.1 no longer reproduces this issue!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Text fell after losing focus Ext 3.1
    By brunopontes in forum 3.x Help
    Replies: 4
    Last Post: Aug 21, 2015, 10:54 AM
  2. [CLOSED] TextField reduces its width when losing focus
    By bbros in forum 3.x Legacy Premium Help
    Replies: 32
    Last Post: Jan 14, 2015, 11:39 AM
  3. combobox losing style
    By sp00k in forum 2.x Help
    Replies: 4
    Last Post: Jun 18, 2014, 1:40 PM
  4. [CLOSED] DisplayTpl Testing attributes
    By cwolcott in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: May 15, 2014, 12:35 PM
  5. [CLOSED] Textfield losing focus when button is enabled
    By RCM in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 29, 2012, 8:07 PM

Tags for this Thread

Posting Permissions