Merge pull request #1705 from IgniteUI/PMiteva/Fix-Bug#1590-17.2

#1590 Removing stopPropagation from keydown event of the textEditor when maxLength is set
IgniteUI · May 3, 2018 · b6f0dae · b6f0dae
2 parents 6332e55 + 07617b4
commit b6f0dae
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 13 deletions.
diff --git a/src/js/modules/infragistics.ui.editors.js b/src/js/modules/infragistics.ui.editors.js
@@ -2973,8 +2973,8 @@
 								(e.keyCode > 46 || e.keyCode === 32) && !e.altKey && !e.ctrlKey) {
 							selection = this._getSelection(this._editorInput[ 0 ]);
 							if (selection.start === selection.end) {
+								//P.M. April 25th, 2018 #1590 Remove the keydown.stopPropagation() so that the event can bubble up the DOM tree when the maxLength option is set
 								e.preventDefault();
-								e.stopPropagation();
 								this._sendNotification("warning",
 									{
 										optName: "maxLengthWarningMsg",

diff --git a/tests/unit/editors/textEditor/tests.html b/tests/unit/editors/textEditor/tests.html
@@ -1588,11 +1588,13 @@
 
 		var testId = 'maxLength is respected';
 		test(testId, 1, function () {
-			var $editor;
+			var $editor, $input;
 
 			$editor = $('<input id="maxLengthTest"/>').appendTo("#testBedContainer").igTextEditor({ maxLength : 3 });
-			typeInInput("abc s",  $editor.igTextEditor("field"));
-			ok($('#maxLengthTest').parents().hasClass("ui-ignotify-warn"), "The notifier is not shown");
+			$input = $('#maxLengthTest');
+
+			$.ig.TestUtil.type("abc s", $input);
+			ok($input.parents().hasClass("ui-ignotify-warn"), "The notifier is not shown");
 			$editor.remove();
 		});
 
@@ -1758,6 +1760,29 @@
 		});
 	});
 
+	var testId = 'Keydown event bubbling when maxLength is set';
+		test(testId, 1, function () {
+			var $editor, $input, text = "test", eventRaisedCounter = 0;
+
+			$editor = $('<input id="keydownBubblingTest"/>').appendTo("#testBedContainer").igTextEditor({ maxLength : 1 });
+			$input = $('#keydownBubblingTest');
+
+			var keydownEventHandler = function(event) {
+				var targetId = event.target.id;
+				if(targetId === 'keydownBubblingTest'){
+					eventRaisedCounter++;
+				}
+				//$(this).off("keydown", keydownEventHandler);
+			};
+			$( "body" ).on( "keydown", $input, keydownEventHandler);
+
+			$.ig.TestUtil.type(text, $input);
+			equal(eventRaisedCounter, text.length, "Keydown event should bubble up when the input text exceeds the maxLength");
+			$( "body" ).off( "keydown", keydownEventHandler);
+			$editor.remove();
+		});
+
+
 	// Helper functions
 	function typeInInput(characters, element) {
 		var keyDown = jQuery.Event("keydown"),
@@ -1906,16 +1931,7 @@ <h2 id="qunit-userAgent"></h2>
 	<input id="issue481"/>
 	<div id="scrollTest"></div>
 </div>
-
 	<div id="editorTopList" style="position: absolute; bottom: 30px; left: 30px; width: 400px"></div>
-
-
-
-
-
-
-
-
 </div>
 	<div id="editorTopList" style="position: absolute; bottom: 30px; left: 30px; width: 400px"></div>	
 </body>