Combo fires select event after focusleave event

Question

Could you please tell somebody how prevent fires select event on combobox when focus leave ?

Answer 1

I had the same issue in extjs 6.5.2 modern. I was using a combobox with queryMode: 'remote', forceSelection: true, a custom itemTpl and i was choosing an item using the select event. @Jzf's solution didn't worked for me (i used the change event too) so i had to suspend the select event on focusleave and resume it on focusenter.

That's not a very clean workaround but it does the job for my case. Here is the full code for my combobox:

            {
                xtype: 'combobox',
                store: Ext.create('demo.store.search.SearchComboStore'),
                valueField: 'id',
                displayField: 'name',
                queryMode: 'remote',
                queryParam: 'name',
                triggerAction: 'all',
                allQuery: '',
                minChars: 1,
                forceSelection: true,
                matchFieldWidth: false,
                //[modern] added floated picker config here in order to set the minWidth property for the floated picker
                floatedPicker: {
                    minWidth: (Ext.getBody().getWidth() / 2)
                },
                itemTpl:
                    '<div class="ucResultsTable" style="width:' + (Ext.getBody().getWidth() / 2) + 'px">' +
                        '<div class="ucResultsTableCell" style="width:15%"><b>{value1}</b></div>' +
                        '<div class="ucResultsTableCell" style="width:15%">{value2}</div>' +
                        '<div class="ucResultsTableCell" style="width:15%">{value3}</div>' +
                        '<div class="ucResultsTableCell" style="width:15%">{value4}</div>' +
                        '<div class="ucResultsTableCell" style="width:15%">{value5}</div>' +
                    '</div>',
                listeners: {
                    select: function (comboBox, records, eOpts) {
                        var container = comboBox.up('app-container-panel');
                        container.fireEvent('selectComboItem', container, records.data);
                    },
                    //<Workaround> 
                    //blur/focusleave is firing select event
                    //and changes the record selection
                    focusleave: function (comboBox) {
                        comboBox.suspendEvent('select');
                    },
                    focusenter: function (comboBox) {
                        comboBox.resumeEvent('select');
                    }
                    //</Workaround>
                }
            }

Answer 2

THis is a bug

Correspond theme on Sencha Forum

Answer 3

The problem occurs because the combo forces the selection, even when the user hasn't actually selected another value.

There are a couple of ways to workaround this issue.

1. Use the select listener without forceSelection
2. Use the change listener with forceSelection

Both ways, the user will have to choose an item from the combo list (which is, probably, why you used the forceSelection config in the first place).

Test the workaround in fiddle