DropDownButton – FilterBuilder editor does not close after clicking outside it when it is rendered via dropDownContentTemplate (T1300811)

e2e/testcafe-devextreme/tests/common/filterBuilder/filterBuilderEditor.ts

@@ -1,4 +1,5 @@
 import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import DropDownButton from 'devextreme-testcafe-models/dropDownButton';
 import FilterBuilder from 'devextreme-testcafe-models/filterBuilder';
 import { createWidget } from '../../../helpers/createWidget';
 import url from '../../../helpers/getPageUrl';
@@ -50,3 +51,49 @@ test('Change value editor to switch', async (t) => {
     },
   });
 });
+
+// T1300811
+test('Editor rendered in DropDownButton dropDownContentTemplate should close after clicking outside', async (t) => {
+  // arrange
+  const dropDownButton = new DropDownButton('#container');
+
+  // act
+  await t.click(dropDownButton.element);
+
+  // arrange
+  const filterBuilder = new FilterBuilder('#filterBuilder');
+
+  // assert
+  await t.expect(filterBuilder.isReady()).ok();
+
+  const field = filterBuilder.getField(0);
+  await t.expect(field.getValueText().textContent).eql('<enter a value>');
+
+  // act
+  await t
+    .click(field.getValueText())
+    .typeText(field.getTextBox().getInput(), 'test')
+    .click(await dropDownButton.getPopup());
+
+  // assert
+  await t
+    .expect(field.getTextBox().element.exists)
+    .notOk()
+    .expect(field.getValueText().textContent)
+    .eql('test');
+}).before(async () => {
+  await createWidget('dxDropDownButton', {
+    dropDownOptions: {
+      width: 400,
+      height: 100,
+    },
+    dropDownContentTemplate() {
+      return ($('<div>') as any)
+        .attr('id', 'filterBuilder')
+        .dxFilterBuilder({
+          fields: [{ dataField: 'text' }],
+          value: ['text', 'contains', ''],
+        });
+    },
+  });
+});

packages/testcafe-models/filterBuilder/field.ts

@@ -1,8 +1,10 @@
 import { Selector } from 'testcafe';
+import TextBox from '../textBox';
 
 const CLASS = {
   valueText: 'dx-filterbuilder-item-value-text',
   dateBox: 'dx-datebox',
+  textBox: 'dx-textbox',
 };
 
 export default class Field {
@@ -20,4 +22,6 @@ export default class Field {
 
   // eslint-disable-next-line class-methods-use-this
   getDateBox(): Selector { return Selector(`.${CLASS.dateBox}`); }
+
+  getTextBox(): TextBox { return new TextBox(`.${CLASS.textBox}`) }
 }