From 52f5c5a09a06068f7c9ff8915def00fd27207ea8 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Fri, 10 Nov 2023 14:18:19 +0300
Subject: [PATCH] Fixed #4795 - v2 DataTable: Frozen column improvements

---
 src/components/datatable/BodyCell.vue   |  2 +-
 src/components/datatable/FooterCell.vue |  2 +-
 src/components/datatable/HeaderCell.vue |  4 ++--
 src/components/utils/DomHandler.js      | 28 +++++++++++++++++++++++++
 src/components/utils/Utils.d.ts         |  2 ++
 5 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/src/components/datatable/BodyCell.vue b/src/components/datatable/BodyCell.vue
index 167478d251..9947e9bd19 100755
--- a/src/components/datatable/BodyCell.vue
+++ b/src/components/datatable/BodyCell.vue
@@ -343,7 +343,7 @@ export default {
                 let align = this.columnProp('alignFrozen');
                 if (align === 'right') {
                     let right = 0;
-                    let next = this.$el.nextElementSibling;
+                    let next = DomHandler.getNextElementSibling(this.$el, '.p-frozen-column');
                     if (next) {
                         right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
                     }
diff --git a/src/components/datatable/FooterCell.vue b/src/components/datatable/FooterCell.vue
index 36e8d68cef..a46494dd10 100644
--- a/src/components/datatable/FooterCell.vue
+++ b/src/components/datatable/FooterCell.vue
@@ -45,7 +45,7 @@ export default {
                 let align = this.columnProp('alignFrozen');
                 if (align === 'right') {
                     let right = 0;
-                    let next = this.$el.nextElementSibling;
+                    let next = DomHandler.getNextElementSibling(this.$el, '.p-frozen-column');
                     if (next) {
                         right = DomHandler.getOuterWidth(next) + parseFloat(next.style.left);
                     }
diff --git a/src/components/datatable/HeaderCell.vue b/src/components/datatable/HeaderCell.vue
index bc8a33ad9d..177c9f2296 100644
--- a/src/components/datatable/HeaderCell.vue
+++ b/src/components/datatable/HeaderCell.vue
@@ -155,7 +155,7 @@ export default {
                 let align = this.columnProp('alignFrozen');
                 if (align === 'right') {
                     let right = 0;
-                    let next = this.$el.nextElementSibling;
+                    let next = DomHandler.getNextElementSibling(this.$el, '.p-frozen-column');
                     if (next) {
                         right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
                     }
@@ -163,7 +163,7 @@ export default {
                 }
                 else {
                     let left = 0;
-                    let prev = this.$el.previousElementSibling;
+                    let prev = DomHandler.getPreviousElementSibling(this.$el, '.p-frozen-column');
                     if (prev) {
                         left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
                     }
diff --git a/src/components/utils/DomHandler.js b/src/components/utils/DomHandler.js
index 445fd03fe8..6f4753300a 100755
--- a/src/components/utils/DomHandler.js
+++ b/src/components/utils/DomHandler.js
@@ -480,6 +480,34 @@ export default class DomHandler {
         return focusableElements.length > 0 ? focusableElements[0] : null;
     }
 
+    static getPreviousElementSibling(element, selector) {
+        let previousElement = element.previousElementSibling;
+
+        while (previousElement) {
+            if (previousElement.matches(selector)) {
+                return previousElement;
+            } else {
+                previousElement = previousElement.previousElementSibling;
+            }
+        }
+
+        return null;
+    }
+
+    static getNextElementSibling(element, selector) {
+        let nextElement = element.nextElementSibling;
+
+        while (nextElement) {
+            if (nextElement.matches(selector)) {
+                return nextElement;
+            } else {
+                nextElement = nextElement.nextElementSibling;
+            }
+        }
+
+        return null;
+    }
+
     static isClickable(element) {
         const targetNode = element.nodeName;
         const parentNode = element.parentElement && element.parentElement.nodeName;
diff --git a/src/components/utils/Utils.d.ts b/src/components/utils/Utils.d.ts
index c700f31c45..4fe835b465 100644
--- a/src/components/utils/Utils.d.ts
+++ b/src/components/utils/Utils.d.ts
@@ -44,6 +44,8 @@ export declare class DomHandler {
     static invokeElementMethod(el: HTMLElement, methodName: string, args: any): void;
     static getFocusableElements(el: HTMLElement): any[];
     static getFirstFocusableElement(el: HTMLElement): any;
+    static getPreviousElementSibling(el: HTMLElement, selector?: string): any;
+    static getNextElementSibling(el: HTMLElement, selector?: string): any;
     static isClickable(el: HTMLElement): boolean;
     static applyStyle(el: HTMLElement, style: any): void;
     static isIOS(): boolean;