Opened 5 years ago

Closed 5 years ago

#18048 closed defect (fixed)

dojox/mobile/Switch: template in test is broken

Reported by: Adrian Vasiliu Owned by: Sebastien Pereira
Priority: undecided Milestone: 1.10
Component: DojoX Mobile Version: 1.10.0-beta1
Keywords: Cc: bill, Patrick Ruzand
Blocked By: Blocking:

Description (last modified by 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.

Change History (8)

comment:1 Changed 5 years ago by Adrian Vasiliu

Description: modified (diff)

comment:2 Changed 5 years ago by Adrian Vasiliu

Owner: set to Sebastien Pereira
Status: newassigned

comment:3 Changed 5 years ago by Adrian Vasiliu

Description: modified (diff)

comment:4 Changed 5 years ago by Adrian Vasiliu

Description: modified (diff)

comment:5 Changed 5 years ago by Sebastien Pereira

Cc: bill Patrick Ruzand added
Milestone: tbd1.10

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.

comment:6 Changed 5 years ago by bill

Summary: dojox/mobile/Switch: templating brokendojox/mobile/Switch: template in test is broken

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

comment:7 Changed 5 years ago by 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).

comment:8 Changed 5 years ago by Sebastien Pereira

Resolution: fixed
Status: assignedclosed
Note: See TracTickets for help on using tickets.