ToolbarButton remains latched (pressed) after clicking with 9.5 vs 9.0 simple flash

asked 2020-11-30 19:59:36 +0800

54patman gravatar image 54patman
13 3

Previous to release 9.5 the ToolbarButton would simply flash/click and return to it's unclicked state after a user click. Now when clicked the ToolbarButton will remain latched/depressed/selected.

I could not find any release notes regarding this change of behavior.

My workaround is to add this to most of my buttons: tb.setWidgetListener(Events.ON_FOCUS, "this.$n().blur();");

I don't like this solution because I need to add it in many places, as well it doesn't always work or provide the behavior that I had before.

I wanted to make a zkfiddler but my credentials didn't work and I tried both email and username of this forum's credentials, maybe a bug? But here is the simple code.

Select 9.1 and click and see the buttons simply flash. Then restart and select 9.5 and see the button remain pressed when clicked.

  <window border="normal" title="hello" >
<toolbar overflowPopup="true" width="350px" style="border: 1px black solid;">
    <toolbarbutton label="one" iconSclass="z-icon-home"/>
    <toolbarbutton label="two" iconSclass="z-icon-home"/>
    <toolbarbutton label="three" iconSclass="z-icon-home"/>
    <toolbarbutton label="four" iconSclass="z-icon-home"/>
    <toolbarbutton label="five" iconSclass="z-icon-home"/>
    <toolbarbutton label="six" iconSclass="z-icon-home"/>


delete flag offensive retag edit


about zkfiddle login, thanks for the hint, I created https://tracker.zkoss.org/browse/ZKFIDDLE-5

cor3000 ( 2020-12-01 11:46:55 +0800 )edit

zkfiddle login works again

cor3000 ( 2020-12-01 16:10:05 +0800 )edit

thanks I can now login into zkfiddler

54patman ( 2020-12-01 19:47:10 +0800 )edit

4 Answers

Sort by ยป oldest newest most voted

answered 2020-12-01 16:18:48 +0800

hawk gravatar image hawk
2785 1 5
http://hawkphoenix.blogsp... ZK Team

It's caused by rendering tabindex="0" in 9.5 for WCAG. The following js can override toolbarbutton widget to make it not to render tabindex.

 * Purpose: remove tabindex from DOM attributes
 * Based on version:
zk.afterLoad('zul.wgt', function() {
    var exWidget = {};
    zk.override(zul.wgt.Toolbarbutton.prototype, exWidget, {
        domAttrs_: function (no) {
            var attr = exWidget.domAttrs_.apply(this, arguments);
            let regularExpression = /tabindex=".*"/
            attr = attr.replace(regularExpression, "");
            return attr;
link publish delete flag offensive edit


thanks that worked!

54patman ( 2020-12-01 20:14:52 +0800 )edit

what's WCAG and why was the tabindex added by default? thanks

54patman ( 2020-12-01 20:16:00 +0800 )edit

after testing your regex will replace from the first occurrence to the end of the attr string, and will remove my disable="disable" on a TB, the .* captures too much. But changing it to let regularExpression = /tabindex="\d"/ works for me. Thanks!

54patman ( 2020-12-01 21:30:13 +0800 )edit


cor3000 ( 2020-12-02 15:24:54 +0800 )edit

answered 2020-12-01 22:40:18 +0800

54patman gravatar image 54patman
13 3

Ok so I have a working solution thanks @hawk.

It works on desktop chrome but has no effect on mobile chrome. I'm running the latest version of both. Even on desktop chrome in debug mode (F12) and in "Toggle Device" and selecting Pixel 2, the toolbarbutton remains latched when clicked.

I looked at the elements of the DOM and there is no tabindex so the new function is removing it.

Any ideas what's going on?

link publish delete flag offensive edit

answered 2020-12-02 12:59:52 +0800

hawk gravatar image hawk
2785 1 5
http://hawkphoenix.blogsp... ZK Team

updated 2020-12-02 13:00:20 +0800

What you see in a mobile chrome is a different thing. It's caused by :hover. In a mobile browser, when you click a <a>, it will trigger :hover status. So the toolbarbutton whose is rendered as <a> underlying will show its :hover style which is expected even in the previous ZK version.

.z-toolbarbutton:hover {
    color: #FFFFFF;
    border-color: transparent;
    background-color: #7ac8ff;

You can remove that style specifically by CSS media query.

link publish delete flag offensive edit


@hawk thanks! I wrapped CSS in @media (hover: none) {} and change the values to transparent, but now I lost the animation effect of the click. I'll investigate some more.

54patman ( 2020-12-02 23:31:58 +0800 )edit

answered 2020-12-02 23:53:08 +0800

54patman gravatar image 54patman
13 3

For anyone looking for what I did here is my complete solution.

This will maintain the similar click animation of the toolbarbutton and not keep it latched/depressed on a mobile device with no mouse.

@media (hover: none) {
    .z-toolbarbutton:hover {
        color: rgba(0,0,0,0.57);
        border-color: transparent;
        background-color: transparent;
    .z-toolbarbutton[disabled] {
        color: rgba(0,0,0,0.34) !important;
        border-color: transparent;
        background-color: #D9D9D9;
    .z-toolbarbutton:active {
        color: #FFFFFF;
        border-color: transparent;
        background-color: #0064ED;
link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

1 follower



Asked: 2020-11-30 19:59:36 +0800

Seen: 17 times

Last updated: Dec 02 '20

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More