Results 1 to 5 of 5

Thread: TagField drop down list is not closing if user clicks outside the field

    This duplicates another bug already reported in our system: EXTJS-20150
  1. #1
    Sencha Premium Member
    Join Date
    Jan 2016
    Posts
    2

    Default TagField drop down list is not closing if user clicks outside the field

    I am expecting the tagfield drop down list to close if user clicks outside the field or on some other ext js component. Like in example: http://examples.sencha.com/extjs/6.0...crisp#form-tag

    Instead when I use tagfields in a form the drop down remain opens even if I click on some other field in the form or somewhere else. Sample code below:

    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',
                    allowBlank: true,
                    margin: '5 5 5 5',
                    fieldLabel: 'Tag Field 1',
                    name: 'tagField1',
                    store: ['A', 'B', 'C'],
                    queryMode: 'local',
                    filterPickList: true,
                    emptyText: 'Multi Select...'
                }, {
                    xtype: 'tagfield',
                    allowBlank: true,
                    margin: '5 5 5 5',
                    fieldLabel: 'Tag Field 2',
                    name: 'tagField2',
                    store: ['A', 'B', 'C'],
                    queryMode: 'local',
                    filterPickList: true,
                    emptyText: 'Multi Select...'
                }, {
                    allowBlank: true,
                    xtype: 'tagfield',
                    margin: '5 5 5 5',
                    fieldLabel: 'Tag Field 3',
                    queryMode: 'local',
                    store: ['A', 'B', 'C'],
                    filterPickList: true,
                    emptyText: 'Multi Select...',
                    name: 'tagField3'
                }]
            }]
        }],
        renderTo: Ext.getBody()
    });
    https://fiddle.sencha.com/#fiddle/13m3

    I am using Ext JS 6.0.1.250

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985

    Default

    Thanks for the report! I have opened a bug in our bug tracker.

  3. #3
    Sencha Premium Member
    Join Date
    Sep 2011
    Posts
    1

    Default

    Any update on this issue? It is affecting our customers.

  4. #4
    Sencha Premium Member
    Join Date
    Sep 2015
    Posts
    4

    Default

    Here is the override we are using in V5.1.3. It basically reverts some of the listener code back to the version that was used in V5.1.1. It seems to be working for us. I'm not sure if it will work for V6.

    Code:
    Ext.define('QLP.override.form.field.PickerOverride', {
        override    : 'Ext.form.field.Picker',
        
        /**
         * Expands this field's picker dropdown.
         */
        expand: function() {
            var me = this,
                bodyEl, ariaDom, picker, doc;
        
            if (me.rendered && !me.isExpanded && !me.isDestroyed) {
                bodyEl = me.bodyEl;
                picker = me.getPicker();
                doc = Ext.getDoc();
                picker.setMaxHeight(picker.initialConfig.maxHeight);
                
                if (me.matchFieldWidth) {
                    picker.width = me.bodyEl.getWidth();
                }
        
                // Show the picker and set isExpanded flag. alignPicker only works if isExpanded. 
                picker.show();
                me.isExpanded = true;
                me.alignPicker();
                bodyEl.addCls(me.openCls);
        
                me.hideListeners = doc.on({
                    mousewheel: me.collapseIf,
                    touchstart: me.collapseIf,
                    scope: me,
                    delegated: false,
                    destroyable: true
                });
                
                // Buffer is used to allow any layouts to complete before we align 
                Ext.on('resize', me.alignPicker, me, {buffer: 1});
                me.fireEvent('expand', me);
                me.onExpand();
            }
        },
        
        /**
         * Collapses this field's picker dropdown.
         */
        collapse: function() {
            var me = this;
            
            if (me.isExpanded && !me.isDestroyed && !me.destroying) {
                var openCls = me.openCls,
                    picker = me.picker,
                    aboveSfx = '-above';
     
                // hide the picker and set isExpanded flag 
                picker.hide();
                me.isExpanded = false;
     
                // remove the openCls 
                me.bodyEl.removeCls([openCls, openCls + aboveSfx]);
                picker.el.removeCls(picker.baseCls + aboveSfx);
     
                // remove event listeners 
                me.hideListeners.destroy();
                
                Ext.un('resize', me.alignPicker, me);
                me.fireEvent('collapse', me);
                me.onCollapse();
            }
        },
        
        /**
         * @private
         * Runs on touchstart of doc to check to see if we should collapse the picker.
         */
        collapseIf: function(e) {
            var me = this;
     
            // If what was mousedowned on is outside of this Field, and is not focusable, then collapse. 
            // If it is focusable, this Field will blur and collapse anyway. 
            if (!me.isDestroyed && !e.within(me.bodyEl, false, true) && !me.owns(e.target)) {
                me.collapse();
            }
        }
    });

  5. #5

    Default

    collapseOnSelect: true
    Thanks
    Albanir Neves

Similar Threads

  1. TagField show the user that the list has run empty.
    By alexander.urban in forum Ext JS 6.x Q&A
    Replies: 1
    Last Post: 29 Oct 2015, 11:19 AM
  2. Closing a Modal Popup when user Clicks Outside
    By dmoore1 in forum Ext 5: Q&A
    Replies: 2
    Last Post: 9 Jul 2015, 12:49 PM
  3. Replies: 1
    Last Post: 2 Apr 2014, 11:24 AM
  4. Replies: 1
    Last Post: 24 Sep 2012, 8:31 AM

Posting Permissions

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