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

Hybrid View

Previous Post Previous Post   Next Post Next Post
  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 9: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

Similar Threads

  1. Replies: 1
    Last Post: Jun 05, 2020, 3:42 PM
  2. Replies: 2
    Last Post: Sep 11, 2017, 7: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, 7:55 AM
  4. Replies: 4
    Last Post: Jun 11, 2013, 6:02 AM
  5. Replies: 3
    Last Post: Mar 07, 2013, 1:26 PM

Tags for this Thread

Posting Permissions