Unable to edit editable widgets contained in a treerow when draggable="true" and droppable="true"

<zk xmlns="http://www.zkoss.org/2005/zul"
  	xmlns:h="http://www.w3.org/1999/xhtml"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd">

    <?component name="treevaluecell" extends="treecell" sclass="rightAlign" ?>
    <?component name="footercell" extends="cell" sclass="grid-tally-footer" ?>
    <?component name="treeitem" extends="treeitem" open="false" ?>
    <?component name="popup" extends="popup"  sclass="info-popup" ?>
    <tree id="expensesTree">
		<treecols sizable="true">
			<treecol width="30%" label="Item" />
			<treecol width="7%" label="Qty."/>
			<treecol width="12%" label="Unit Cost"/>
			<treecol width="12%" label="Orig. Value"/>
			<treecol width="17%" label="Date"/>
			<treecol width="12%" label="Market Value"/>
			<treecol width="12%" label="Depreciation"/>
		</treecols>
		<treechildren>
			<treeitem context="editPopup">
				<treerow draggable="true" droppable="true">
					<treecell>
						<image src="img/move_icon.gif"/>
						<textbox value="" inplace="true"/>
					</treecell>
					<treevaluecell><intbox id="qty" value="1"/></treevaluecell>
					<treevaluecell>
						<intbox id="unitCost" value="0"/>
						<image class="info-image" src="img/info-icon.gif" tooltip="tooltip.valueRangeRecommendation"/>
					</treevaluecell>
					<treevaluecell>	<label id="originalEstimatedValue" value="0"/></treevaluecell>
					<treevaluecell><datebox id="improvementDate"/></treevaluecell>
					<treevaluecell><label id="estimatedMarketValue" value="0"/></treevaluecell>
					<treevaluecell>
						<label id="depreciationRollUp" value="5,527"/>
					</treevaluecell>
				</treerow>
				<treechildren>
				</treechildren>
			</treeitem>
		</treechildren>
		<treefoot>
			<treefooter>
				<label value="Total"/>
			</treefooter>
			<treefooter/>
			<treefooter id="totalExpenses">
				<div class="tally-footer-value">
					<label  value="3,654"/>
				</div>
			</treefooter>
		</treefoot>
	</tree>

	<popup id="tooltip.valueRangeRecommendation">
		TBD
	</popup>

	<menupopup id="editPopup">
		<menu id="insertMenuItem" label="Insert..." >
			<menupopup>
				<menuitem id="generalMenuItem" label="General" />
				<menu id="extensionLowerMenuItem" label="Extension - Ground level (shell only)">
					<menupopup>
						<menuitem label="Single Room (20m2)"/>
						<menu label="Larger Extension (per m2)">
							<menupopup>
								<menuitem label="Brick veneer"/>
								<menuitem label="Solid brick"/>
								<menuitem label="Weatherboard"/>
							</menupopup>
						</menu>
					</menupopup>
				</menu>
				<menu id="extensionUpperMenuItem" label="Extension - Upper level (shell only)">
					<menupopup>
						<menuitem label="Single Room (20m2)"/>
						<menu label="Larger Extension (per m2)">
							<menupopup>
								<menuitem label="Brick veneer"/>
								<menuitem label="Solid brick"/>
								<menuitem label="Weatherboard"/>
							</menupopup>
						</menu>
					</menupopup>
				</menu>
				<menu id="renovationMenuItem" label="Renovation">
					<menupopup>
						<menuitem label="Bathroom"/>
						<menuitem label="Kitchen"/>
						<menuitem label="Laundry"/>
						<menuitem label="Bedroom"/>
						<menuitem label="Single room"/>
					</menupopup>
				</menu>
				<menu id="additionMenuItem" label="Additions to new construction" >
					<menupopup>
						<menuitem label="Bathroom"/>
						<menuitem label="Kitchen"/>
						<menuitem label="Laundry"/>
					</menupopup>
				</menu>
			</menupopup>
		</menu>
		<menuitem id="removeMenuItem" label="Remove content" image="/img/Centigrade-Widget-Icons/DeleteCross-16x16.png" />
	</menupopup>
</zk>