Tagfield - clear typed text after selection

[ktare]

I have forceSelection as false in my tagfield.
Suppose if I type "cali", then California is shown in search result. When I press enter, California tag is added to the field, but the typed text "cali" is not removed. It just stays there. It seems weird because I would like the typed text to be cleared when I do the selection from result. There is no purpose for it to be there after a selection has been made. It must be cleared so that I can search for a new tag.

Can I achieve this somehow?
Here is my fiddle.
https://fiddle.sencha.com/#fiddle/10ij

[yeghikyan]

Ext.application({    name : 'Fiddle',


    launch : function() {
        var states = Ext.create('Ext.data.Store', {
            fields: ['stateId', 'name'],
            data : [
                {"stateId":"1", "name":"Alabama"},
                {"stateId":"2", "name":"New Mexico"},
                {"stateId":"3", "name":"California"},
                {"stateId":"4", "name":"New York"}
            ]
        });
        
        Ext.create('Ext.form.field.Tag', {
            fieldLabel: 'Choose',
            store: states,
            queryMode: 'local',
            displayField: 'name',
            valueField: 'stateId',
            margin: '5 0 0 0',
            multiSelect: true,
            filterPickList: true,
            forceSelection: false,
            queryMode: 'local',
            delimiter : null,
            width: 300,
            listeners: {
                'select': function(combo, record) {
                    combo.inputEl.dom.value = '';
                }
            },
            renderTo: Ext.getBody()
        });    
    }
});

[niallobrien]

Ext.application({    name : 'Fiddle',


    launch : function() {
        var states = Ext.create('Ext.data.Store', {
            fields: ['stateId', 'name'],
            data : [
                {"stateId":"1", "name":"Alabama"},
                {"stateId":"2", "name":"New Mexico"},
                {"stateId":"3", "name":"California"},
                {"stateId":"4", "name":"New York"}
            ]
        });
        
        Ext.create('Ext.form.field.Tag', {
            fieldLabel: 'Choose',
            store: states,
            queryMode: 'local',
            displayField: 'name',
            valueField: 'stateId',
            margin: '5 0 0 0',
            multiSelect: true,
            filterPickList: true,
            forceSelection: false,
            queryMode: 'local',
            delimiter : null,
            width: 300,
            listeners: {
                'select': function(combo, record) {
                    combo.inputEl.dom.value = '';
                }
            },
            renderTo: Ext.getBody()
        });    
    }
});

Thanks, this worked perfectly - specifically setting value of the field within the select listener.

[hakimio]

It's an old bug which was fixed in 6.0.2 . If you are using older version, you can try to apply old override. The override was meant for v5.1.1, so you might have to edit it a little bit to work with the version you are using.

[niallobrien]

It's an old bug which was fixed in 6.0.2 . If you are using older version, you can try to apply old override. The override was meant for v5.1.1, so you might have to edit it a little bit to work with the version you are using.

I'm using the latest version. In my instance, I've a list of users populating the tagfield, so when I partially type a name eg. Niall - and then navigate to my name with the keyboard, it's not clearing my initial keystrokes. What's strange is that it will clear it correctly for the first tag, but not for all subsequent tags. The above method of setting the value to an empty string resolved the issue in my case.

[hakimio]

it will clear it correctly for the first tag, but not for all subsequent tags.

That's strange. It works for me every time. Can you create a simple fiddle to show this behavior?

[valgussev]

Here is the fiddle . You can start to type with foo, than select the corresponding value, foo will be left in the field.

[hakimio]

Try the following override:

Ext.define('MyApp.overrides.TagField', {
    override: 'Ext.form.field.Tag',

    updateValue: function()
    {
        var me = this,
            inputEl = me.inputEl;

        me.callParent();

        //FIX: clear input field after user selects some value
        if (inputEl)
            inputEl.dom.value = '';

        if (me.queryFilter && me.queryMode === 'local' && me.clearFilterOnBlur)
        {
            me.clearLocalFilter();
            me.collapse();
        }
    }
});

[hakimio]

Try the following override:

Ext.define('MyApp.overrides.TagField', {
    override: 'Ext.form.field.Tag',

    updateValue: function()
    {
        var me = this,
            inputEl = me.inputEl;

        me.callParent();

        //FIX: clear input field after user selects some value
        if (inputEl)
            inputEl.dom.value = '';

        if (me.queryFilter && me.queryMode === 'local' && me.clearFilterOnBlur)
        {
            me.clearLocalFilter();
            me.collapse();
        }
    }
}); 

[valgussev]

Thank you, the override is working as well as the option with select as suggested above. I just wanted to point out the issue is still exists even in the 6.5 version.