dojox/mobile/Switch: template in test is broken

[Adrian Vasiliu]

dojox/mobile/Switch is broken in the (optional) templated use-case.

How to reproduce: load dojox/mobile/tests/test_Templated-widgets.html in any browser: most of the time (not always, in particular on mobile devices), the layout of the page is broken and the console shows: parse() error, "Cannot set property 'width' of undefined"

This is a consequence of the new code introduced in Switch.js for #15076, more precisely the code introduced initially inside postCreate() (​https://github.com/dojo/dojox/commit/5abd3a3fd5c8fc7237096a2d16bb38b45d5a526e) and later moved inside resize() (​https://github.com/dojo/dojox/commit/5cfae8a68a6948baef4714cb36e068816efc7d88 ). Both variants of the code break the templating of the Switch.

The failure is because ​https://github.com/dojo/dojox/blob/master/mobile/Switch.js#L148 makes the blind assumption that the first child of this.left can be styled, which is not necessarily the case with a template. I have verified that the issue still hurts if test_Templated-widgets.html is modified to use manual parsing instead of parseOnLoad:true.

[Sebastien Pereira]

Thanks for reporting this. In fact the problem is related to the way template is parsed and translated into nodes.

The structure of the template used in this test is correct (here I removed the styling declaration for clarity)

<span>
	<div data-dojo-attach-point="inner">
		<div data-dojo-attach-point="left">
			<div>ON</div>
		</div>
		<div data-dojo-attach-point="right">
			<div>OFF</div>
		</div>
		<div data-dojo-attach-point="knob"></div>
		<input type="hidden" value="on" data-dojo-attach-point="input">
	</div>
</span>

When we address the "left" node child with this.left.firstChild it returns white text instead of a reference to an HTML DIV element.

This log statement:

console.log("this.left.firstChild [tagName:textContent] = [" + this.left.firstChild.tagName + ":" + this.left.firstChild.textContent + "]");

Output this:

this.left.firstChild [tagName:textContent] = [undefined:
			]

Now if we declare the template like this, removing spaces between both DIV elements:

<span>
	<div data-dojo-attach-point="inner">
		<div data-dojo-attach-point="left"><div>ON</div>
		</div>
		<div data-dojo-attach-point="right">
			<div>OFF</div>
		</div>
		<div data-dojo-attach-point="knob"></div>
		<input type="hidden" value="on" data-dojo-attach-point="input">
	</div>
</span>

We are able to reference the element we expect to find as child. Same log stmt gives this result:

this.left.firstChild [tagName:textContent] = [DIV:ON]

Solution is to remove spaces from the template string (see ​https://bugs.dojotoolkit.org/ticket/14891).

I will update dojox/mobile/tests/templates/Switch1.html to remove white spaces, then close this as duplicate of ​https://bugs.dojotoolkit.org/ticket/8494.

[bill]

Changing summary to indicate that we are just treating this like a test problem.

[Adrian Vasiliu]

Sebastien's change in the template consists in working around the dijit/_Templated issue #8494 (which is currently pending for 1.x while you fixed it for 2.0). So in my eyes the initial title of the present ticket was more appropriate (and factual).

[Sebastien Pereira]

fixed in ​https://github.com/dojo/dojox/commit/f7893a862fae8e9ce38faf0053015dde4eb54109