Element attributes do not get applied the first time a dxo-filter-builder-popup is opened

Steps to Reproduce:

Use this demo: https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/FilterPanel/Angular/Light/

Replace the existing dxo-filter-builder-popup with

<dxo-filter-builder-popup
[elementAttr]="{class: 'this-should-exist'}"
    [position]="popupPosition">
</dxo-filter-builder-popup>

Hit Apply
In the demo, click on [Employee] Equals 'Clark Morgan' And [Order Date] Weekends
Open the inspector (hit F12)
Search for 'this-should-exist'. Note there is 2 so far (the text entered and the one near the button clicked in step 4.)
Close the modal and repeat steps 4-6 and note there is now a third instance of 'this-should-exist', the one expected to exist before.

Results You Received:

First time opening the Filter Builder modal does not apply the elementAttr as expected to the modal itself.

Results You Expected:

The elementAttr should be applied on the first time the modal is opened, similar to the second time it is opened.

Environment Details:

Browser: Chrome - Version 83.0.4103.106 (Official Build) (64-bit) OS: Microsoft Windows 10 Pro (Version 10.0.18363 Build 18363) npm:

devextreme: "^20.1.3"
devextreme-angular: "^20.1.3"
devextreme-aspnet-data-nojquery: "^2.6.1"

Hi,

Our Popup widget does not allow specifying CSS class using the elementAttr option. That is why, your scenario does not operate properly. We are going to improve this behavior in future versions.

Meanwhile, you can achieve your goal using the following code in the DataGrid.onContentReady event handler as shown below:

onContentReady(e: any) {
   //__isReady is a fake option for preventing from code execution 
   //each time the onContentReady is called
   if(!e.component.__isReady) { 
       e.component.__isReady = true;
       e.component.getView('filterBuilderView').element()[0].classList.add('this-should-exist');
    }
}

Note that this approach uses an undocumented API that may not work in future versions.

DevExpress / DevExtreme