EXTJS 6.7: Tag field - How to disable multi select of the same values?

Question

Using ExtJs 6.7, I'm having issues with tag field which allows to select the same tag twice from the list. Use case: I'm using tag field with remote store. Tag field is created and populated with tags (with setValue(counties)). For the sake of the case these tags are: United States, United kingdom, Gemrany, Austria, Australia. Then user starts to search in tag field and searches for states starting with "Unit", which loads 2 countries from remote country provider into store. In our case United States and United kingdom. And here are two problems.

These two loaded countries are not marked as already selected in the tag field picker (like they are the first time field store is loaded)
User can select one or both of the countries and they actualy get added to the field (which is wrong. Can't think of any use case that would need same record twice in the field)

So I'm trying to figure out where to properly override (hack) the combo/tag field methods to check selected records in picker or to just filter out selected values if they already exist in valueStore. Or if this default behaviour it actually desired, can anybody please explain to me how to limit this as I need it.

Here is the fiddle. Even though store loads same results when changing search string, results should be marked as selected in picker.
https://fiddle.sencha.com/#view/editor&fiddle/3bf8

Any help appreciated.
Regards
Armando

Fabio Barros Fabio Barros · Accepted Answer · 2021-01-26T12:14:30

if you had a static store, you could just use:

filterPickList: true,

that removes the already selected entries from the combo, but with dynamic data, you have to check if the values are already picked:

listeners:{
    beforeselect:function  ( combo, record, index, eOpts ) {
                    
        if (combo.getValue().indexOf(record.data['ID'])!=-1) return false;
                    
     }
}

EDIT:

Try this solution with template to mark the list as selected when the combo reloads:

listConfig: {
             itemTpl: new Ext.XTemplate(
                '<tpl for=".">',
                '  <div  ',
                '  <tpl if="this.isSelected(ID)"> ',
                '     class="x-boundlist-selected" ' ,
                '  </tpl>',
                '  ><span>{NAME}</span></div>' ,
                '</tpl>',
              {
                isSelected: function(id){
                    return (this.owner.up("tagfield").getValue().indexOf(id)!=-1);
                },
            })
       },

Remember to remove the "filterPickList"

here is a working sample FIDDLE

EXTJS 6.7: Tag field - How to disable multi select of the same values?

1 Answers