Merge pull request #1711 from IgniteUI/fix-issue-1585

disable igCombo input field when igCombo is disabled
IgniteUI · Apr 30, 2018 · 6332e55 · 6332e55
2 parents 8fc3944 + da4ae6e
commit 6332e55
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 14 deletions.
diff --git a/src/js/modules/infragistics.ui.combo.js b/src/js/modules/infragistics.ui.combo.js
@@ -4959,14 +4959,12 @@
 			this.focusable.removeClass("ui-state-focus");
 
 			if (value) {
-				this._options.$input.attr("readonly", true);
+
+				// H.A. 30th April 2018, https://github.com/IgniteUI/ignite-ui/issues/1585
+				this._options.$input.attr("disabled", true);
 				this._options.$hiddenInput.attr("disabled", true);
 			} else {
-
-				// S.T. 27th November 2015 Bug #210080: When disable the combo and enable it after that, in "mode" dropdown the input should be readonly.
-				if (this.options.mode !== "dropdown") {
-					this._options.$input.removeAttr("readonly");
-				}
+				this._options.$input.removeAttr("disabled");
 				this._options.$hiddenInput.removeAttr("disabled");
 			}
 		},

diff --git a/tests/unit/combo/rendering/tests.html b/tests/unit/combo/rendering/tests.html
@@ -78,19 +78,23 @@ <h2 id="qunit-userAgent"></h2>
     <div class="cont">
         <div id='combo-ddclose'></div>
     </div>
+    <div class="cont">
+        <div id='combo-disabled'/></div>
+    </div>
 
     <script>
         $(function() {
             var testId_1 = 'igCombo existence',
-				testId_2 = 'Div rendering',
-				testId_3 = 'Span rendering',
-				testId_4 = 'Input rendering',
+                testId_2 = 'Div rendering',
+                testId_3 = 'Span rendering',
+                testId_4 = 'Input rendering',
                 testId_5 = 'Select rendering',
-				testId_6 = 'Highlight',
-				testId_7 = 'Scrolling',
-				testId_8 = 'Vitualization',
+                testId_6 = 'Highlight',
+                testId_7 = 'Scrolling',
+                testId_8 = 'Vitualization',
                 testId_9 = 'Drop down opening',
-				testId_10 = 'Drop down closing';
+                testId_10 = 'Drop down closing';
+                testId_11 = 'Rendering disabled combo';
 
 
             // // classes - array of strings (classes) that the element should have
@@ -695,6 +699,44 @@ <h2 id="qunit-userAgent"></h2>
 
                 strictEqual($dropDown.outerHeight(), 0, 'Drop down height is incorrect');
             });
+
+            // Disabled rendering
+            test(testId_11, function () {
+                var $comboElement = $('#combo-disabled'),
+                    $input,
+					itemsText = ['Tom', 'Jerry', 'Spiky', 'Bendji'];
+
+                $comboElement
+					.igCombo({
+					    valueKey: 'id',
+                        textKey: 'name',
+                        disabled: true,
+					    dataSource: [{
+					        id: '1',
+					        name: 'Tom'
+					    }, {
+					        id: '2',
+					        name: 'Jerry'
+					    }, {
+					        id: '3',
+					        name: 'Spiky'
+					    }, {
+					        id: '4',
+					        name: 'Bendji'
+					    }]
+					})
+
+                $comboWrapper = $('.ui-igcombo-wrapper');
+                $input = $comboElement.igCombo('textInput');
+
+                equal($comboWrapper.hasClass("ui-igCombo-disabled ui-state-disabled"), true, "The combo wrapper element does not have the disabled css classes applied.");
+                equal($input.attr("disabled"), "disabled", "The disabled attribute is not applied to the input.");
+
+                $comboElement.igCombo("option", "disabled", false);
+
+                equal($comboWrapper.hasClass("ui-igCombo-disabled ui-state-disabled"), false, "The combo wrapper element has the disabled css classes applied.");
+                equal($input.attr("disabled"), undefined, "The disabled attribute is applied to the input.");
+            });
         });
     </script>
 </body>

diff --git a/tests/unit/combo/test-shared.js b/tests/unit/combo/test-shared.js
@@ -205,7 +205,7 @@ function testComboIsDisabled($element) {
 
     ok($element.hasClass("ui-state-disabled"), "Combo does not have ui-state-disabled class applied");
     ok($element.hasClass("ui-igCombo-disabled"), "Combo does not have ui-igCombo-disabled class applied");
-    strictEqual($input.attr('readonly'), 'readonly', 'Readonly attribute was not applied');
+    strictEqual($input.attr('disabled'), 'disabled', 'Disabled attribute was not applied');
 }
 
 function testComboIsEnabled($element) {