Sidebar click does not blur input; IE only

Suite and Optimus Suite 5
#1

Put a form in one layout cell and a Sidebar in another. Click into input so that it has focus. If you click outside the input almost anywhere, the input correctly blurs (loses focus). However, in IE, if you click on a Sidebar, the input will not blur. It does correctly blur in both Chrome and Firefox.

This has been tested on Windows 7.

Test case code below:

[code]

Sidebar focus problem in IE div#layoutObj { position: relative; margin-top: 10px; margin-left: 10px; width: 600px; height: 300px; } 
	var myLayout, myForm, mySidebar;
	var enableLogger = false;
	function doOnLoad() {
		myLayout = new dhtmlXLayoutObject({
			parent: "layoutObj",
			pattern: "2U",
			cells: [{id: "a", text: "dhtmlxForm"}]
		});
		
		myForm = myLayout.cells("a").attachForm();
		myForm.loadStruct([
			{type: "settings", position: "label-left", labelWidth: 130, inputWidth: 120, offsetLeft: 10},
			{type: "input", label: "Login", value: "adminus", offsetTop: 10}
		]);
		mySidebar = myLayout.cells("b").attachSidebar({
        width: 100,
        items: []
    });
}
	
	
</script>
[/code]
#2

The code causing this behavior is in dhtmlxsidebar.js, function this._doOnSideClick:

if (e.type == "touchstart" || e.type == "pointerdown" || e.type == "MSPointerDown") { if (e.preventDefault) { e.preventDefault(); // this will prevent touchmove and click events } if (this.className.match(/dhxsidebar_touch/gi) == null) { if (e.type == "touchstart" || (e.type == "pointerdown" && e.pointerType == "touch")) { this.className += " dhxsidebar_touch"; } } }

for Chrome and Firefox e.type is “mouseup” but for IE it is “pointerdown” and it appears that it might be attempting to deal with a touch screen event. Note that on my system, there are no touch devices and it is a mouse left click. I commented out the e.preventDefault(); line and the symptom goes away. That is, the focused input is now blurred and loses focus as it should. However, I’m concerned about any bad side effects of making this change. Really want to know why the programmer wanted to prevent “click events”

#3

On my win 7 desktop machine with IE 11.0.9600.18617, a left mouse click on a Sidebar results in these events in _doOnSideClick:

pointerdown
pointerup

(any focused input control is not blurred)

and the pointerdown event causes a call to:

that._setItemActive(id, true);

which invokes the onBeforeSelect event handler.

With the modifed function (see below) preventing the call to e.preventDefault() allows a “mouseup” event to occur. It also allows for the blurring of any focused input. Note that with allowing the “mouseup” event to occur, I had to stop the “pointerdown” event from calling _setItemActive or this would occur twice, thus invoking onBeforeSelect twice…

	//REW modified 4.11.2017
	this._doOnSideClick = function(e) {
		e = e||event;
		
		var t = e.target||e.srcElement;
		var id = null;
		var b = false;
		
		that.conf.clear_click = true;
		
		if (e.type == "touchstart" || e.type == "pointerdown" || e.type == "MSPointerDown") {
			if (e.preventDefault) {
				//REW 4.11.2017 prevents click from blurring a focused input control because mouseup/down don't occur	
				//REW 4.11.2017 e.preventDefault(); // this will prevent touchmove and click events
			}
			if (this.className.match(/dhxsidebar_touch/gi) == null) {
				if (e.type == "touchstart" || (e.type == "pointerdown" && e.pointerType == "touch")) {
					this.className += " dhxsidebar_touch";
				}
			}
		}
		
		while (t != null && id == null && e.type != "pointerdown" && e.type != "MSPointerDown") {
			if (typeof(t.className) != "undefined") {
				if (t.className.match(/^dhxsidebar_item/) != null && typeof(t._idd) != "undefined") {
					id = t._idd;
				} else if (t.className.match(/^dhxsidebar_bubble/) != null) {
					b = true;
					id = t.parentNode._idd;
				}
			}
			t = t.parentNode;
		}
		if (id != null) {
			if (b == false || (b == true && that.callEvent("onBubbleClick", [id, that.t[id].conf.bubble]) == true)) {
				
				//REW 4.11.2017 don't call _setItemActive for pointer events, only for the mouseup event to prevent multiple calls
				if (e.type == "mouseup") {
					that._setItemActive(id, true);
				}
			}
		}
		t = null;
	}
#4

The problem is confirmed. We’re working on a solution.

#5

Great, thanks.

#6

The problem is fixed.
Please, try to download the latest dhtmlx build (5.1v)

#7

I think it’s a good time to discuss this issue.