Conflict between picklist used inputicon-style and table loading mask

[egorbwork]

Describe the bug

When the primeng table datatable mask is used, its styles are overriden by the p-overlay-mask that is loaded from base styles later. An example: We are using the table and in a dynamic dialog or popover with ngTemplate we used the picklist with filterBy. After we open modal|popover, table mask changes from position absolute to position fixed and blocks entire screen on lazy loading.

before:

after:

Pull Request Link

#17261

Reason for not contributing a PR

• Lack of time
• Unsure how to implement the fix/feature
• Difficulty understanding the codebase
• Other

Other Reason

No response

Reproducer

https://stackblitz.com/edit/github-7en3trgo?file=src%2Fapp%2Fapp.component.html

Environment

ubuntu 22, firefox,

Angular version

19

PrimeNG version

v19

Node version

No response

Browser(s)

firefox 133

Steps to reproduce the behavior

1. Add a p-table on the page and set loading flag usage for it
2. Add a popover(with ng-template) or dynamic dialog with picklist that have filterBy option enabled
3. Open the dialog or popover with picklist and close it
4. toggle loading status for the table.
   Result: The datatable-overlay is fixed instead of absolute.

Expected behavior

The datatable-overlay should remain fixed, after any base style components loading.

[benoitjry]

Happens same with the icon

My fixes :

.p-datatable-mask.p-overlay-mask {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.p-datatable-loading-icon.p-icon{
  font-size: var(--datatable-loading-icon-size);
  width: var(--datatable-loading-icon-size);
  height: var(--datatable-loading-icon-size);
}

[egorbwork]

Happens same with the icon

My fixes :

.p-datatable-mask.p-overlay-mask {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.p-datatable-loading-icon.p-icon{
  font-size: var(--datatable-loading-icon-size);
  width: var(--datatable-loading-icon-size);
  height: var(--datatable-loading-icon-size);
}

Thank you, added similar changes in the pull-request.

[BeGj]

Thank you @egorbwork for reporting this issue, and also providing a temporary fix.
For us we added

.p-datatable-mask.p-overlay-mask {
    position: absolute;
}

in our styles.scss to fix the issue on our end.

(Our issue was that the loading mask on tables did not contain itself to the table, but spanned across the whole interface (outside the table it was supposed to).

Environment: angular 19, primeng 19.0.3/4/5 + tailwindcss....