SitePen JavaScript Support in Action

By on September 30, 2015 1:20 pm

SitePen’s team of JavaScript experts provide high quality development and production support to a wide range of companies, from the Fortune 500 to small startups.

Recently, we had the opportunity to assist BuyWinR, a company based in Brisbane, Australia. In this case, we went from initial inquiry to solution in less than 48 hours. To provide insight into how a typical support issue might be solved, the founder of BuyWinR has allowed us to share this story.

Wednesday, 3:18am PT

We received an initial inquiry from Steve via the contact form on our website:

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

We love a good challenge! BuyWinR signed up for SitePen Support and submitted information about the issue.

Thursday, 2:11pm PT

With additional information about his ticket (which was replicated in the Dojo issue tracker so it could also be fixed at Dojo) and an open support request, we worked on an initial solution:

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!

Friday, 2:52am PT

It turned out that there were actually two issues at play. We identified and proactively fixed a different highlighting issue that was causing problems than the one he had in mind. With a little more investigation, we were able to suss out and replicate the customer’s original issue.

Friday, 10:53am PT

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:

	
  • Featured
  • 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!

    Friday, 1:30pm PT

    Success!

    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.

    Final thoughts from our customer

    When the Android browser presented us with a bug we simply couldn’t work around (too much coffee wasn’t enough), we turned to SitePen for support. The response we received far exceeded our expectations. We had a response back in minutes, the issue resolved overnight and even a personal note from the CEO. We found all the staff we dealt with friendly and helpful. Highly recommended!

    – Steve

    Getting JavaScript Support

    Our team at SitePen helps solve JavaScript problems and bugs, with both open source code as well as your custom web applications. Contact us to discuss your project, or for more information about our JavaScript support plans.

    searchingFor

    Comments