From 6c1f7997a45fcaf73bbb62c7609b2401c687651b Mon Sep 17 00:00:00 2001
From: Ingo Schommer <ingo@silverstripe.com>
Date: Wed, 13 Jun 2012 16:04:14 +0200
Subject: [PATCH] ENHANCEMENT HTML titles in TreeDropdownField

HTML in tree nodes is already used to render page icons via SiteTree->TreeTitle.
In order to select the initial value correctly via HTML5 data attributes,
we need to encode any HTML values.
---
 forms/TreeDropdownField.php          | 1 +
 javascript/TreeDropdownField.js      | 7 +++----
 templates/forms/TreeDropdownField.ss | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/forms/TreeDropdownField.php b/forms/TreeDropdownField.php
index 3b6f101df..d94896a51 100644
--- a/forms/TreeDropdownField.php
+++ b/forms/TreeDropdownField.php
@@ -188,6 +188,7 @@ class TreeDropdownField extends FormField {
 			$properties,
 			array(
 				'Title' => $title,
+				'TitleURLEncoded' => rawurlencode($title),
 				'Metadata' => ($metadata) ? Convert::raw2att(Convert::raw2json($metadata)) : null
 			)
 		);
diff --git a/javascript/TreeDropdownField.js b/javascript/TreeDropdownField.js
index 882b22910..fc8e2aff9 100644
--- a/javascript/TreeDropdownField.js
+++ b/javascript/TreeDropdownField.js
@@ -38,8 +38,7 @@
 			
 				var linkTitle = strings.openLink;
 				if(linkTitle) this.find("treedropdownfield-toggle-panel-link a").attr('title', linkTitle);
-				
-				if(this.data('title')) this.setTitle(this.data('title'));
+				if(this.data('title')) this.setTitle(decodeURIComponent(this.data('title')));
 				
 				this.getPanel().hide();
 				this._super();
@@ -111,8 +110,8 @@
 			setTitle: function(title) {
 				if(!title) title = strings.fieldTitle;
 					
-				this.find('.treedropdownfield-title').text(title);
-				this.data('title', title); // separate view from storage (important for search cancellation)				
+				this.find('.treedropdownfield-title').html(title);
+				this.data('title', encodeURIComponent(title)); // separate view from storage (important for search cancellation)				
 			},
 			getTitle: function() {
 				return this.find('.treedropdownfield-title').text();
diff --git a/templates/forms/TreeDropdownField.ss b/templates/forms/TreeDropdownField.ss
index 7e77d0ae2..762f65555 100644
--- a/templates/forms/TreeDropdownField.ss
+++ b/templates/forms/TreeDropdownField.ss
@@ -1,7 +1,7 @@
 <div id="TreeDropdownField_$ID"
      class="TreeDropdownField single<% if extraClass %> $extraClass<% end_if %><% if ShowSearch %> searchable<% end_if %>"
      data-url-tree="$Link(tree)"
-     data-title="$Title"
+     data-title="$TitleURLEncoded"
      <% if Description %>title="$Description"<% end_if %>
      <% if Metadata %>data-metadata="$Metadata"<% end_if %>>
 	<input id="$ID" type="hidden" name="$Name" value="$Value" />