TypeError: Cannot read properties of undefined (reading 'style') at FrozenColumn.updateStickyPosition

[tamvcspk]

If you have a PrimeNG PRO Support subscription please post your issue at;

https://pro.primefaces.org

where our team will respond within 4 business hours.

If you do not have a PrimeNG PRO Support subscription, fill-in the report below. Please note that
your issue will be added to the waiting list of community issues and will be reviewed on a first-come first-serve basis, as a result, the support team is unable to guarantee a specific schedule on when it will be reviewed. Thank you for your understanding.

Current Queue Time for Review
Without PRO Support: ~8-12 weeks.
With PRO Support: 1 hour

I'm submitting a ... (check one with "x")

[x ] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
Please demonstrate your case at stackblitz by using the issue template below. Issues without a test case have much less possibility to be reviewd in detail and assisted.

https://stackblitz.com/github/primefaces/primeng-issue-template

Current behavior

The console will throw the following error if there are more than 1 columns with pFrozenColumn along with empty message template.

ERROR TypeError: Cannot read properties of undefined (reading 'style')
    at FrozenColumn.updateStickyPosition (table.ts:2661)
    at FrozenColumn.ngAfterViewInit (table.ts:2633)
    at callProviderLifecycles (provider.ts:570)
    at callElementProvidersLifecycles (provider.ts:542)
    at callLifecycleHooksChildrenFirst (provider.ts:530)
    at checkAndUpdateView (view.ts:388)
    at callViewAction (view.ts:628)
    at execEmbeddedViewsAction (view.ts:593)
    at checkAndUpdateView (view.ts:373)
    at callViewAction (view.ts:628)

It happened because the index of filterRow.children[index] is null in updateStickyPosition function. The emptymessage template has only 1 td element.

if (filterRow) {
                let index = DomHandler.index(this.el.nativeElement);
                filterRow.children[index].style.left = this.el.nativeElement.style.left;
                filterRow.children[index].style.right = this.el.nativeElement.style.right;
            }

This might cause the table's filter global to work incorrectly.

Expected behavior

Minimal reproduction of the problem with instructions

https://stackblitz.com/edit/github-dmm8bb?file=src%2Fapp%2Fapp.component.html
What is the motivation / use case for changing the behavior?

Please tell us about your environment:

• Angular version: 12.2.0

• PrimeNG version: 12.2.1

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

• Language: [all | TypeScript X.X | ES6/7 | ES5]

• Node (for AoT issues): node --version =

[tamvcspk]

I cloned this project and tried to add a condition to and it works fine

updateStickyPosition() {
        if (this._frozen) {
            if (this.alignFrozen === 'right') {
                let right = 0;
                let next = this.el.nativeElement.nextElementSibling;
                if (next) {
                    right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right);
                }
                this.el.nativeElement.style.right = right + 'px';
            }
            else {
                let left = 0;
                let prev = this.el.nativeElement.previousElementSibling;
                if (prev) {
                    left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left);
                }
                this.el.nativeElement.style.left = left + 'px';
            }

            let filterRow = this.el.nativeElement.parentElement.nextElementSibling;

            if (filterRow) {
                let index = DomHandler.index(this.el.nativeElement);
                if (filterRow.children[index]) {
                    filterRow.children[index].style.left = this.el.nativeElement.style.left;
                    filterRow.children[index].style.right = this.el.nativeElement.style.right;
                }
            }
        }
    }

[antsteyer]

I have the same problem too.
This if code is really weird, it's called even if we don't have the "Filter Row" feature activated in the p-table. The pFrozenColumn directive can be set on <td>, not only in theader, so it can't work as intended.

[tamvcspk]

The nextElementSibling code will return the next <tr>, in this case it's the <tr> in pTemplate="emptymessage". I guess it will happen to other <tr> that come next to the last row that have pFrozenColumn in it.

[yigitfindikli]

Hi @tamvcspk,

Thanks for your report and suggestion.

[antsteyer]

Hi @yigitfindikli, thanks for fixing this. Will it be fixed also for version 12.2.x ? In my project I don't want to update to V13 yet.

[yigitfindikli]

Hi @antsteyer,

Fixed 12.2.3 too.