Combo tire sélectionne l'événement après l'événement focusleave

Question

Pourriez-vous s'il vous plaît dire à quelqu'un comment empêcher les incendies de sélectionner l'événement sur la zone de liste déroulante lorsque la mise au point est terminée?

Answer 1

Le problème se produit parce que le combo force la sélection, même si l'utilisateur n'a pas réellement choisi une autre valeur.

Il existe plusieurs façons de contourner ce problème.

1. Utilisez l'auditeur de sélection sans forceSelection
2. Utilisez l'auditeur de changement avec forceSelection

deux façons, l'utilisateur devra choisir un élément dans la liste déroulante (qui est, sans doute, pourquoi vous utilisé la configuration forceSelection en premier lieu).

Test the workaround in fiddle

Answer 2

C'est un bug

Correspond theme on Sencha Forum

Answer 3

J'ai eu le même problème dans extjs 6.5.2 modern. J'utilisais un combobox avec queryMode: 'remote', forceSelection: true, un itemTpl personnalisé et je choisissais un article en utilisant l'événement select. @ La solution de Jzf n'a pas fonctionné pour moi (j'ai utilisé l'événement change aussi) donc j'ai dû suspendre l'événement select sur focusleave et le reprendre sur focusenter.

Ce n'est pas une solution de contournement très propre, mais il fait le travail pour mon cas. Voici le code complet pour mon 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> 
       } 
      }