[FIXED] [#1542] [4.5.0] Unable to Focus TextField that has EmptyText using Tablet

  1. #1

    [FIXED] [#1542] [4.5.0] Unable to Focus TextField that has EmptyText using Tablet

    Starting with 4.3, I am no longer able to focus inside of a TextField that has EmptyText set using a tablet. I tested the following using the iPad emulator in Chrome F12.

    <%@ Page Language="C#" %>
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Input Mask - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
        <style type="text/css">
            .x-form-item-body {
                height: initial
            }
        </style>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:Window
                ID="Window1"
                runat="server"
                Width="550"
                Title="Input Mask"
                Closable="false"
                Layout="Form"
                BodyPadding="5">
                <Defaults>
                    <ext:Parameter Name="LabelWidth" Value="200" />
                </Defaults>
                <Items>
                    <ext:TextField EmptyText="user"></ext:TextField>
                    <ext:TextField EmptyText="password"></ext:TextField>
                </Items>
            </ext:Window>
       </form>
    </body>
    </html>

    I am using the following code as an override to fix this issue -- but not sure what larger issues this patch could cause:
    Ext.define('fixTouchFocus', {
        override: 'Ext.form.field.Text',
        initEvents: function () {
            var me = this, el = me.inputEl;
            me.superclass.initEvents();
            if (me.selectOnFocus) {
                me.mon(el, 'mousedown', me.onMouseDown, me);
            }
            if (me.maskRe || me.vtype && me.disableKeyFilter !== true && (me.maskRe = Ext.form.field.VTypes[me.vtype + 'Mask'])) {
                me.mon(el, 'keypress', me.filterKeys, me);
            }
            if (me.enableKeyEvents) {
                me.mon(el, { scope: me, keyup: me.onKeyUp, keydown: me.onKeyDown, keypress: me.onKeyPress });
            }
        }
    });
    Last edited by fabricio.murta; Oct 14, 2017 at 7:08 PM.
  2. #2
    Hello @tylert!

    Thanks once again for not only a clearly runnable and simplified test case, but also for the bug report and also the suggestion of workaround that works for you! We really appreciate it!

    Good news is that Sencha's ExtJS, our underlying framework, has this fixed as of its current unreleased code, that will either be soon made available as 6.5.2 (currently we are at 6.5.1) or a newer version if it comes down to a major version release.

    Bad news would be that we can't just get their fix until they fully release it to the public.

    But to counter the bad news, aside of the override that worked for you, the related sencha thread topic has another override proposal that may work better than yours, as it seems another user investigated the history of the issue to determine the point where it really triggered.

    Well, we are gathering details on the #1542 github issue and to make life easier for you, here's the override suggested from Sencha community:

    Ext.define("Ext.overrides.form.field.Text", {
        override: "Ext.form.field.Text",
        squashMouseUp: {
            mouseup: function (e) {
                if (this.selectOnFocus) {
                    this.inputEl.dom.select();
                }
            },
            translate: false, // uncommenting fixes the issue
            single: true,
            preventDefault: true
        }
    });
    I'm just confused that you got this only starting from Ext.NET 4.3. This been around since ExtJS 6.2.1, which was part of Ext.NET 4.2. But anyway, the fix seems to work. I didn't really look up your version of the fix. If it works for you, it works but if you're worried about it breaking something else, I believe using the override above is the safe choice for the time being.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    My mistake, it did start with 4.2. Thank you for sharing that override -- I ran into an issue with my override and this one works better.
  4. #4
    Hello, @tylert!

    Just checked out this bug and the tied Sencha thread, stating it was fixed in ExtJS 6.5.2 is true! In other words, to-be-released Ext.NET 4.5.0, which includes ExtJS 6.5.2 has this issue addressed!

    We'll soon release Ext.NET 4.5.0.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 6
    Last Post: Sep 20, 2017, 12:40 AM
  2. [CLOSED] Textfield: Problem with EmptyText in IE 10
    By supera in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Feb 04, 2014, 12:39 PM
  3. [CLOSED] Keep EmptyText on Focus
    By SouthDeveloper in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Dec 12, 2012, 10:24 AM
  4. Replies: 3
    Last Post: Apr 29, 2009, 3:53 PM
  5. TextField.EmptyText and Radio's
    By dlouwers in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Jan 13, 2009, 12:26 PM

Posting Permissions