Results 1 to 2 of 2

Thread: TagField - autoSelect and createNewOnEnter issue

  1. #1
    Sencha User kellerkichel's Avatar
    Join Date
    Mar 2018
    Posts
    4
    Answers
    1

    Default Answered: TagField - autoSelect and createNewOnEnter issue

    Hi, I'm having trouble applying 'tagfield' to my project, if anyone has any experience with the component, it follows the detail of my problem.


    Fiddle:
    https://fiddle.sencha.com/#view/editor&fiddle/2h2u


    Simulation:
    1. Type anything in the search
    2. Note that no option is "active" in the listing due to the 'autoselect false' flag.
    3. Press the down key to select the first option (do not use the mouse)
    4. Press Enter to choose
    5. 2 items will be added in the field: what you typed + 'Keller'
    6. Remove focus from the field (with the mouse click away) and then focus again (click on the field).
    7. Note that now the next available option (Marcello) is preselected.



    Expected:
    1. When choosing an option add only the option chosen in the field.
    2. Create a new one with ENTER when there are no chosen / pre-selected options.
    3. When closing and opening the list of options does not bring any option checked.

  2. With some overrides I make these work like I want:

    Code:
        // autoSelect and forceSelecion: false reset selection
        // @autoSelect and forceSelecion: false
        doAutoSelect: function() {
            const me = this;
    
    
            if (!me.autoSelect && !me.forceSelection) {
                me.picker.getNavigationModel().setPosition(null);
            }
    
    
            me.callParent();
        },
    
    
        // always reset input text
        clearInput: function() {
            const me = this,
                inputValue = me.inputEl && me.inputEl.dom.value;
    
    
            me.callParent();
    
    
            if (inputValue) {
                me.inputEl.dom.value = '';
            }
        },
    
    
        // on select a new reg with ENTER with autoSelect false remove next selection at list
        // @autoSelect: false, createNewOnEnter: true
        onKeyUp: function(e) {
            const me = this;
    
    
            me.callParent(arguments);
    
    
            if (!me.autoSelect && me.createNewOnEnter && e.getKey() === e.ENTER) {
                me.picker.getNavigationModel().setPosition(null);
                me.picker.setHighlightedItem(null);
            }
        }
    Any tips will be welcome

    # ​fiddle atualizado

  3. #2
    Sencha User kellerkichel's Avatar
    Join Date
    Mar 2018
    Posts
    4
    Answers
    1

    Default

    With some overrides I make these work like I want:

    Code:
        // autoSelect and forceSelecion: false reset selection
        // @autoSelect and forceSelecion: false
        doAutoSelect: function() {
            const me = this;
    
    
            if (!me.autoSelect && !me.forceSelection) {
                me.picker.getNavigationModel().setPosition(null);
            }
    
    
            me.callParent();
        },
    
    
        // always reset input text
        clearInput: function() {
            const me = this,
                inputValue = me.inputEl && me.inputEl.dom.value;
    
    
            me.callParent();
    
    
            if (inputValue) {
                me.inputEl.dom.value = '';
            }
        },
    
    
        // on select a new reg with ENTER with autoSelect false remove next selection at list
        // @autoSelect: false, createNewOnEnter: true
        onKeyUp: function(e) {
            const me = this;
    
    
            me.callParent(arguments);
    
    
            if (!me.autoSelect && me.createNewOnEnter && e.getKey() === e.ENTER) {
                me.picker.getNavigationModel().setPosition(null);
                me.picker.setHighlightedItem(null);
            }
        }
    Any tips will be welcome

    # ​fiddle atualizado

Similar Threads

  1. tagfield issue
    By bindumisra in forum Ext JS 6.x Q&A
    Replies: 2
    Last Post: 16 Jul 2017, 5:06 AM
  2. Replies: 3
    Last Post: 5 Jul 2017, 6:11 AM
  3. [FIXED] TagField creates two tags when using createNewOnEnter
    By tgr.joint in forum Ext JS 6.x Bugs
    Replies: 1
    Last Post: 25 Jan 2016, 3:27 PM
  4. [DUP] tagfield issue
    By bindu misra in forum Ext JS 6.x Bugs
    Replies: 1
    Last Post: 25 Sep 2015, 10:32 AM

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
  •