Extjs 6.0.1 TagField Uncaught Error with multiSelect: false

Question

I have the following tagfield declaration:

  {
    xtype: 'tagfield',
    fieldLabel: 'Sex',
    labelAlign: 'right',
    name: 'sex',
    multiSelect: false,
    queryMode: 'local',
    displayField: 'sexName',
    valueField: 'sex',
    allowBlank: false,
    flex: 1,
    editable: true,
    growMax: 45,
    store: Ext.create('Ext.data.Store', {
        autoLoad: true,
        fields: ['sexName', 'sex'],
        data: [{
          sexName: 'mail',
          sex: 'mail'
        },{
          sexName: 'femail',
          sex: 'femail'
        }]
    })
  }

When I try to set tagfield's value to a combobox, I would expect this to work but I get the following error in the console.

[E] Ext.form.field.ComboBox.doSetValue(): Cannot add values to non multiSelect ComboBox Uncaught Error: Cannot add values to non multiSelect ComboBox

What am I doing wrong?

Thanks for your help!

Answer 1

We have had similar problem. (We working with ExtJs 5 though)

We needed combo with free text input that allows only one value to be selected/entered at a time. So, we took TagField and set multiSelect to false . It started behave weird and possibility of free text input has gone.

The solution, that I believe, will solve the problem of original question:

1. return multiSelect to be true again
2. add listener to change event and change the value to be the last selected by user

Using code example from question:

{
xtype: 'tagfield',
fieldLabel: 'Sex',
labelAlign: 'right',
name: 'sex',
multiSelect: true,
queryMode: 'local',
displayField: 'sexName',
valueField: 'sex',
allowBlank: false,
flex: 1,
editable: true,
growMax: 45,
listeners: {        
    change: function (field, newValue ,oldValue ,eOpts) {           
            newValue = newValue.filter(function(el) {
               return el !== oldValue[0];
            });
            this.setValue(newValue );
        }  
    }
},

...
}

The oldValue is an array that contains only one element (previous value). The newValue is an array that contains two elements: previous value and new selected value.