Extend the JQueryAutoCompleteControl to allow setting a option to blur after click

brjs-sdk/sdk/libs/javascript/br-presenter/src/br/presenter/control/selectionfield/JQueryAutoCompleteControl.js

@@ -9,9 +9,9 @@ br.Core.thirdparty("jquery");
  * @alias module:br/presenter/control/selectionfield/JQueryAutoCompleteControl
  * @extends module:br/presenter/control/ControlAdaptor
  * @extends module:br/presenter/property/PropertyListener
- * 
+ *
  * @classdesc
- * Provides an input box that supports auto complete when used in conjunction with a 
+ * Provides an input box that supports auto complete when used in conjunction with a
  * {@link module:br/presenter/node/AutoCompleteSelectionField}.
  *
  * <p>The jQuery auto complete control is aliased by <em>br.autocomplete-box</em>, and can
@@ -32,7 +32,7 @@ br.Core.thirdparty("jquery");
  * <em>appendTo</em> - Specify the jquery selector of the element that the menu should be appended to.
  * <em>minCharAmount</em> - Specify the minimun amount of characters to be typed before the autocomplete menu is displayed. Default is 0.
  * </p>
- * 
+ *
  * @see br.presenter.node.AutoCompleteSelectionField
  */
 br.presenter.control.selectionfield.JQueryAutoCompleteControl = function()
@@ -109,6 +109,13 @@ br.presenter.control.selectionfield.JQueryAutoCompleteControl.prototype.onViewRe
 			// don't propagate this to the keydown (if it's triggered by an enter)
 			event.stopImmediatePropagation();
 			event.preventDefault();
+			// if the selection is triggered by a click, not by pressing enter, then blur
+			if (self.m_bBlurAfterClick === true) {
+				if (event.which === 1) {
+					this.blur();
+				}
+			}
+
 			return false;
 		}
 	});
@@ -157,4 +164,7 @@ br.presenter.control.selectionfield.JQueryAutoCompleteControl.prototype.setOptio
 	{
 		this.m_nMinCharAmount = mOptions.minCharAmount;
 	}
+	if ( mOptions && mOptions.blurAfterClick !== undefined) {
+		this.m_bBlurAfterClick = mOptions.blurAfterClick;
+	}
 };

brjs-sdk/sdk/libs/javascript/br-presenter/test-acceptance/resources/html/test-form.html

@@ -13,6 +13,7 @@
 
 	<input type="text" id="jqueryAutoCompleteBox" data-bind="control:'br.autocomplete-box',controlOptions:{appendTo: '#autocomplete-container'}, controlNode:jquerySelectionField"/>
 	<input type="text" id="jqueryAutoCompleteBox2" data-bind="control:'br.autocomplete-box',controlOptions:{appendTo: '#autocomplete-container2', minCharAmount: 2}, controlNode:jquerySelectionField"/>
+	<input type="text" id="jqueryAutoCompleteBox3" data-bind="control:'br.autocomplete-box',controlOptions:{appendTo: '#autocomplete-container', blurAfterClick: true}, controlNode:jquerySelectionField"/>
 
 	<div id="datePicker" data-bind="control:'br.date-picker',value:date"></div>
 	<div id="datePicker2" data-bind="control:'br.date-picker',value:dateInitiallyDisabledAndHidden"></div>
@@ -35,5 +36,5 @@
 	</div>
 	<div id="autocomplete-container2">
 	</div>
-	
+
 </div>

brjs-sdk/sdk/libs/javascript/br-presenter/test-acceptance/tests/control/selectionfield/JQueryAutoCompleteControlAdapterTest.js

@@ -2,32 +2,32 @@ br.test.GwtTestRunner.initialize();
 
 describe("View to model interactions for JQueryAutoCompleteControlAdapter", function() {
 	fixtures("PresenterFixtureFactory");
-	
+
 	it("starts enabled and visible by default", function() {
 		given("demo.viewOpened = true");
 		then("demo.view.(#jqueryAutoCompleteBox).enabled = true");
 			and("demo.view.(#jqueryAutoCompleteBox).isVisible = true");
 	});
-	
+
 	it("has the correct initial value", function() {
 		given("demo.viewOpened = true");
 		then("demo.view.(#jqueryAutoCompleteBox).value = 'BB'");
 	});
-	
+
 	it("correctly auto completes a valid input option", function() {
 		given("demo.viewOpened = true");
 		when("demo.model.jquerySelectionField.value => ''");
 			and("demo.view.(#jqueryAutoCompleteBox).typedValue => 'A'");
 		then("demo.view.(#autocomplete-container li:eq(0)).text = 'AA'");
 	});
-	
+
 	it("shows no options for invalid text", function() {
 		given("demo.viewOpened = true");
 		when("demo.model.jquerySelectionField.value => ''");
 			and("demo.view.(#jqueryAutoCompleteBox).typedValue => 'D'");
 		then("demo.view.(#autocomplete-container li).count = '0'");
 	});
-	
+
 	it("allows clicking on option to set the value", function() {
 		given("demo.viewOpened = true");
 		when("demo.model.jquerySelectionField.value => ''");
@@ -36,18 +36,28 @@ describe("View to model interactions for JQueryAutoCompleteControlAdapter", func
 		then("demo.model.jquerySelectionField.value = 'AA'");
 			and("demo.view.(#jqueryAutoCompleteBox).value = 'AA'");
 	});
-	
+
 	it("does not display any options if minCharAmount is set to 2", function() {
 		given("demo.viewOpened = true");
 		when("demo.model.jquerySelectionField.value => ''");
 		and("demo.view.(#jqueryAutoCompleteBox2).typedValue => 'A'");
 		then("demo.view.(#autocomplete-container2 li).count = '0'");
 	});
-	
+
 	it("does display options if minCharAmount is set to 2 and typed text is at least 2 chars long", function() {
 		given("demo.viewOpened = true");
 		when("demo.model.jquerySelectionField.value => ''");
 		and("demo.view.(#jqueryAutoCompleteBox2).typedValue => 'AA'");
 		then("demo.view.(#autocomplete-container2 li:eq(0)).text = 'AA'");
 	});
+
+	it("does blur the input after selection is made by click if blurAfterClick is set to true", function() {
+		given("demo.viewOpened = true");
+		when("demo.model.jquerySelectionField.value => ''");
+			and("demo.view.(#jqueryAutoCompleteBox3).typedValue => 'A'");
+			and("demo.view.(#autocomplete-container li:eq(0) a).clicked => true");
+		then("demo.model.jquerySelectionField.value = 'AA'");
+			and("demo.view.(#jqueryAutoCompleteBox3).value = 'AA'");
+			and("demo.view.(#jqueryAutoCompleteBox3).focused = false");
+	});
 });