Cancel open popups when inputs get focus

core/modules/editor/engines/framed.js

@@ -79,6 +79,7 @@ function FramedEngine(options) {
 	// Add event listeners
 	$tw.utils.addEventListeners(this.domNode,[
 		{name: "click",handlerObject: this,handlerMethod: "handleClickEvent"},
+		{name: "focus",handlerObject: this.widget,handlerMethod: "handleFocusEvent"},
 		{name: "input",handlerObject: this,handlerMethod: "handleInputEvent"},
 		{name: "keydown",handlerObject: this.widget,handlerMethod: "handleKeydownEvent"}
 	]);
@@ -152,6 +153,13 @@ FramedEngine.prototype.focus  = function() {
 		this.domNode.select();
 	}
 };
+	
+/*
+Handle the focus event
+*/
+FramedEngine.prototype.handleFocusEvent  = function() {
+	this.widget.cancelPopups();
+};
 
 /*
 Handle a click

core/modules/editor/engines/simple.js

@@ -122,6 +122,7 @@ SimpleEngine.prototype.handleInputEvent = function(event) {
 Handle a dom "focus" event
 */
 SimpleEngine.prototype.handleFocusEvent = function(event) {
+	this.widget.cancelPopups();
 	if(this.widget.editFocusPopup) {
 		$tw.popup.triggerPopup({
 			domNode: this.domNode,

core/modules/editor/factory.js

@@ -248,6 +248,13 @@ function editTextWidgetFactory(toolbarEngine,nonToolbarEngine) {
 		}
 	};
 
+	/*
+	Cancel Popups
+	*/
+	EditTextWidget.prototype.cancelPopups = function() {
+		$tw.popup.cancel(0,this.engine.domNode);
+	};
+
 	/*
 	Handle a dom "keydown" event, which we'll bubble up to our container for the keyboard widgets benefit
 	*/

core/modules/utils/dom/popup.js

@@ -148,20 +148,44 @@ Popup.prototype.show = function(options) {
 	}
 };
 
+/*
+Detect if a Popup contains an input field that has focus
+Returns true or false
+*/
+Popup.prototype.detectInputWithinPopup = function(node) {
+	var withinPopup = false;
+	for(var i=0; i<this.popups.length; i++) {
+		var popup = (this.popups[i] && this.popups[i].domNode) ? this.popups[i].domNode : null;
+		while(node && popup) {
+			if(node === popup || (node.classList && node.classList.contains("tc-popup-keep"))) {
+				withinPopup = true;
+			}
+			node = node.parentNode;
+		}
+	}
+	return withinPopup;
+};
+
 /*
 Cancel all popups at or above a specified level or DOM node
 level: popup level to cancel (0 cancels all popups)
 */
-Popup.prototype.cancel = function(level) {
+Popup.prototype.cancel = function(level,focusedInputNode) {
 	var numPopups = this.popups.length;
 	level = Math.max(0,Math.min(level,numPopups));
 	for(var t=level; t<numPopups; t++) {
-		var popup = this.popups.pop();
-		if(popup.title) {
-			if(popup.noStateReference) {
-				popup.wiki.deleteTiddler(popup.title);
-			} else {
-				popup.wiki.deleteTiddler($tw.utils.parseTextReference(popup.title).title);
+		var inputWithinPopup;
+		if(focusedInputNode) {
+			inputWithinPopup = this.detectInputWithinPopup(focusedInputNode);
+		}
+		if(!inputWithinPopup) {
+			var popup = this.popups.pop();
+		  	if(popup.title) {
+				if(popup.noStateReference) {
+					popup.wiki.deleteTiddler(popup.title);
+				} else {
+					popup.wiki.deleteTiddler($tw.utils.parseTextReference(popup.title).title);
+        			}
 			}
 		}
 	}

plugins/tiddlywiki/codemirror/engine.js

@@ -125,6 +125,9 @@ function CodeMirrorEngine(options) {
 		event.stopPropagation(); // Otherwise TW's dropzone widget sees the drop event
 		return false;
 	});
+	this.cm.on("focus",function() {
+		self.widget.cancelPopups();
+	});
 	this.cm.on("keydown",function(cm,event) {
 		return self.widget.handleKeydownEvent.call(self.widget,event);
 	});