From 4fb793a33c628bc8fe0deeaf5af8822516ec9c77 Mon Sep 17 00:00:00 2001
From: FlipWarthog <flipwarthog@gmail.com>
Date: Wed, 25 Oct 2023 18:28:41 -0400
Subject: [PATCH] Fix #4689 - ScrollPanel: TypeError: Cannot read properties of
 null (reading 'scrollWidth')

---
 components/lib/scrollpanel/ScrollPanel.vue | 58 +++++++++++-----------
 1 file changed, 30 insertions(+), 28 deletions(-)

diff --git a/components/lib/scrollpanel/ScrollPanel.vue b/components/lib/scrollpanel/ScrollPanel.vue
index b92c6bc28..710bb1666 100644
--- a/components/lib/scrollpanel/ScrollPanel.vue
+++ b/components/lib/scrollpanel/ScrollPanel.vue
@@ -103,39 +103,41 @@ export default {
             }
         },
         moveBar() {
-            /* horizontal scroll */
-            let totalWidth = this.$refs.content.scrollWidth;
-            let ownWidth = this.$refs.content.clientWidth;
-            let bottom = (this.$el.clientHeight - this.$refs.xBar.clientHeight) * -1;
+            if (this.$refs.content) {
+                /* horizontal scroll */
+                let totalWidth = this.$refs.content.scrollWidth;
+                let ownWidth = this.$refs.content.clientWidth;
+                let bottom = (this.$el.clientHeight - this.$refs.xBar.clientHeight) * -1;
 
-            this.scrollXRatio = ownWidth / totalWidth;
+                this.scrollXRatio = ownWidth / totalWidth;
 
-            /* vertical scroll */
-            let totalHeight = this.$refs.content.scrollHeight;
-            let ownHeight = this.$refs.content.clientHeight;
-            let right = (this.$el.clientWidth - this.$refs.yBar.clientWidth) * -1;
+                /* vertical scroll */
+                let totalHeight = this.$refs.content.scrollHeight;
+                let ownHeight = this.$refs.content.clientHeight;
+                let right = (this.$el.clientWidth - this.$refs.yBar.clientWidth) * -1;
 
-            this.scrollYRatio = ownHeight / totalHeight;
+                this.scrollYRatio = ownHeight / totalHeight;
 
-            this.frame = this.requestAnimationFrame(() => {
-                if (this.scrollXRatio >= 1) {
-                    this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'true');
-                    !this.isUnstyled && DomHandler.addClass(this.$refs.xBar, 'p-scrollpanel-hidden');
-                } else {
-                    this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'false');
-                    !this.isUnstyled && DomHandler.removeClass(this.$refs.xBar, 'p-scrollpanel-hidden');
-                    this.$refs.xBar.style.cssText = 'width:' + Math.max(this.scrollXRatio * 100, 10) + '%; left:' + (this.$refs.content.scrollLeft / totalWidth) * 100 + '%;bottom:' + bottom + 'px;';
-                }
+                this.frame = this.requestAnimationFrame(() => {
+                    if (this.scrollXRatio >= 1) {
+                        this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'true');
+                        !this.isUnstyled && DomHandler.addClass(this.$refs.xBar, 'p-scrollpanel-hidden');
+                    } else {
+                        this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'false');
+                        !this.isUnstyled && DomHandler.removeClass(this.$refs.xBar, 'p-scrollpanel-hidden');
+                        this.$refs.xBar.style.cssText = 'width:' + Math.max(this.scrollXRatio * 100, 10) + '%; left:' + (this.$refs.content.scrollLeft / totalWidth) * 100 + '%;bottom:' + bottom + 'px;';
+                    }
 
-                if (this.scrollYRatio >= 1) {
-                    this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'true');
-                    !this.isUnstyled && DomHandler.addClass(this.$refs.yBar, 'p-scrollpanel-hidden');
-                } else {
-                    this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'false');
-                    !this.isUnstyled && DomHandler.removeClass(this.$refs.yBar, 'p-scrollpanel-hidden');
-                    this.$refs.yBar.style.cssText = 'height:' + Math.max(this.scrollYRatio * 100, 10) + '%; top: calc(' + (this.$refs.content.scrollTop / totalHeight) * 100 + '% - ' + this.$refs.xBar.clientHeight + 'px);right:' + right + 'px;';
-                }
-            });
+                    if (this.scrollYRatio >= 1) {
+                        this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'true');
+                        !this.isUnstyled && DomHandler.addClass(this.$refs.yBar, 'p-scrollpanel-hidden');
+                    } else {
+                        this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'false');
+                        !this.isUnstyled && DomHandler.removeClass(this.$refs.yBar, 'p-scrollpanel-hidden');
+                        this.$refs.yBar.style.cssText = 'height:' + Math.max(this.scrollYRatio * 100, 10) + '%; top: calc(' + (this.$refs.content.scrollTop / totalHeight) * 100 + '% - ' + this.$refs.xBar.clientHeight + 'px);right:' + right + 'px;';
+                    }
+                });
+            }
         },
         onYBarMouseDown(e) {
             this.isYBarClicked = true;