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()
});

score 2 · Accepted Answer · answered Jan 17 '20 at 09:29

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

Yes, I have seen this. I wanted to know if there are some intentions behind doing this ???? — sadique urf arbaz, Jan 17 '20 at 09:37
I think this is an omission. Tag field inherits the `anyMatch` config from the combobox field. I guess they have added support for the combo first, but then forgot to update the tag field class to also support this. — scebotari66, Jan 17 '20 at 09:43

score 0 · Answer 2 · answered Mar 17 '21 at 11:38

I used arrays for multi string values (list item: Lincoln Abraham, input value: Abraham Lin).
That way method to checks if it matches properly.
In my implenmentation last part of the input string is used as wildcarded string. It also solves the problem where list item is reversed compare to input string, which was in my case.

   clearInput: function() {
    var me = this,
      valueRecords = me.getValueRecords(),
      inputValue = me.inputEl && me.inputEl.dom.value,
      lastDisplayValue;
    if (valueRecords.length && inputValue) {
      lastDisplayValue = valueRecords[valueRecords.length - 1].get(me.displayField);

      let inputValueArr = inputValue.split(' ');
      let lastDisplayValueArr = lastDisplayValue.split(' ');
      let matchCount = 0;
      Ext.each(inputValueArr, function(iv, idx1, arr1) {
        Ext.each(lastDisplayValueArr, function(ldv, idx1, arr2) {
          if (!me.anyMatch) {
            if (Ext.String.startsWith(ldv, iv, true)) {
              matchCount++;
            }
          } else {
            if (ldv.toLowerCase().indexOf(iv.toLowerCase()) !== -1) {
              matchCount++;
            }
          }
        });
      });
      if (matchCount < inputValueArr.length) {
        return;
      }
      me.inputEl.dom.value = '';
      if (me.queryMode === 'local') {
        me.clearLocalFilter();
        // we need to refresh the picker after removing
        // the local filter to display the updated data
        me.getPicker().refresh();
      }
    }
  }

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

2 Answers2