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

[markallenramirez]

No description provided.

[Copilot]

Pull request overview

Addresses T1300811 where a FilterBuilder value editor embedded inside a DropDownButton dropDownContentTemplate does not close when clicking outside the editor, by adding an end-to-end regression test and extending the FilterBuilder TestCafe model to access the value editor’s TextBox.

Changes:

• Added Field.getTextBox() helper to the TestCafe FilterBuilder field model.
• Added a new TestCafe E2E test covering editor closing behavior when FilterBuilder is rendered in DropDownButton dropDownContentTemplate.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
packages/testcafe-models/filterBuilder/field.ts	Adds a TextBox accessor for FilterBuilder field value editing.
e2e/testcafe-devextreme/tests/common/filterBuilder/filterBuilderEditor.ts	Adds regression test for closing the embedded editor on outside click (T1300811).

[Copilot]

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated no new comments.

[Copilot]

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

[Copilot]

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated no new comments.

Comments suppressed due to low confidence (1)

packages/testcafe-models/filterBuilder/field.ts:27

• getTextBox() creates a TextBox from a broad .dx-textbox selector, which can match unrelated/hidden text boxes on the page and make tests flaky. Narrow the selector to the visible textbox instance used by the value editor.

  // eslint-disable-next-line class-methods-use-this
  getTextBox(): TextBox { return new TextBox(`.${CLASS.textBox}`); }

[Copilot]

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

[Copilot]

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

Comments suppressed due to low confidence (1)

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

• To make the “click outside editor” step deterministic, render a small dedicated area inside the DropDownButton popup content (sibling of the FilterBuilder) that the test can click. This avoids relying on negative offsets and theme-dependent popup paddings.

    dropDownContentTemplate() {
      return ($('<div>') as any)
        .attr('id', 'filterBuilder')
        .dxFilterBuilder({
          fields: [{ dataField: 'text' }],

[Tucchhaa]

How about fetch popupContent element directly:

    const $popupContent = $(activeElement).closest(`.${POPUP_CONTENT_CLASS}`);

    if ($popupContent.length === 0) {
      return false;
    }

    const overlayID = $popupContent.attr('id');

[markallenramirez]

The popupContent element does not occupy the entire overlay.

In this case, the following line will not find popupContent when clicking outside it even if you clicked inside the overlay area.

const $popupContent = $(activeElement).closest(`.${POPUP_CONTENT_CLASS}`);

[Copilot]

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated no new comments.

Comments suppressed due to low confidence (1)

packages/testcafe-models/filterBuilder/field.ts:27

• getTextBox() uses a global .dx-textbox selector, which can match unrelated text boxes on the page and make tests interact with the wrong element. Since Field already has a scoped element, use it to locate the textbox within this specific field.

  // eslint-disable-next-line class-methods-use-this
  getTextBox(): TextBox { return new TextBox(`.${CLASS.textBox}`); }