[FIXED] [#1223] [3.3] TextField is unfocused when right button is clicked

Page 1 of 2 12 LastLast
  1. #1

    [FIXED] [#1223] [3.3] TextField is unfocused when right button is clicked

    Focus "Focus Me" TextField, then click on "Add" button. TextField lost focus and RightButtons were hidden. Is that the expected behaviour since RightButtons are children of TextField?

    If it's the expected behaivour, do you have any suggestions to stop hiding right buttons?

    <!DOCTYPE html>
    <html>
    <head runat="server">
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:TextField FieldLabel="Focus Me" AutoFocus="true" RightButtonsShowMode="Focus" runat="server" >
            <RightButtons>
                <ext:Button runat="server" Icon="Add" />
            </RightButtons>
        </ext:TextField>
    </body>
    </html>
    Last edited by Daniil; Jan 15, 2016 at 8:26 AM. Reason: [FIXED] [#1223] [3.3]
  2. #2
    On the following example, press "Add" button (and do not release). Button is gonna be hidden and the click handler is not gonna be fired.

    <!DOCTYPE html>
    <html>
    <head runat="server">
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:TextField FieldLabel="Focus Me" AutoFocus="true" RightButtonsShowMode="Focus" runat="server">
            <RightButtons>
                <ext:Button runat="server" Icon="Add">
                    <Listeners>
                        <Click Handler="alert(123);" />
                    </Listeners>
                </ext:Button>
            </RightButtons>
        </ext:TextField>
    </body>
    </html>
  3. #3
    Hello, just a heads up, the event fires as long as you don't release the mouse button before the textfield button reappears.

    At least here, the button is just hidding briefly and showing up again. Seems that this is not the case for you, and the button is getting dismissed until you focus out and back in?

    I got the same 'brief dismiss' behavior on both IE11 and Chrome 47.
    Fabrício Murta
    Developer & Support Expert
  4. #4
    Hello, again,

    The fix proposed in #881 (see forum thread) seems to address the issue.

    Can you confirm this and give us a feedback on that thread as well? If so, we can just finally apply the proposed fix in Ext.NET, effective immediately in SVN and released publicly in the upcoming Ext.NET 3.2.2.
    Fabrício Murta
    Developer & Support Expert
  5. #5
    The fix proposed in #881 (see forum thread) seems to address the issue.
    As far i can see (tested), the fix proposed in #881 does not address and is not related to the issue presented on this task.

    At least here, the button is just hidding briefly and showing up again. Seems that this is not the case for you, and the button is getting dismissed until you focus out and back in?
    If i release the button when it's hidden, the click event is not fired but if i wait it to appear again, the event is fired. In my opinion the button should not flash.
  6. #6
    I believe I've mixed some changes, you are right...

    I noticed I can't reproduce the issue with RightButtonsShowMode="MouseOverOrFocus".

    If this addresses the issue for you, is this an acceptable alternative for now?
    Fabrício Murta
    Developer & Support Expert
  7. #7
    I noticed I can't reproduce the issue with RightButtonsShowMode="MouseOverOrFocus".

    If this addresses the issue for you, is this an acceptable alternative for now?
    It's not. As said before, in my opinion it should not flash.

    On the following example focus first field and mouse over the second one. The right buttons are show in both field, what is not acceptable from my side.

    <!DOCTYPE html>
    <html>
    <head runat="server">
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:FormPanel Margin="10" Title="Ext.NET" BodyPadding="5" DefaultAnchor="100%" Width="200" runat="server">
            <FieldDefaults LabelAlign="Top" />
            <Items>
                <ext:TextField FieldLabel="Field" RightButtonsShowMode="MouseOverOrFocus" runat="server">
                    <RightButtons>
                        <ext:Button runat="server" Icon="Add" />
                    </RightButtons>
                </ext:TextField>
                <ext:TextField FieldLabel="Field" RightButtonsShowMode="MouseOverOrFocus" runat="server">
                    <RightButtons>
                        <ext:Button runat="server" Icon="Add" />
                    </RightButtons>
                </ext:TextField>
                <ext:TextField FieldLabel="Field" RightButtonsShowMode="MouseOverOrFocus" runat="server">
                    <RightButtons>
                        <ext:Button runat="server" Icon="Add" />
                    </RightButtons>
                </ext:TextField>
                <ext:TextField FieldLabel="Field" RightButtonsShowMode="MouseOverOrFocus" runat="server">
                    <RightButtons>
                        <ext:Button runat="server" Icon="Add" />
                    </RightButtons>
                </ext:TextField>
                <ext:TextField FieldLabel="Field" RightButtonsShowMode="MouseOverOrFocus" runat="server">
                    <RightButtons>
                        <ext:Button runat="server" Icon="Add" />
                    </RightButtons>
                </ext:TextField>
                <ext:TextField FieldLabel="Field" RightButtonsShowMode="MouseOverOrFocus" runat="server">
                    <RightButtons>
                        <ext:Button runat="server" Icon="Add" />
                    </RightButtons>
                </ext:TextField>
                <ext:TextField FieldLabel="Field" RightButtonsShowMode="MouseOverOrFocus" runat="server">
                    <RightButtons>
                        <ext:Button runat="server" Icon="Add" />
                    </RightButtons>
                </ext:TextField>
                <ext:TextField FieldLabel="Field" RightButtonsShowMode="MouseOverOrFocus" runat="server">
                    <RightButtons>
                        <ext:Button runat="server" Icon="Add" />
                    </RightButtons>
                </ext:TextField>
                <ext:TextField FieldLabel="Field" RightButtonsShowMode="MouseOverOrFocus" runat="server">
                    <RightButtons>
                        <ext:Button runat="server" Icon="Add" />
                    </RightButtons>
                </ext:TextField>
                <ext:TextField FieldLabel="Field" RightButtonsShowMode="MouseOverOrFocus" runat="server">
                    <RightButtons>
                        <ext:Button runat="server" Icon="Add" />
                    </RightButtons>
                </ext:TextField>
                <ext:TextField FieldLabel="Field" RightButtonsShowMode="MouseOverOrFocus" runat="server">
                    <RightButtons>
                        <ext:Button runat="server" Icon="Add" />
                    </RightButtons>
                </ext:TextField>
                <ext:TextField FieldLabel="Field" RightButtonsShowMode="MouseOverOrFocus" runat="server">
                    <RightButtons>
                        <ext:Button runat="server" Icon="Add" />
                    </RightButtons>
                </ext:TextField>
                <ext:TextField FieldLabel="Field" RightButtonsShowMode="MouseOverOrFocus" runat="server">
                    <RightButtons>
                        <ext:Button runat="server" Icon="Add" />
                    </RightButtons>
                </ext:TextField>
                <ext:TextField FieldLabel="Field" RightButtonsShowMode="MouseOverOrFocus" runat="server">
                    <RightButtons>
                        <ext:Button runat="server" Icon="Add" />
                    </RightButtons>
                </ext:TextField>
            </Items>
        </ext:FormPanel>
    </body>
    </html>
  8. #8
    Hello! I've just logged this issue in #1223.

    It seems the flashing issue could be addressed with the override below. But there's yet another problem that keeps focusing back those fields. I.e. when you click out, the focus will be brought back to the TextField. It seems this happens only when using Right/Left buttons' functionality.

        <script>
            Ext.override(Ext.form.field.Text, {
                postBlur: function () {
                    this.callSuper(arguments);
    
                    var componentId = this.id;
    
                    // Do not hide it if the button clicked is inside the textfield.
                    if (!event.target.id || !Ext.fly(event.target).findParent(function (dom) { return dom.id == componentId })) {
                        this.setButtonsHidden(true, this.getButtonsSide(this.leftButtons && (this.leftButtonsShowMode == "focus" || this.leftButtonsShowMode == "mouseoverorfocus"),
                                                                         this.rightButtons && (this.rightButtonsShowMode == "focus" || this.rightButtonsShowMode == "mouseoverorfocus")));
                    } else {
                        if (!this.hasFocus) {
                            this.focus();
                        }
                    };
                }
            });
        </script>
    EDIT: I've just logged another issue -- found while trying to fix the brief hiding of the button. It is under #1224.
    Last edited by fabricio.murta; Jan 12, 2016 at 11:36 PM.
    Fabrício Murta
    Developer & Support Expert
  9. #9
    it's possible to overcome the issue by doing the following:

    Ext.form.field.Text.override({
        postBlur: function () {
            var activeComponent = Ext.ComponentManager.getActiveComponent();
            if (activeComponent == null || activeComponent.ownerCt != this) {
                this.callParent(arguments);
            }
        }
    })
  10. #10
    On the following example when Add button is pressed, TextField's is blurred, then validated due to ValidateOnBlur, and Add button click event is not fired.

    <!DOCTYPE html>
    <html>
    <head runat="server">
    </head>
    <body>
        <ext:ResourceManager ScriptMode="Debug" runat="server" />
      <ext:FormPanel Margin="10" Title="Ext.NET" BodyPadding="5" DefaultAnchor="100%" Width="200" runat="server">
            <FieldDefaults LabelAlign="Top" MsgTarget="Side" />
            <Items>
                <ext:TextField FieldLabel="Field" AllowBlank="false" RightButtonsShowMode="Focus" runat="server">
                    <RightButtons>
                        <ext:Button runat="server" Icon="Add">
                            <Listeners>
                                <Click Handler="alert('click');" />
                            </Listeners>
                        </ext:Button>
                    </RightButtons>
                </ext:TextField>
            </Items>
        </ext:FormPanel>
    </body>
    </html>
    it's possible to overcome the issues presented above by doing the following:

    <!DOCTYPE html>
    <html>
    <head runat="server">
        <script type="text/javascript">
            Ext.form.field.Text.override({
                onBlur: function (e) {
                    if (this.leftButtons || this.rightButtons) {
                        var activeComponent = Ext.ComponentManager.getActiveComponent();
                        if (activeComponent != null && activeComponent.ownerCt == this) {
                            e.stopImmediatePropagation();
                            e.preventDefault();
                        }
                    }
                    this.callParent(arguments);
                }
            });
        </script>
    </head>
    <body>
        <ext:ResourceManager ScriptMode="Debug" runat="server" />
        <ext:FormPanel Margin="10" Title="Ext.NET" BodyPadding="5" DefaultAnchor="100%" Width="200" runat="server">
            <FieldDefaults LabelAlign="Top" MsgTarget="Side" />
            <Items>
                <ext:TextField FieldLabel="Field" AllowBlank="false" RightButtonsShowMode="Focus" runat="server">
                    <RightButtons>
                        <ext:Button runat="server" Icon="Add">
                            <Listeners>
                                <Click Handler="alert('click');" />
                            </Listeners>
                        </ext:Button>
                    </RightButtons>
                </ext:TextField>
            </Items>
        </ext:FormPanel>
    </body>
    </html>
    Last edited by RaphaelSaldanha; Jan 14, 2016 at 4:29 PM.
Page 1 of 2 12 LastLast

Similar Threads

  1. FileUploadField reset when Button is clicked
    By asian3689 in forum 2.x Help
    Replies: 2
    Last Post: Nov 03, 2014, 7:21 AM
  2. Replies: 14
    Last Post: Aug 16, 2013, 1:57 PM
  3. Replies: 6
    Last Post: Feb 21, 2013, 4:44 AM
  4. Replies: 2
    Last Post: Sep 27, 2011, 1:49 PM
  5. Replies: 3
    Last Post: Feb 02, 2010, 6:32 PM

Posting Permissions