Jemt / Fit.UI

Fit.UI is a JavaScript based UI framework built on Object Oriented principles
http://fitui.org
GNU Lesser General Public License v3.0
19 stars 7 forks source link

TreeViewNode.Title("A &amp B") returns "A & B" #127

Open FlowIT-JIT opened 3 years ago

FlowIT-JIT commented 3 years ago

HTML or HEX entities are "translated" in TreeViewNode's Title as the following examples demonstrates:

var n = new Fit.Controls.TreeViewNode("A & B", Fit.Data.CreateGuid());
console.log(n.Title()); // Returns "A & B" rather than "A & B"
console.log(n.Title("New & old")); // Returns "New & old" rather than "New & old"

Naturally this affect nodes retrieved from TreeView as well:

var tv = new Fit.Controls.TreeView();
var titleAndValue = "Title & value";
tv.AddChild(new Fit.Controls.TreeViewNode(titleAndValue, titleAndValue));
console.log("Title: ", tv.GetAllNodes()[0].Title()); // Notice how Title() returns "&" instead of &
console.log("Value: ", tv.GetAllNodes()[0].Value()); // Returns value exactly as defined

TreeViewNode.Value() always returns the value exactly as defined.

DropDown, which internally can use TreeView to represent selectable data, is also affected by this behaviour.

// Create TreeView witn an item
var tv = new Fit.Controls.TreeView();
tv.Selectable(true);
var titleAndValue = "Title & value";
tv.AddChild(new Fit.Controls.TreeViewNode(titleAndValue, titleAndValue));

// Associate with DropDown control
var dd = new Fit.Controls.DropDown();
dd.SetPicker(tv);

// Select node
tv.SelectAll(true);

// Get value from DropDown - notice how the title and value differs.
// Returns "Title & value=Title &amp%3B value"
// rather than "Title &amp%3B value=Title &amp%3B value".
// Notice that the semicolon is encoded since it's a reserved character.
console.log(dd.Value());

And the same applies for ListView:

var titleAndValue = "R & D";
var lv = new Fit.Controls.ListView();
lv.AddItem(titleAndValue, titleAndValue);

var item = lv.GetItemByValue(titleAndValue);
console.log("Title: ", item.Title); // Notice how Title() returns "&" instead of &
console.log("Value: ", item.Value); // Returns value exactly as defined (although, see bug #128)

Notice that the example above does not, as of today, return the proper value. See https://github.com/Jemt/Fit.UI/issues/128 for details.

That HTML/HEX entities are "translated" in the title is a minor issue but worth documenting. Software might actually rely on this behaviour if the result from node.Title() is passed to something that does not support/display HTML/HEX entities, so changing how this works might break applications.

Also be aware that this behaviour is most likely what makes HEX/HTML entities work well with the DropDown control. If "R & D" is used as a selectable item's title, then the DropDown will display it properly as "R & D" due to the way the item's Title is passed to the DropDown.