From 96bcfc58aa5bad73fbb21b39b042341b0e05aa40 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 27 Apr 2023 10:46:39 +0100
Subject: [PATCH] Fix error about being unable to pass ref to function
 component (#10707)

---
 .../views/messages/DecryptionFailureBody.tsx       | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/views/messages/DecryptionFailureBody.tsx b/src/components/views/messages/DecryptionFailureBody.tsx
index 0120b960a8..028671f584 100644
--- a/src/components/views/messages/DecryptionFailureBody.tsx
+++ b/src/components/views/messages/DecryptionFailureBody.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, { forwardRef } from "react";
 import { MatrixEvent } from "matrix-js-sdk/src/matrix";
 
 import { _t } from "../../../languageHandler";
@@ -27,6 +27,12 @@ function getErrorMessage(mxEvent?: MatrixEvent): string {
 }
 
 // A placeholder element for messages that could not be decrypted
-export function DecryptionFailureBody({ mxEvent }: Partial<IBodyProps>): JSX.Element {
-    return <div className="mx_DecryptionFailureBody mx_EventTile_content">{getErrorMessage(mxEvent)}</div>;
-}
+export const DecryptionFailureBody = forwardRef<HTMLDivElement, Partial<IBodyProps>>(
+    ({ mxEvent }, ref): JSX.Element => {
+        return (
+            <div className="mx_DecryptionFailureBody mx_EventTile_content" ref={ref}>
+                {getErrorMessage(mxEvent)}
+            </div>
+        );
+    },
+);