Tagbox: Handle list not rendering immediately when setting tag values [T1230995]

packages/devextreme/js/__internal/ui/m_tag_box.ts

@@ -1297,16 +1297,16 @@ const TagBox = (SelectBox as any).inherit({
 
  const useButtons = this.option('applyValueMode') === 'useButtons';
  const valueIndex = this._valueIndex(value);
- const values = (useButtons ? this._list.option('selectedItemKeys') : this._getValue()).slice();
+ const values = (useButtons ? this._list?.option('selectedItemKeys') || [] : this._getValue()).slice();
 
  if (valueIndex >= 0) {
  values.splice(valueIndex, 1);
  } else {
  values.push(value);
  }
 
- if (this.option('applyValueMode') === 'useButtons') {
- this._list.option('selectedItemKeys', values);
+ if (useButtons) {
+ this._list?.option('selectedItemKeys', values);
  } else {
  this.option('value', values);
  }

packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/tagBox.tests.js

@@ -1558,6 +1558,77 @@ QUnit.module('the \'onCustomItemCreating\' option', moduleSetup, () => {
  assert.equal($listItems.length, 1, 'list item should be selected after enter press');
  assert.equal(checkbox.option('value'), true, 'checkbox is checked');
  });
+
+ [true, false].forEach((deferRendering) => {
+ QUnit.test(`No errors should be encountored when new item is added, items option is empty, deferRendering is ${deferRendering} [T1230995]`, function(assert) {
+ try {
+ const $element = $('#tagBox').dxTagBox({
+ applyValueMode: 'useButtons',
+ acceptCustomValue: true,
+ onCustomItemCreating(args) {
+ const newValue = args.text;
+ const { component } = args;
+ const currentItems = component.option('items');
+ const isItemInDataSource = currentItems.some((item) => item === newValue);
+ if(!isItemInDataSource) {
+ currentItems.unshift(newValue);
+ component.option('items', currentItems);
+ }
+ args.customItem = newValue;
+ },
+ deferRendering
+ });
+ const $input = $element.find(`.${TEXTEDITOR_INPUT_CLASS}`);
+
+ keyboardMock($input, true)
+ .focus()
+ .type('test 1')
+ .press('enter');
+
+ const instance = $element.dxTagBox('instance');
+
+ assert.deepEqual(instance.option('selectedItems'), []);
+ assert.deepEqual(instance.option('items'), ['test 1']);
+ } catch(error) {
+ assert.ok(false, `Error encountered is: ${error.message}`);
+ }
+ });
+
+ QUnit.test(`No errors should be encountored when new item is added, deferRendering is ${deferRendering} [T1230995]`, function(assert) {
+ try {
+ const $element = $('#tagBox').dxTagBox({
+ items: ['Item_1', 'Item_2', 'Item_3'],
+ applyValueMode: 'useButtons',
+ acceptCustomValue: true,
+ onCustomItemCreating(args) {
+ const newValue = args.text;
+ const { component } = args;
+ const currentItems = component.option('items');
+ const isItemInDataSource = currentItems.some((item) => item === newValue);
+ if(!isItemInDataSource) {
+ currentItems.unshift(newValue);
+ component.option('items', currentItems);
+ }
+ args.customItem = newValue;
+ },
+ deferRendering
+ });
+ const $input = $element.find(`.${TEXTEDITOR_INPUT_CLASS}`);
+
+ keyboardMock($input, true)
+ .focus()
+ .type('test 1')
+ .press('enter');
+
+ const instance = $element.dxTagBox('instance');
+
+ assert.deepEqual(instance.option('selectedItems'), []);
+ assert.deepEqual(instance.option('items'), ['test 1', 'Item_1', 'Item_2', 'Item_3']);
+ } catch(error) {
+ assert.ok(false, `Error encountered is: ${error.message}`);
+ }
+ });
+ });
 });
 
 QUnit.module('placeholder', () => {
@@ -5199,7 +5270,6 @@ QUnit.module('the \'fieldTemplate\' option', moduleSetup, () => {
  });
 });
 
-
 QUnit.module('the "customItemCreateEvent" option', {
  beforeEach: function() {
  this.onCustomItemCreatingSpy = sinon.spy();