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

Thread: ExtJS 6.0.2: Text fields focus on select regardless of selectOnFocus config

    Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-20985 in 6.0.3.
  1. #1
    Sencha Premium Member
    Join Date
    Oct 2010
    Location
    Dallas, TX
    Posts
    25

    Default ExtJS 6.0.2: Text fields focus on select regardless of selectOnFocus config

    After upgrading to ExtJS 6.0.2, textfields/textareas always select/highlight existing text when focused regardless of the selectOnFocus attribute.

    Looks like it is caused by this change in Ext.form.field.Text:

    Code:
        squashMouseUp: {
            mouseup: function(e) {
                this.inputEl.dom.select();
            },
            translate: false,
            single: true,
            preventDefault: true
        },

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

    Default

    Thanks for the report. I'm not seeing the behavior in this Fiddle:
    https://fiddle.sencha.com/#fiddle/193g

    Are you able to reproduce this in a test case?
    https://fiddle.sencha.com/#home

  3. #3
    Sencha Premium Member
    Join Date
    Oct 2010
    Location
    Dallas, TX
    Posts
    25

    Default

    Ahhh, that was frustrating for a few minutes... apparently you have to have emptyText defined as well:

    https://fiddle.sencha.com/#fiddle/193k

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

    Default

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

  5. #5
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    30

    Default

    Did this fix make it into 6.2.x? It looks like it's still broken in the OP's fiddle using a 6.2 classic theme. Seems to work on modern themes though.

  6. #6
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    30

    Default

    I think it may be a change between 6.2.0 and 6.2.1 that broke it again for the classic framework:

    6.2.0:

    Code:
        onFocus: function(e) {
           ...
            // This handler may be called when the focus has already shifted to another element;
            // calling inputEl.select() will forcibly focus again it which in turn might set up
            // a nasty circular race condition if focusEl !== inputEl.
            Ext.asap(function() {
                // This ensures the carret will be at the end of the input element
                // while tabbing between editors.
                if (!me.destroyed && document.activeElement === me.inputEl.dom) {
                    len = me.inputEl.dom.value.length;
                    me.selectText(me.selectOnFocus ? 0 : len, len);     <------ This line changed in 6.2.1
                }
            });
         ...
       },
    6.2.1:

    Code:
        onFocus: function(e) {
           ...
            // This handler may be called when the focus has already shifted to another element;
            // calling inputEl.select() will forcibly focus again it which in turn might set up
            // a nasty circular race condition if focusEl !== inputEl.
            if (!me.focusTimer) {
                startValue = inputEl.value;
                me.focusTimer = Ext.asap(function() {
                    me.focusTimer = null;
                    // This ensures the carret will be at the end of the input element
                    // while tabbing between editors.
                    if (!me.destroyed && document.activeElement === inputEl) {
                        value = inputEl.value;
                        len = value.length;
                        
                        // If focusing has fired an event which mutated the value,
                        // place the caret at the end. Else select the initial text
                        // as is the HTML default behaviour.
                        me.selectText(value !== startValue ? len : 0, len);   <----- Should this be checking this.focusOnSelect ?
                    }
                });
            }
          ...
        },

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

    Default

    Thanks for letting us know. Indeed, I see the same behavior regression between 6.2.0 and 6.2.1. Apologies for that. The good news is that it's already been fixed as I can't recreate the issue using a recent nightly release.

  8. #8
    Sencha Premium User
    Join Date
    Nov 2013
    Posts
    6

    Default

    The nightly for 1/10/2017 has a fix, but it forces the caret to the end of the field, instead of where you click, like you'd expect. Instead of the nightly's fix, I did this as a workaround.

    Code:
    Ext.define('MyApp.overrides.form.field.Text', {    
        override: 'Ext.form.field.Text',
        onFocus: function (e) {
            var me = this,
                inputEl = me.inputEl.dom,
                startValue, value, len;
    
            //////////////////////////////////////////////////////////////////////////////////////////
            //////////////////////////////////////////////////////////////////////////////////////////
            // Changing call to callSuper instead of callParent to skip the original method         //
            //////////////////////////////////////////////////////////////////////////////////////////
            //////////////////////////////////////////////////////////////////////////////////////////
            me.callSuper([e]);
    
            //////////////////////////////////////////////////////////
            //////////////////////////////////////////////////////////
            // Added check for selectOnFocus                        //
            //////////////////////////////////////////////////////////
            //////////////////////////////////////////////////////////
            if (me.selectOnFocus) {
                // This handler may be called when the focus has already shifted to another element;
                // calling inputEl.select() will forcibly focus again it which in turn might set up
                // a nasty circular race condition if focusEl !== inputEl.
                if (!me.focusTimer) {
                    startValue = inputEl.value;
                    me.focusTimer = Ext.asap(function () {
                        me.focusTimer = null;
                        // This ensures the carret will be at the end of the input element
                        // while tabbing between editors.
                        if (!me.destroyed && document.activeElement === inputEl) {
                            value = inputEl.value;
                            len = value.length;
    
                            // If focusing has fired an event which mutated the value,
                            // place the caret at the end. Else select the initial text
                            // as is the HTML default behaviour.
                            me.selectText(value !== startValue ? len : 0, len);
                        }
                    });
                }
            }
            
    
            if (me.emptyText) {
                me.autoSize();
            }
    
            me.addCls(me.fieldFocusCls);
            me.triggerWrap.addCls(me.triggerWrapFocusCls);
            me.inputWrap.addCls(me.inputWrapFocusCls);
            me.invokeTriggers('onFieldFocus', [e]);
        }
    });

  9. #9
    Sencha User
    Join Date
    Apr 2013
    Posts
    137

    Default

    Great Workaround! Thanks jjdoyle
    This bug is in ExtJs 6.2.1 and hope to be solved in next versions.

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

    Default

    I see the end-of-field issue in the 1/10 build, but not when I test against a recent nightly. You'll want to be sure to remove this override when you eventually upgrade.

Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 2
    Last Post: 4 Jul 2012, 12:32 AM
  2. Android: Two fields show up on text field focus
    By iamcam in forum Sencha Touch 1.x: Bugs
    Replies: 14
    Last Post: 14 Feb 2012, 7:19 AM
  3. Select content of EditorGrid fields when focus received via tabbing
    By AdamDawes in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 5 Sep 2008, 12:56 AM
  4. do not select existing text in text field when focus via tab key
    By mjlecomte in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 13 Jul 2008, 6:23 PM

Posting Permissions

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