-
FEATURED COMPONENTS
First time here? Check out the FAQ!
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.
<zk>
<window border="normal" title="hello" >
<div>
<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"/>
</toolbar>
</div>
</window>
</zk>
Thanks
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: 9.5.0.2
*/
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;
},
});
});
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?
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.
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;
}
}
Asked: 2020-11-30 19:59:36 +0800
Seen: 17 times
Last updated: Dec 02 '20
about zkfiddle login, thanks for the hint, I created https://tracker.zkoss.org/browse/ZKFIDDLE-5
cor3000 ( 2020-12-01 11:46:55 +0800 )editzkfiddle login works again
cor3000 ( 2020-12-01 16:10:05 +0800 )editthanks I can now login into zkfiddler
54patman ( 2020-12-01 19:47:10 +0800 )edit