Input field doesn't get cleared after choosing the value in the ExtJS tag field

Question

I have the ExtJS tag field with anyMatch = true. Now if you type AB it will show the result and once you choose the selection it will clear the input you have entered i.e. AB Now when you have anyMatch= true that time if I type HI it will show you the result but when you choose the value the input field doesn't get cleared. I saw the ExtJS Tag field code it is handled explicitly in clearInput method. I wanted to know why this is implemented in this way ? Below is the sample code

    Ext.create('Ext.form.Panel', {
    title: 'Tag Field Example',
    width: 1000,
    bodyPadding: 10,

    items: [{
        xtype: 'fieldcontainer',
        labelWidth: 100,
        layout: 'hbox',
        items: [{
            xtype: 'fieldcontainer',
            defaults: {
                flex: 1,
            },
            layout: 'hbox',
            items: [{

                xtype: 'tagfield',
                minChars: 1,
                anyMatch: true,
                allowBlank: true,
                margin: '5 5 5 5',
                fieldLabel: 'Tag Field 1',
                name: 'tagField1',
                store: ['ABC D', 'EFG HI', 'C'],
                queryMode: 'local',
                filterPickList: true,
                emptyText: 'Multi Select...'
            }]
        }]
    }],
    renderTo: Ext.getBody()
});

Answer 1

This seems to be a bug. If you take a look at the clearInput method from the tagfield class definition, and specifically at the section with the early return:

if (!Ext.String.startsWith(lastDisplayValue, inputValue, true)) {
    return;
}

You can see that they discard clearing of the field if the last selected tag field value does not start with the typed input value ('abc d' starts with 'ab' so the field is cleared; 'efg hi' does not start with 'hi' - so the clearing is discarded).

This will clearly not work when you have the anyMatch config enabled.

The early return section from above, should be something like this:

if (!me.anyMatch) {
    if (!Ext.String.startsWith(lastDisplayValue, inputValue, true)) {
        return;
    }
} else {
    if (lastDisplayValue.toLowerCase().indexOf(inputValue.toLowerCase()) === -1) {
        return;
    }
}

We keep the initial check when anyMatch is not enabled, otherwise, we check if the typed input values is included in the last selected tag field value.

Here is a fiddle with the proposed override: https://fiddle.sencha.com/#view/editor&fiddle/32q0