tiddlywiki 5.3.7 → 5.4.0

package/core/modules/widgets/link.js

@@ -45,9 +45,13 @@ LinkWidget.prototype.render = function(parent,nextSibling) {
 			sourcePrefix: "data-",
 			destPrefix: "data-"
 		});
+		this.assignAttributes(domNode,{
+			sourcePrefix: "aria-",
+			destPrefix: "aria-"
+		});
 		parent.insertBefore(domNode,nextSibling);
-		this.renderChildren(domNode,null);
 		this.domNodes.push(domNode);
+		this.renderChildren(domNode,null);
 	}
 };
 
@@ -82,7 +86,7 @@ LinkWidget.prototype.renderLink = function(parent,nextSibling) {
 			classes.push(this.linkClasses);
 		}
 	} else if(this.overrideClasses !== "") {
-		classes.push(this.overrideClasses)
+		classes.push(this.overrideClasses);
 	}
 	if(classes.length > 0) {
 		domNode.setAttribute("class",classes.join(" "));
@@ -93,7 +97,7 @@ LinkWidget.prototype.renderLink = function(parent,nextSibling) {
 	if(wikilinkTransformFilter) {
 		// Use the filter to construct the href
 		wikiLinkText = this.wiki.filterTiddlers(wikilinkTransformFilter,this,function(iterator) {
-			iterator(self.wiki.getTiddler(self.to),self.to)
+			iterator(self.wiki.getTiddler(self.to),self.to);
 		})[0];
 	} else {
 		// Expand the tv-wikilink-template variable to construct the href
@@ -117,17 +121,21 @@ LinkWidget.prototype.renderLink = function(parent,nextSibling) {
 	var tooltipWikiText = this.tooltip || this.getVariable("tv-wikilink-tooltip");
 	if(tooltipWikiText) {
 		var tooltipText = this.wiki.renderText("text/plain","text/vnd.tiddlywiki",tooltipWikiText,{
-				parseAsInline: true,
-				variables: {
-					currentTiddler: this.to
-				},
-				parentWidget: this
-			});
+			parseAsInline: true,
+			variables: {
+				currentTiddler: this.to
+			},
+			parentWidget: this
+		});
 		domNode.setAttribute("title",tooltipText);
 	}
-	if(this["aria-label"]) {
-		domNode.setAttribute("aria-label",this["aria-label"]);
+	if(this.role) {
+		domNode.setAttribute("role",this.role);
 	}
+	this.assignAttributes(domNode,{
+		sourcePrefix: "aria-",
+		destPrefix: "aria-"
+	});
 	// Add a click event handler
 	$tw.utils.addEventListeners(domNode,[
 		{name: "click", handlerObject: this, handlerMethod: "handleClickEvent"},
@@ -137,8 +145,12 @@ LinkWidget.prototype.renderLink = function(parent,nextSibling) {
 		$tw.utils.makeDraggable({
 			domNode: domNode,
 			dragTiddlerFn: function() {return self.to;},
+			startActions: self.startActions,
+			endActions: self.endActions,
 			widget: this
 		});
+	} else if(this.draggable === "no") {
+		domNode.setAttribute("draggable","false");
 	}
 	// Assign data- attributes
 	this.assignAttributes(domNode,{
@@ -147,8 +159,8 @@ LinkWidget.prototype.renderLink = function(parent,nextSibling) {
 	});
 	// Insert the link into the DOM and render any children
 	parent.insertBefore(domNode,nextSibling);
-	this.renderChildren(domNode,null);
 	this.domNodes.push(domNode);
+	this.renderChildren(domNode,null);
 };
 
 LinkWidget.prototype.handleClickEvent = function(event) {
@@ -188,11 +200,13 @@ LinkWidget.prototype.execute = function() {
 	// Pick up our attributes
 	this.to = this.getAttribute("to",this.getVariable("currentTiddler"));
 	this.tooltip = this.getAttribute("tooltip");
-	this["aria-label"] = this.getAttribute("aria-label");
+	this.role = this.getAttribute("role");
 	this.linkClasses = this.getAttribute("class");
 	this.overrideClasses = this.getAttribute("overrideClass");
 	this.tabIndex = this.getAttribute("tabindex");
 	this.draggable = this.getAttribute("draggable","yes");
+	this.startActions = this.getAttribute("startactions");
+	this.endActions = this.getAttribute("endactions");
 	this.linkTag = this.getAttribute("tag","a");
 	// Determine the link characteristics
 	this.isMissing = !this.wiki.tiddlerExists(this.to);

package/core/modules/widgets/linkcatcher.js

@@ -89,9 +89,9 @@ LinkCatcherWidget.prototype.handleNavigateEvent = function(event) {
 			this.executingActions = false;
 		}
 	} else {
-			// This is a navigate event generated by the actions of this linkcatcher,
-			// so we don't trap it again, but just pass it to the parent
-			this.parentWidget.dispatchEvent(event);
+		// This is a navigate event generated by the actions of this linkcatcher,
+		// so we don't trap it again, but just pass it to the parent
+		this.parentWidget.dispatchEvent(event);
 	}
 	return false;
 };

package/core/modules/widgets/list.js

@@ -35,7 +35,7 @@ ListWidget.prototype.initialise = function(parseTreeNode,options) {
 	// Now look for <$list-template> and <$list-empty> widgets as immediate child widgets
 	// This is safe to do during initialization because parse trees never change after creation
 	this.findExplicitTemplates();
-}
+};
 
 /*
 Render this widget into the DOM
@@ -124,7 +124,7 @@ ListWidget.prototype.findExplicitTemplates = function() {
 		return foundInlineTemplate;
 	};
 	this.hasTemplateInBody = searchChildren(this.parseTreeNode.children);
-}
+};
 
 ListWidget.prototype.getTiddlerList = function() {
 	var limit = $tw.utils.getInt(this.getAttribute("limit",""),undefined);
@@ -166,7 +166,7 @@ ListWidget.prototype.makeJoinTemplate = function() {
 	var parser,
 		join = this.getAttribute("join","");
 	if(join) {
-		parser = this.wiki.parseText("text/vnd.tiddlywiki",join,{parseAsInline:true})
+		parser = this.wiki.parseText("text/vnd.tiddlywiki",join,{parseAsInline:true});
 		if(parser) {
 			return parser.tree;
 		} else {
@@ -339,9 +339,9 @@ ListWidget.prototype.handleListChanges = function(changedTiddlers) {
 			var mustRecreateLastItem = false;
 			if(this.join && this.join.length) {
 				if(this.children.length !== this.list.length) {
-						mustRecreateLastItem = true;
+					mustRecreateLastItem = true;
 				} else if(prevList[prevList.length-1] !== this.list[this.list.length-1]) {
-						mustRecreateLastItem = true;
+					mustRecreateLastItem = true;
 				}
 			}
 			var isLast = false, wasLast = false;
@@ -472,7 +472,7 @@ ListItemWidget.prototype.execute = function() {
 		children = children.slice(0);
 		$tw.utils.each(join,function(joinNode) {
 			children.push(joinNode);
-		})
+		});
 	}
 	// Construct the child widgets
 	this.makeChildWidgets(children);
@@ -495,8 +495,8 @@ var ListTemplateWidget = function(parseTreeNode,options) {
 	this.initialise(parseTreeNode,options);
 };
 ListTemplateWidget.prototype = new Widget();
-ListTemplateWidget.prototype.render = function() {}
-ListTemplateWidget.prototype.refresh = function() { return false; }
+ListTemplateWidget.prototype.render = function() {};
+ListTemplateWidget.prototype.refresh = function() { return false; };
 
 exports["list-template"] = ListTemplateWidget;
 
@@ -505,8 +505,8 @@ var ListEmptyWidget = function(parseTreeNode,options) {
 	this.initialise(parseTreeNode,options);
 };
 ListEmptyWidget.prototype = new Widget();
-ListEmptyWidget.prototype.render = function() {}
-ListEmptyWidget.prototype.refresh = function() { return false; }
+ListEmptyWidget.prototype.render = function() {};
+ListEmptyWidget.prototype.refresh = function() { return false; };
 
 exports["list-empty"] = ListEmptyWidget;
 
@@ -515,7 +515,7 @@ var ListJoinWidget = function(parseTreeNode,options) {
 	this.initialise(parseTreeNode,options);
 };
 ListJoinWidget.prototype = new Widget();
-ListJoinWidget.prototype.render = function() {}
-ListJoinWidget.prototype.refresh = function() { return false; }
+ListJoinWidget.prototype.render = function() {};
+ListJoinWidget.prototype.refresh = function() { return false; };
 
 exports["list-join"] = ListJoinWidget;

package/core/modules/widgets/log.js

@@ -15,11 +15,11 @@ exports.name = "log";
 
 exports.constructor = function(parseTreeNode,options) {
 	this.initialise(parseTreeNode,options);
-}
+};
 
 exports.prototype = {};
 
 exports.prototype.render = function(event) {
 	Object.getPrototypeOf(Object.getPrototypeOf(this)).render.call(this,event);
 	Object.getPrototypeOf(Object.getPrototypeOf(this)).log.call(this);
-}
+};

package/core/modules/widgets/messagecatcher.js

@@ -69,7 +69,7 @@ MessageCatcherWidget.prototype.render = function(parent,nextSibling) {
 				}
 			);
 		}
-	}
+	};
 	// Add the main event handler
 	addEventHandler(this.getAttribute("type"),this.getAttribute("actions"));
 	// Add any other event handlers

package/core/modules/widgets/navigator.js

@@ -235,11 +235,11 @@ NavigatorWidget.prototype.handleDeleteTiddlerEvent = function(event) {
 	}
 	// Seek confirmation
 	if(((originalTitle && this.wiki.getTiddler(originalTitle)) || (tiddler && ((tiddler.fields.text || "") !== ""))) && !win.confirm($tw.language.getString(
-				"ConfirmDeleteTiddler",
-				{variables:
+		"ConfirmDeleteTiddler",
+		{variables:
 					{title: confirmationTitle}
-				}
-			))) {
+		}
+	))) {
 		return false;
 	}
 	// Delete the original tiddler
@@ -279,17 +279,17 @@ NavigatorWidget.prototype.makeDraftTiddler = function(targetTitle) {
 	// Save the initial value of the draft tiddler
 	draftTitle = this.generateDraftTitle(targetTitle);
 	var draftTiddler = new $tw.Tiddler({
-				text: "",
-			},
-			tiddler,
-			{
-				title: draftTitle,
-				"draft.title": targetTitle,
-				"draft.of": targetTitle
-			},
-			this.wiki.getModificationFields(),
-			tiddler === null || tiddler === undefined ? defaultFields : {}
-		);
+		text: "",
+	},
+	tiddler,
+	{
+		title: draftTitle,
+		"draft.title": targetTitle,
+		"draft.of": targetTitle
+	},
+	this.wiki.getModificationFields(),
+	tiddler === null || tiddler === undefined ? defaultFields : {}
+	);
 	this.wiki.addTiddler(draftTiddler);
 	return draftTiddler;
 };
@@ -466,20 +466,20 @@ NavigatorWidget.prototype.handleNewTiddlerEvent = function(event) {
 	}
 	// Save the draft tiddler
 	var draftTiddler = new $tw.Tiddler({
-			text: "",
-			"draft.title": title
-		},
-		templateTiddler,
-		additionalFields,
-		this.wiki.getCreationFields(),
-		existingTiddler,
-		filteredAdditionalFields,
-		{
-			title: draftTitle,
-			"draft.of": title,
-			// If template or additionalFields have "tags" even if empty a tags field will be created.
-			tags: ((mergedTags.length > 0) || templateHasTags || additionalFieldsHasTags) ? mergedTags : undefined
-		},this.wiki.getModificationFields());
+		text: "",
+		"draft.title": title
+	},
+	templateTiddler,
+	additionalFields,
+	this.wiki.getCreationFields(),
+	existingTiddler,
+	filteredAdditionalFields,
+	{
+		title: draftTitle,
+		"draft.of": title,
+		// If template or additionalFields have "tags" even if empty a tags field will be created.
+		tags: ((mergedTags.length > 0) || templateHasTags || additionalFieldsHasTags) ? mergedTags : undefined
+	},this.wiki.getModificationFields());
 	this.wiki.addTiddler(draftTiddler);
 	// Update the story to insert the new draft at the top and remove any existing tiddler
 	if(storyList && storyList.indexOf(draftTitle) === -1) {

package/core/modules/widgets/parameters.js

@@ -61,7 +61,9 @@ ParametersWidget.prototype.execute = function() {
 			if(name.substr(0,2) === "$$") {
 				name = name.substr(1);
 			}
-			var value = pointer.getTransclusionParameter(name,index,self.getAttribute(attr.name,""));
+			var defaultValue = (self.multiValuedAttributes && self.multiValuedAttributes[attr.name])
+					|| self.getAttribute(attr.name,"");
+			var value = pointer.getTransclusionParameter(name,index,defaultValue);
 			self.setVariable(name,value);
 		});
 		// Assign any metaparameters
@@ -80,7 +82,8 @@ ParametersWidget.prototype.execute = function() {
 			if(name.substr(0,2) === "$$") {
 				name = name.substr(1);
 			}
-			var value = self.getAttribute(attr.name,"");
+			var value = (self.multiValuedAttributes && self.multiValuedAttributes[attr.name])
+					|| self.getAttribute(attr.name,"");
 			self.setVariable(name,value);
 		});
 	}

package/core/modules/widgets/password.js

@@ -42,8 +42,8 @@ PasswordWidget.prototype.render = function(parent,nextSibling) {
 	]);
 	// Insert the label into the DOM and render any children
 	parent.insertBefore(domNode,nextSibling);
-	this.renderChildren(domNode,null);
 	this.domNodes.push(domNode);
+	this.renderChildren(domNode,null);
 };
 
 PasswordWidget.prototype.handleChangeEvent = function(event) {

package/core/modules/widgets/radio.js

@@ -59,8 +59,8 @@ RadioWidget.prototype.render = function(parent,nextSibling) {
 	]);
 	// Insert the label into the DOM and render any children
 	parent.insertBefore(this.labelDomNode,nextSibling);
-	this.renderChildren(this.spanDomNode,null);
 	this.domNodes.push(this.labelDomNode);
+	this.renderChildren(this.spanDomNode,null);
 };
 
 RadioWidget.prototype.getValue = function() {

package/core/modules/widgets/range.js

@@ -90,42 +90,30 @@ RangeWidget.prototype.getActionVariables = function(options) {
 	// Trigger actions. Use variables = {key:value, key:value ...}
 	// the "value" is needed.
 	return $tw.utils.extend({"actionValue": this.inputDomNode.value, "actionValueHasChanged": hasChanged}, options);
-}
+};
 
 // actionsStart
 RangeWidget.prototype.handleMouseDownEvent = function(event) {
-	this.mouseDown = true; // TODO remove once IE is gone.
-	this.startValue = this.inputDomNode.value; // TODO remove this line once IE is gone!
 	this.handleEvent(event);
 	// Trigger actions
 	if(this.actionsMouseDown) {
-		var variables = this.getActionVariables() // TODO this line will go into the function call below.
+		var variables = this.getActionVariables(); // TODO this line will go into the function call below.
 		this.invokeActionString(this.actionsMouseDown,this,event,variables);
 	}
-}
+};
 
 // actionsStop
 RangeWidget.prototype.handleMouseUpEvent = function(event) {
-	this.mouseDown = false; // TODO remove once IE is gone.
 	this.handleEvent(event);
 	// Trigger actions
 	if(this.actionsMouseUp) {
-		var variables = this.getActionVariables()
+		var variables = this.getActionVariables();
 		this.invokeActionString(this.actionsMouseUp,this,event,variables);
 	}
-	// TODO remove the following if() once IE is gone!
-	if ($tw.browser.isIE) {
-		if (this.startValue !== this.inputDomNode.value) {
-			this.handleChangeEvent(event);
-			this.startValue = this.inputDomNode.value;
-		}
-	}
-}
+};
 
 RangeWidget.prototype.handleChangeEvent = function(event) {
-	if (this.mouseDown) {  // TODO refactor this function once IE is gone.
-		this.handleInputEvent(event);
-	}
+	this.handleInputEvent(event);
 };
 
 RangeWidget.prototype.handleInputEvent = function(event) {
@@ -133,7 +121,7 @@ RangeWidget.prototype.handleInputEvent = function(event) {
 	// Trigger actions
 	if(this.actionsInput) {
 		// "tiddler" parameter may be missing. See .execute() below
-		var variables = this.getActionVariables({"actionValueHasChanged": "yes"}) // TODO this line will go into the function call below.
+		var variables = this.getActionVariables({"actionValueHasChanged": "yes"}); // TODO this line will go into the function call below.
 		this.invokeActionString(this.actionsInput,this,event,variables);
 	}
 };
@@ -152,8 +140,6 @@ RangeWidget.prototype.handleEvent = function(event) {
 Compute the internal state of the widget
 */
 RangeWidget.prototype.execute = function() {
-	// TODO remove the next 1 lines once IE is gone!
-	this.mouseUp = true; // Needed for IE10
 	// Get the parameters from the attributes
 	this.tiddlerTitle = this.getAttribute("tiddler",this.getVariable("currentTiddler"));
 	this.tiddlerField = this.getAttribute("field","text");

package/core/modules/widgets/reveal.js

@@ -40,6 +40,7 @@ RevealWidget.prototype.render = function(parent,nextSibling) {
 		domNode.setAttribute("style",this.style);
 	}
 	parent.insertBefore(domNode,nextSibling);
+	this.domNodes.push(domNode);
 	this.renderChildren(domNode,null);
 	if(!domNode.isTiddlyWikiFakeDom && this.type === "popup" && this.isOpen) {
 		this.positionPopup(domNode);
@@ -48,7 +49,6 @@ RevealWidget.prototype.render = function(parent,nextSibling) {
 	if(!this.isOpen) {
 		domNode.setAttribute("hidden","true");
 	}
-	this.domNodes.push(domNode);
 };
 
 RevealWidget.prototype.positionPopup = function(domNode) {
@@ -89,13 +89,33 @@ RevealWidget.prototype.positionPopup = function(domNode) {
 			top = this.popup.top + this.popup.height;
 			break;
 	}
+	// if requested, clamp the popup so that it will always be fully inside its parent (the first upstream element with position:relative), as long as the popup is smaller than its parent
+	// if position is absolute then clamping is done to the canvas boundary, since there is no "parent"
+	if(this.clampToParent !== "none") {
+		if(this.popup.absolute) {
+			var parentWidth = window.innerWidth,
+				parentHeight = window.innerHeight;
+		} else {
+			var parentWidth = domNode.offsetParent.offsetWidth,
+				parentHeight = domNode.offsetParent.offsetHeight;
+		}
+		var right = left + domNode.offsetWidth,
+			bottom = top + domNode.offsetHeight;
+		if((this.clampToParent === "both" || this.clampToParent === "right") && right > parentWidth) {
+			left = parentWidth - domNode.offsetWidth;
+		}
+		if((this.clampToParent === "both" || this.clampToParent === "bottom") && bottom > parentHeight) {
+			top = parentHeight - domNode.offsetHeight;
+		}
+		// clamping on left and top sides is taken care of by positionAllowNegative
+	}
 	if(!this.positionAllowNegative) {
 		left = Math.max(0,left);
 		top = Math.max(0,top);
 	}
-	if (this.popup.absolute) {
+	if(this.popup.absolute) {
 		// Traverse the offsetParent chain and correct the offset to make it relative to the parent node.
-		for (var offsetParentDomNode = domNode.offsetParent; offsetParentDomNode; offsetParentDomNode = offsetParentDomNode.offsetParent) {
+		for(var offsetParentDomNode = domNode.offsetParent; offsetParentDomNode; offsetParentDomNode = offsetParentDomNode.offsetParent) {
 			left -= offsetParentDomNode.offsetLeft;
 			top -= offsetParentDomNode.offsetTop;
 		}
@@ -123,6 +143,7 @@ RevealWidget.prototype.execute = function() {
 	this.openAnimation = this.animate === "no" ? undefined : "open";
 	this.closeAnimation = this.animate === "no" ? undefined : "close";
 	this.updatePopupPosition = this.getAttribute("updatePopupPosition","no") === "yes";
+	this.clampToParent = this.getAttribute("clamp","none");
 	// Compute the title of the state tiddler and read it
 	this.stateTiddlerTitle = this.state;
 	this.stateTitle = this.getAttribute("stateTitle");
@@ -141,7 +162,7 @@ Read the state tiddler
 RevealWidget.prototype.readState = function() {
 	// Read the information from the state tiddler
 	var state,
-	    defaultState = this["default"];
+		defaultState = this["default"];
 	if(this.stateTitle) {
 		var stateTitleTiddler = this.wiki.getTiddler(this.stateTitle);
 		if(this.stateField) {
@@ -203,7 +224,7 @@ RevealWidget.prototype.readPopupState = function(state) {
 RevealWidget.prototype.assignDomNodeClasses = function() {
 	var classes = this.getAttribute("class","").split(" ");
 	classes.push("tc-reveal");
-	this.domNode.className = classes.join(" ");
+	this.domNode.className = classes.join(" ").trim();
 };
 
 /*
@@ -252,18 +273,18 @@ RevealWidget.prototype.updateState = function() {
 		this.renderChildren(domNode,null);
 	}
 	// Animate our DOM node
-	if(!domNode.isTiddlyWikiFakeDom && this.type === "popup" && this.isOpen) {
-		this.positionPopup(domNode);
-		$tw.utils.addClass(domNode,"tc-popup"); // Make sure that clicks don't dismiss popups within the revealed content
-
-	}
 	if(this.isOpen) {
 		domNode.removeAttribute("hidden");
-        $tw.anim.perform(this.openAnimation,domNode);
+		// Position popup after making it visible to ensure correct dimensions
+		if(!domNode.isTiddlyWikiFakeDom && this.type === "popup") {
+			this.positionPopup(domNode);
+			$tw.utils.addClass(domNode,"tc-popup"); // Make sure that clicks don't dismiss popups within the revealed content
+		}
+		$tw.anim.perform(this.openAnimation,domNode);
 	} else {
 		$tw.anim.perform(this.closeAnimation,domNode,{callback: function() {
 			//make sure that the state hasn't changed during the close animation
-			self.readState()
+			self.readState();
 			if(!self.isOpen) {
 				domNode.setAttribute("hidden","true");
 			}

package/core/modules/widgets/scrollable.js

@@ -129,7 +129,6 @@ ScrollableWidget.prototype.scrollSelectorIntoView = function(baseElement,selecto
 Render this widget into the DOM
 */
 ScrollableWidget.prototype.render = function(parent,nextSibling) {
-	var self = this;
 	this.scaleFactor = 1;
 	this.addEventListeners([
 		{type: "tm-scroll", handler: "handleScrollEvent"}
@@ -168,8 +167,8 @@ ScrollableWidget.prototype.render = function(parent,nextSibling) {
 	this.outerDomNode.className = this["class"] || "";
 	// Insert element
 	parent.insertBefore(this.outerDomNode,nextSibling);
-	this.renderChildren(this.innerDomNode,null);
 	this.domNodes.push(this.outerDomNode);
+	this.renderChildren(this.innerDomNode,null);
 	// If the scroll position is bound to a tiddler
 	if(this.scrollableBind) {
 		// After a delay for rendering, scroll to the bound position
@@ -181,7 +180,7 @@ ScrollableWidget.prototype.render = function(parent,nextSibling) {
 };
 
 ScrollableWidget.prototype.listenerFunction = function(event) {
-	self = this;
+	var self = this;
 	clearTimeout(this.timeout);
 	this.timeout = setTimeout(function() {
 		var existingTiddler = self.wiki.getTiddler(self.scrollableBind),
@@ -194,7 +193,7 @@ ScrollableWidget.prototype.listenerFunction = function(event) {
 			self.wiki.addTiddler(new $tw.Tiddler(existingTiddler,newTiddlerFields));
 		}
 	}, DEBOUNCE_INTERVAL);
-}
+};
 
 ScrollableWidget.prototype.updateScrollPositionFromBoundTiddler = function() {
 	// Bail if we're running on the fakedom
@@ -215,7 +214,7 @@ ScrollableWidget.prototype.updateScrollPositionFromBoundTiddler = function() {
 			top: scrollTopTo,
 			left: scrollLeftTo,
 			behavior: "instant"
-		})
+		});
 	}
 };
 

package/core/modules/widgets/select.js

@@ -63,8 +63,8 @@ SelectWidget.prototype.render = function(parent,nextSibling) {
 		domNode.setAttribute("title",this.selectTooltip);
 	}
 	this.parentDomNode.insertBefore(domNode,nextSibling);
-	this.renderChildren(domNode,null);
 	this.domNodes.push(domNode);
+	this.renderChildren(domNode,null);
 	this.setSelectValue();
 	if(this.selectFocus == "yes") {
 		this.getSelectDomNode().focus();
@@ -82,8 +82,8 @@ SelectWidget.prototype.handleChangeEvent = function(event) {
 	if(this.selectMultiple == false) {
 		var value = this.getSelectDomNode().value;
 	} else {
-		var value = this.getSelectValues()
-				value = $tw.utils.stringifyList(value);
+		var value = this.getSelectValues();
+		value = $tw.utils.stringifyList(value);
 	}
 	this.wiki.setText(this.selectTitle,this.selectField,this.selectIndex,value);
 	// Trigger actions
@@ -118,12 +118,21 @@ SelectWidget.prototype.setSelectValue = function() {
 		}
 	}
 	// Assign it to the select element if it's different than the current value
-	if (this.selectMultiple) {
+	if(this.selectMultiple) {
 		value = value === undefined ? "" : value;
 		var select = this.getSelectDomNode();
-		var values = Array.isArray(value) ? value : $tw.utils.parseStringArray(value);
+		var child,
+			values = Array.isArray(value) ? value : $tw.utils.parseStringArray(value);
 		for(var i=0; i < select.children.length; i++){
-			select.children[i].selected = values.indexOf(select.children[i].value) !== -1
+			child=select.children[i];
+			if(child.children.length === 0){
+				child.selected = values.indexOf(child.value) !== -1;
+			} else {
+				// grouped options
+				for(var y=0; y < child.children.length; y++){
+					child.children[y].selected = values.indexOf(child.children[y].value) !== -1;
+				}
+			}
 		}
 	} else {
 		var domNode = this.getSelectDomNode();
@@ -147,14 +156,14 @@ SelectWidget.prototype.getSelectValues = function() {
 	select = this.getSelectDomNode();
 	result = [];
 	options = select && select.options;
-	for (var i=0; i<options.length; i++) {
+	for(var i=0; i<options.length; i++) {
 		opt = options[i];
-		if (opt.selected) {
+		if(opt.selected) {
 			result.push(opt.value || opt.text);
 		}
 	}
 	return result;
-}
+};
 
 /*
 Compute the internal state of the widget
@@ -183,7 +192,7 @@ Selectively refreshes the widget if needed. Returns true if the widget or any of
 SelectWidget.prototype.refresh = function(changedTiddlers) {
 	var changedAttributes = this.computeAttributes();
 	// If we're using a different tiddler/field/index then completely refresh ourselves
-	if(changedAttributes.tiddler || changedAttributes.field || changedAttributes.index || changedAttributes.tooltip || changedAttributes.tabindex || changedAttributes.disabled) {
+	if(changedAttributes.tiddler || changedAttributes.field || changedAttributes.index || changedAttributes.tooltip || changedAttributes.default || changedAttributes.tabindex || changedAttributes.disabled) {
 		this.refreshSelf();
 		return true;
 	} else {