[OPEN] [#1833] Tooltip on initially disabled button

Page 1 of 2 12 LastLast
  1. #1

    [OPEN] [#1833] Tooltip on initially disabled button

    Hello support team,
    please take a look at this simple example:

    @using Ext.Net;
    @using Ext.Net.MVC;
    
    @{
        ViewBag.Title = "Tooltip on button";
        Layout = null;
    
        var X = Html.X();
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <title>Ext.NET MVC Test Case</title>
    </head>
    
    <body>
        @(X.ResourceManager())
    
        @X.DisplayField().ID("version").ReadOnly(true).Margin(10).Width(200)
    
        @X.Button().ID("button").Text("Button With Tooltip").Margin(10).ToolTip("tooltip").Disabled(true).StyleSpec("pointerEvents: all")
    
        @X.Button().Text("Toggle").Margin(10).OnClientClick("Ext.getCmp('button').setDisabled(!Ext.getCmp('button').disabled)")
    </body>
    </html>
    
    <script type="text/javascript">
        Ext.onReady(function () {
            Ext.getCmp("version").setValue("Ext JS " + Ext.getVersion().version + " / " + "Ext.NET " + Ext.net.Version);
        });
    </script>
    1. When the button is initially disabled, the tooltip is not activated until after the first cycle of enabling/disabling the button, and from this moment on it is only displayed for the disabled state.

    2. When the button is initially enabled, the tooltip will only show properly after the page has been loaded and the button has been disabled for the first time, and from then on only for the disabled state.

    3. When the pointerEvents style is removed and the button is initially disabled, the tooltip will never appear.

    4. When the pointerEvents style is removed and the button is initially enabled, the tooltip is displayed only after the page is loaded, it is never displayed again after the first disabling/enabling cycle.

    Can you please find a solution to this behavior that ensures that the tooltip is always displayed, especially if the button is initially disabled and then enabled / disabled according to the needs of the application?

    Thank you.

    Tested on Ext JS 7.1.0.46 / Ext.NET 5.1.0.

    Kind regards
    Dan
  2. #2
    Hello Dan!

    Thanks for the simple test case and report! It seems this is a reasonably old issue introduced around Ext JS 5.2, when Ext.NET was version 3 still. Unfortunately Sencha is aware of the issue and still has not fixed it.

    In the tests here, I could take away that pointerEvents: all StyleSpec from the button and it works fine for me. That is, it does not change how the issue reproduces. Maybe this is specific to a browser or version? Tested just with google Chrome here.

    The good news though is that a simple listener to the button can get rid of what's broken in the button during the enable/disable journey. Add this to your button and let us know if it does not still break:

    .Listeners(l => l.Enable.Handler = "this.el.dom.setAttribute('data-qtip', this.tooltipEl.getAttribute('data-qtip'));")
    We have logged this issue under github as #1833 and will post back as soon as we get this fixed for good in the code. It would help though, if you let us know that listener is all that takes to cure the issue in your environment and, if not, maybe give directions on what's left on the test case to reproduce what's not fixed by this work around.

    Looking forward to your follow-up!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hello Fabrício,
    thank you for an answer. This workaround works well only if the button is initially enabled and pointerEvents: all StyleSpec is included:

        @(X.Button().ID("button").Text("Button With Tooltip").Margin(10).ToolTip("tooltip").Disabled(false).StyleSpec("pointerEvents: all")
            .Listeners(l => l.Enable.Handler = "this.el.dom.setAttribute('data-qtip', this.tooltipEl.getAttribute('data-qtip'));")
        )
    1. Button initially enabled + pointerEvents: OK.

    2. Button initially enabled - pointerEvents: tooltip appears only for enabled state.

    3. Button initially disabled + pointerEvents: after the page load the tooltip is not activated, after first button enabling it then goes well for both states.

    4. Button initially disabled - pointerEvents: tooltip appears only for enabled state.

    The same behavior can be observed both in this simple example and in our much more complex framework.

    Tested on Ext JS 7.1.0.46 / Ext.NET 5.1.0 / Chrome 86.0.4240.111 / Firefox 81.0.2 / MS Edge 86.0.622.51.

    Thank you for assistance.

    Kind regards
    Dan
    Last edited by NewLink; Oct 22, 2020 at 10:58 PM.
  4. #4
    Hello Dan!

    I'm afraid this issue was partially fixed between Ext.NET 5.1.0 and 5.2.0 then. The way you describe is as if there's no "disabled layer" in the button to display tooltips.

    Is there anything in particular keeping you from upgrading from 5.1.0 to 5.2.0? I don't recall any change that may have imposed unintented breaking changes between the two.
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Hello Fabrício,
    thank you for the suggestion. Once we are ready to upgrade to version 5.2.0, I will test it again and let you know.

    Thank you for your help.

    Kind regards
    Dan
  6. #6
    Hello Fabrício,
    just to give you an update on this issue... tested on Ext.NET 5.3.0 / Ext JS 7.3.1.27 and the resulting behavior is still as described in #3.

    Kind regards
    Dan
  7. #7
    Hello Dan!

    It's strange, I am pretty confident Ext.NET 5.2.0 behaved differently than 5.1.0 -- and I checked, no regression regarding that in 5.3.0. I may have missed something.

    Will review it and let you know what I reproduce here.
    Fabrício Murta
    Developer & Support Expert
  8. #8
    Hello again, Dan!

    There must be something wrong either in the changes you applied to your code or how I am trying to reproduce the issue.

    Please take a look at the current view code I'm using

    @using Ext.Net;
    @using Ext.Net.MVC;
    
    @{
        ViewBag.Title = "Tooltip on button";
        Layout = null;
    
        var X = Html.X();
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <title>Ext.NET MVC Test Case</title>
    </head>
    
    <body>
        @X.ResourceManager()
    
        @(
            X.DisplayField()
                .ID("version")
                .ReadOnly(true)
                .Margin(10)
                .Width(200)
        )
    
        @(
            X.Button()
                .ID("button")
                .Text("Button With Tooltip")
                .Margin(10)
                .ToolTip("tooltip")
                .Disabled(false)
                .Listeners(l => l.Enable.Handler = "this.el.dom.setAttribute('data-qtip', this.tooltipEl.getAttribute('data-qtip'));")
        )
    
        @(
            X.Button()
                .Text("Toggle")
                .Margin(10)
                .OnClientClick("Ext.getCmp('button').setDisabled(!Ext.getCmp('button').disabled)")
        )
    </body>
    </html>
    
    <script type="text/javascript">
        Ext.onReady(function () {
            Ext.getCmp("version").setValue("Ext JS " + Ext.getVersion().version + " / " + "Ext.NET " + Ext.net.Version);
        });
    </script>
    And here's the result if I toggle the initial "enabled" state of the button (line 35) we want the tooltip to show on: Animated GIF.

    In no circumstance I am:
    - trying to add pointerEvents: all style spec
    - having the tooltip not to show in either enabled/disabled button state

    The behavior is the exact same from Ext.NET 5.2.0, and the version used here, as the gifv depicts, is 5.3.0. There must be something else getting in the way of your tests that you still require the CSS style and the initial enabled status affects the behavior. I cannot tell what's wrong though. You may want to try a new project with Ext.NET 5.3.0 to see if you still reproduce the same behavior. As you claimed the issue was reproducible in other browsers as well as Chrome, I'm not testing every other browser. Let us know if now the issue is limited to another browser set.
    Fabrício Murta
    Developer & Support Expert
  9. #9
    Hi Fabrício,
    I apologize for the late response, but somehow I overlooked the email notification of your reply.

    Because I had more confidence in your conclusion than in my test case, I delved deeper into the code and started debugging the dom elements.

    I found out that the problem was in the used theme, where the definition of the x-btn-tooltip class was missing. When added manually, it began to behave as you described.

    Thank you for your help, the thread may be closed.

    Kind regards
    Dan
  10. #10
    Hello Dan!

    Glad you could find out what's wrong... Is that a custom theme you use in your project, or that's in a theme shipped with Ext.NET? I basically tried the code using Ext.NET's default theme, Triton. And if that's specific to the other themes, we could make a permanent fix in the code besides the fix already pending to the remaining issue (which was provided a workaround here, for the time being).

    Looking forward to your follow-up!
    Fabrício Murta
    Developer & Support Expert
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 1
    Last Post: Jun 05, 2020, 4:42 PM
  2. Replies: 2
    Last Post: Sep 11, 2017, 8:35 PM
  3. [CLOSED] Button appears as disabled after .disabled = false set
    By registrator in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 28, 2015, 8:55 AM
  4. Replies: 4
    Last Post: Jun 11, 2013, 7:02 AM
  5. Replies: 3
    Last Post: Mar 07, 2013, 2:26 PM

Tags for this Thread

Posting Permissions