SitePen JavaScript Support in Action

Dojo Ninjas,

I would like one bug fixed in the Dojo Toolkit.

When you run Dojo on PhoneGap/Android (every version tested) you get a tap highlight when you click on the dojox tabbar (and listitems, etc). No amount of CSS will fix this.

It is actually an Android bug, but I need a workaround. Anything you could do for us?

Thanks, Steve

SitePen

Hi Steve,

The outline on ListItem and ToolBarButton widgets appears to be caused by the browser setting an outline style, which is not being overwritten by the dojox/mobile theme:

	:focus {
		outline: -webkit-focus-ring-color auto 5px;
	}
	

We have submitted a pull request to discuss and correct this issue. Alternatively, the outline can be overwritten on affected elements such as those with mblToolBarButton or mblListItem classes to remove the highlight color when they are focused:

	.mblToolBarButton:focus, .mblListItem:focus {
		outline-color: rgba(255, 255, 255, 0);
	}
	

Please let us know if this fixes your issue, and if you have any other questions. Thanks!

SitePen

Hi Steve,

Thank you for the updated information. We were able to reproduce your issue in older versions of Android. When loading an example page into an Android 4.3 browser, we are able to reproduce the issue observed in the video. It appears that this flash is occurring because the buttons are focusable, having a tabindex attribute set. If this attribute is removed, the issue goes away.

The default tabindex value of 0 is set in dojox/mobile/_ItemBase, which both TabBar and ListItem widgets (among others) inherit from. The fix will depend on how these widgets are constructed in your application. If parseOnLoad is set to true in your dojoConfig, then the easiest way would be to set tabIndex:null in the data-dojo-props attribute:

	<li
		data-dojo-type="dojox/mobile/TabBarButton"
		data-dojo-props="tabIndex:null, icon1:'images/tab-icon-16.png', icon2:'images/tab-icon-16h.png', moveTo:'featured'"
	>Featured</li>
	

If creating the widgets programmatically, then tabIndex can be passed in to the constructor:

	var button = new TabBarButton({
		tabIndex: null,
		// ...
	});
	

Alternatively, this value could be set for all widgets that extend from _ItemBase:

	require([
		'dojo/parser',
		'dojox/mobile/_ItemBase',
		// additional modules that are used declaratively
		'dojo/domReady!'
	], function (parser, _ItemBase) {
		// set the default tabIndex to null before the parser is run
		_ItemBase.prototype.tabIndex = null;

		// then call the parser
		parser.parse();
	});
	

For posterity, it was actually an issue reported to Android, and their response was basically that they won’t fix it because it’s an old version of Android.

Please let us know if this fixes your issue, and if you have any other questions. Thanks!

BuyWinR

Thank you. I tried this on the TabBar and it worked like magic. I appreciate your instructions, as we create widgets both ways. I am very happy with this result.

It’s a big relief for me to have this fixed. I spent 1 year doing R&D on our problem space, and selecting the best technology stack available, and another year learning the stack and writing code.

Just a quick note on Dojo. I selected this framework as we are aiming to support 99% of smartphones, every major language, support accessibility, and so on. We needed a platform that was truly enterprise grade as we are aiming to have some of the biggest companies as customers, together with millions of end users. Going through this support process has confirmed in my mind that we made the right choice.