New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SelectOnFocus for text fields (TextArea, TextField) is ignored (always true) #1441

Closed
fabriciomurta opened this Issue Feb 21, 2017 · 4 comments

Comments

Projects
None yet
1 participant
@fabriciomurta
Contributor

fabriciomurta commented Feb 21, 2017

Found: 4.2.0
Ext.NET Thread: SelectText problem
Sencha thread (assumed as fixed but seems fix is not perfect): ExtJS 6.0.2: Text fields focus on select regardless of selectOnFocus config

In either Ext.Net.TextArea or Ext.Net.TextField, focusing the field always selects all the text in the input field, ignoring the SelectOnFocus setting. The sencha thread above says it has been fixed in ExtJS as of 6.0.3 (thus 6.2.0 and 6.2.1) but according to post #8 on sencha thread above, the fix also introduces an issue where the cursor is always moved to the end -- which would likely prevent the selectText() method from working.

The same post mentioned above also suggested an override that works nicely with the test case provided. A reviewed test case with the provided in Ext.NET thread and the override from Sencha thread would be:

<%@ Page Language="C#" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>61783v4 - selectText() issue</title>
    <script type="text/javascript">
        // solution from: https://www.sencha.com/forum/showthread.php?310439&p=1170408&viewfull=1#post1170408
        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]);
            }
        });
    </script>
</head>
<body>
    <ext:ResourceManager runat="server"/>
    <ext:TextArea
        ID="txtA1"
        runat="server"
        Height="70"
        Width="710"
        MaxLength="1000"
        EnforceMaxLength="true"
        Text="lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum "
        SelectOnFocus="true"
         />

    <ext:Button ID="Button2" runat="server" Text="Select" >
        <Listeners>
            <Click Handler="App.txtA1.focus(); App.txtA1.selectText(5,9);" />
            <Focus Handler="return false;" />
        </Listeners>
    </ext:Button>
</body>
</html>

The Sencha forum thread evolves for having the issue partly fixed in a nightly build after 6.2.1 by jan 10th 2017, and support team double checks the bug has been fixed in the nightly by feb 9th 2017.

@fabriciomurta

This comment has been minimized.

Show comment
Hide comment
@fabriciomurta

fabriciomurta Feb 21, 2017

Contributor

The fix above has been applied on Ext.NET.

Contributor

fabriciomurta commented Feb 21, 2017

The fix above has been applied on Ext.NET.

@fabriciomurta

This comment has been minimized.

Show comment
Hide comment
@fabriciomurta

fabriciomurta Feb 21, 2017

Contributor

Well leave it open so that we remember to review on next ExtJS merge.

Contributor

fabriciomurta commented Feb 21, 2017

Well leave it open so that we remember to review on next ExtJS merge.

@fabriciomurta

This comment has been minimized.

Show comment
Hide comment
@fabriciomurta

fabriciomurta Jul 21, 2017

Contributor

Update: Sencha issue EXTJS-20985 allegedly fixed in ExtJS 6.0.3 release.

Contributor

fabriciomurta commented Jul 21, 2017

Update: Sencha issue EXTJS-20985 allegedly fixed in ExtJS 6.0.3 release.

@fabriciomurta

This comment has been minimized.

Show comment
Hide comment
@fabriciomurta

fabriciomurta Sep 14, 2017

Contributor

Update: Sencha issue EXTJS-20985 allegedly fixed in ExtJS 6.0.3 release.

Contributor

fabriciomurta commented Sep 14, 2017

Update: Sencha issue EXTJS-20985 allegedly fixed in ExtJS 6.0.3 release.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment