How can we get selectOnFocus: true functionality in Ext JS 6.6 Modern toolkit?

Question

Ext JS 6.6

Classic toolkit, a textfield has selectOnFocus : true/false so the data in the text field is all selected when the component obtains focus

items: [{
  xtype: 'textfield',
  selectOnFocus: true
}]

Modern toolkit does not have this attribute. I understand the need between modern being all compliant with CSS3 and well suited for mobile devices and the differences between working with mobile devices. With Modern toolkit you can accomplish this with

Ext.ComponentQuery.query('#textfield')[0].focus(true);

This is good when writing code. But the issue I've discovered is in using Sencha Test and the following code

it("Checking existing email error notification", function () {
  ST.component('textfield[name=\"createemail\"]').click();
  ST.play([
    { type: "type", target: "textfield[name=\"createemail\"] => input", text: "someemail.email.com", caret:0 }
  .... additional code here
  ]);
});
it("Some test", function() {
  ST.component('textfield[name=\"createemail\"]').click();
  .... additiona code here
});

In the second test block clicking in the textfield will not select all the text so if I want to replace the existing text it has to be cleared or insertion point occurs starting in a random location.

So how can we get selectOnFocus: true functionality in the Modern toolkit?

I can see some instances where this is actually more important to have this functionality in Modern because on mobile ctrl 'a' is not an option.

Answer 1

You can get the desired behavior using my override:

Ext.define('Ext.field.TextOverride', {
    override: 'Ext.field.Text',
    onFocus: function (e) {
        var me = this,
            focusTarget, focusElDom;

        this.callParent(arguments)
        var me = this,
            focusTarget, focusElDom;

        if (focusTarget = me.getFocusEl()) {

            focusElDom = focusTarget.dom;

            if (focusElDom) {
                focusTarget.focus();
                if (me.selectOnFocus && (me.selectText || focusElDom.select)) {
                    if (me.selectText) {
                        if (Ext.isArray(selectText)) {
                            me.selectText.apply(me, selectText);
                        } else {
                            me.selectText();
                        }
                    } else {
                        focusElDom.select();
                    }
                }
            }
        }
    }
});

Fiddle

PS You can't use `focus(true) in your tests?