this.outerRef – TS2531: Object is possibly 'null'.

[andreisocaciu-pitech]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

I have a problem with the types (TS2531: Object is possibly 'null'. on this.outerRef)

Here is the diff that solved my problem:

diff --git a/node_modules/react-slidedown/lib/slidedown.tsx b/node_modules/react-slidedown/lib/slidedown.tsx
index 9c28156..5acba78 100644
--- a/node_modules/react-slidedown/lib/slidedown.tsx
+++ b/node_modules/react-slidedown/lib/slidedown.tsx
@@ -77,8 +77,8 @@ class SlideDownContent extends Component<SlideDownContentProps, SlideDownContent
         }
     }
 
-    componentDidUpdate(_prevProps, _prevState, snapshot: string | null) {
-        if (this.outerRef) {
+    componentDidUpdate(_prevProps: any, _prevState: any, snapshot: string | null) {
+        if (this.outerRef && snapshot) {
             this.startTransition(snapshot)
         }
     }
@@ -86,13 +86,13 @@ class SlideDownContent extends Component<SlideDownContentProps, SlideDownContent
     private startTransition(prevHeight: string) {
         let endHeight = '0px'
 
-        if (!this.props.closed && !this.state.childrenLeaving && this.state.children) {
+        if (this.outerRef && !this.props.closed && !this.state.childrenLeaving && this.state.children) {
             this.outerRef.classList.remove('closed')
             this.outerRef.style.height = 'auto'
             endHeight = getComputedStyle(this.outerRef).height
         }
 
-        if (parseFloat(endHeight).toFixed(2) !== parseFloat(prevHeight).toFixed(2)) {
+        if (this.outerRef && parseFloat(endHeight).toFixed(2) !== parseFloat(prevHeight).toFixed(2)) {
             this.outerRef.classList.add('transitioning')
             this.outerRef.style.height = prevHeight
             this.outerRef.offsetHeight // force repaint
@@ -102,12 +102,14 @@ class SlideDownContent extends Component<SlideDownContentProps, SlideDownContent
     }
 
     private endTransition() {
-        this.outerRef.classList.remove('transitioning')
-        this.outerRef.style.transitionProperty = 'none'
-        this.outerRef.style.height = this.props.closed ? '0px' : 'auto'
+        if (this.outerRef) {
+            this.outerRef.classList.remove('transitioning')
+            this.outerRef.style.transitionProperty = 'none'
+            this.outerRef.style.height = this.props.closed ? '0px' : 'auto'
 
-        if (this.props.closed || !this.state.children) {
-            this.outerRef.classList.add('closed')
+            if (this.props.closed || !this.state.children) {
+                this.outerRef.classList.add('closed')
+            }
         }
     }
 

This issue body was partially generated by patch-package.