Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Tagfield - clear typed text after selection

  1. #1
    Sencha Premium Member
    Join Date
    Jun 2015
    Posts
    32
    Answers
    3
    Vote Rating
    0
      0  

    Default Tagfield - clear typed text after selection

    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

  2. #2
    Sencha User yeghikyan's Avatar
    Join Date
    Mar 2009
    Location
    Mnchen
    Posts
    443
    Answers
    80
    Vote Rating
    37
      1  

    Default

    Code:
    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()
            });    
        }
    });
    The competent programmer is fully aware of the strictly limited size of his own skull; therefore he approaches the programming task in full humility, and among other things he avoids clever tricks like the plague.

  3. #3
    Sencha Premium User
    Join Date
    Jun 2016
    Posts
    140
    Answers
    3
    Vote Rating
    40
      0  

    Default

    Quote Originally Posted by yeghikyan View Post
    Code:
    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.

  4. #4
    Sencha User
    Join Date
    Apr 2013
    Posts
    837
    Answers
    104
    Vote Rating
    169
      0  

    Default

    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.

  5. #5
    Sencha Premium User
    Join Date
    Jun 2016
    Posts
    140
    Answers
    3
    Vote Rating
    40
      0  

    Default

    Quote Originally Posted by hakimio View Post
    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.

  6. #6
    Sencha User
    Join Date
    Apr 2013
    Posts
    837
    Answers
    104
    Vote Rating
    169
      0  

    Default

    Quote Originally Posted by niallobrien View Post
    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?

  7. #7
    Sencha Premium User
    Join Date
    Mar 2015
    Posts
    39
    Vote Rating
    0
      0  

    Default

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

  8. #8
    Sencha User
    Join Date
    Apr 2013
    Posts
    837
    Answers
    104
    Vote Rating
    169
      0  

    Default

    Try the following override:
    Code:
    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();
            }
        }
    });

  9. #9
    Sencha User
    Join Date
    Apr 2013
    Posts
    837
    Answers
    104
    Vote Rating
    169
      0  

    Default

    Try the following override:
    PHP Code:
    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();
            }
        }
    }); 

  10. #10
    Sencha Premium User
    Join Date
    Mar 2015
    Posts
    39
    Vote Rating
    0
      0  

    Default

    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.

Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 1
    Last Post: 14 Sep 2015, 11:25 AM
  2. Tagfield loses selection on drag&drop
    By MarcelEngineer in forum Ext 5: Bugs
    Replies: 3
    Last Post: 31 Oct 2014, 8:34 AM
  3. Get Combobox text value which i typed
    By wwwbetyar in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 1 Nov 2011, 9:40 AM
  4. How do I get the value of typed text in a typeahead combobox
    By crafter in forum Ext 1.x: Help & Discussion
    Replies: 4
    Last Post: 5 Sep 2007, 7:30 PM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •