Fix Lookup value rendering after updating the 'items' option (T853634) (

#11610)
DevExpress · Jan 21, 2020 · e355b9d · e355b9d
1 parent 5a151e3
commit e355b9d
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 1 deletion.
diff --git a/js/ui/lookup.js b/js/ui/lookup.js
@@ -409,10 +409,22 @@ const Lookup = DropDownList.inherit({
             return;
         }
 
-        this._$field.text(this.option('displayValue') || this.option('placeholder'));
+        this._updateField(this.option('displayValue') || this.option('placeholder'));
         this.$element().toggleClass(LOOKUP_EMPTY_CLASS, !this.option('selectedItem'));
     },
 
+    _renderDisplayText: function(text) {
+        if(this._input().length) {
+            this.callBase(text);
+        } else {
+            this._updateField(text);
+        }
+    },
+
+    _updateField: function(text) {
+        this._$field.text(text);
+    },
+
     _renderFieldTemplate: function(template) {
         this._$field.empty();
         const data = this._fieldRenderData();

diff --git a/testing/tests/DevExpress.ui.widgets.editors/lookup.markup.tests.js b/testing/tests/DevExpress.ui.widgets.editors/lookup.markup.tests.js
@@ -252,6 +252,28 @@ module('options', {
         assert.equal(instance.option('displayValue'), 1, 'displayValue is selected item value');
     });
 
+    test('displayValue should be correctly rendered after updating an dataSource', function(assert) {
+        const dataSource = [{ id: 1, text: 'test1' }, { id: 2, text: 'test2' }];
+        const instance = $('#lookup').dxLookup({ value: 2, displayExpr: 'text', valueExpr: 'id' }).dxLookup('instance');
+        const $field = $(instance._$field);
+
+        instance.option({ dataSource });
+
+        assert.equal($field.text(), 'test2', 'field text is selected item value');
+        assert.equal(instance.option('displayValue'), 'test2', 'displayValue is selected item value');
+    });
+
+    test('displayValue should be correctly rendered after updating an items', function(assert) {
+        const items = [{ id: 1, text: 'test1' }, { id: 2, text: 'test2' }];
+        const instance = $('#lookup').dxLookup({ value: 2, displayExpr: 'text', valueExpr: 'id' }).dxLookup('instance');
+        const $field = $(instance._$field);
+
+        instance.option({ items });
+
+        assert.equal($field.text(), 'test2', 'field text is selected item value');
+        assert.equal(instance.option('displayValue'), 'test2', 'displayValue is selected item value');
+    });
+
     test('value should be assigned by reference', function(assert) {
         const items = [{ name: 'name' }];
         const instance = $('#lookup').dxLookup({