From b8e54750a06ebd4bcbaf69236a2e8e9315565810 Mon Sep 17 00:00:00 2001
From: R Midhun Suresh <hi@midhun.dev>
Date: Wed, 13 Nov 2024 20:39:17 +0530
Subject: [PATCH] Use Ref type to accept both types of ref

---
 src/components/views/elements/Field.tsx             | 9 +++++----
 src/components/views/elements/StyledCheckbox.tsx    | 4 ++--
 src/components/views/elements/StyledRadioButton.tsx | 4 ++--
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/components/views/elements/Field.tsx b/src/components/views/elements/Field.tsx
index 789987d8ac..26e76bb014 100644
--- a/src/components/views/elements/Field.tsx
+++ b/src/components/views/elements/Field.tsx
@@ -14,6 +14,7 @@ import React, {
     ComponentProps,
     MutableRefObject,
     RefCallback,
+    Ref,
 } from "react";
 import classNames from "classnames";
 import { debounce } from "lodash";
@@ -77,7 +78,7 @@ interface IProps {
 
 export interface IInputProps extends IProps, InputHTMLAttributes<HTMLInputElement> {
     // The ref pass through to the input
-    inputRef?: RefObject<HTMLInputElement> | RefCallback<HTMLInputElement>;
+    inputRef?: Ref<HTMLInputElement>;
     // The element to create. Defaults to "input".
     element: "input";
     // The input's value. This is a controlled component, so the value is required.
@@ -86,7 +87,7 @@ export interface IInputProps extends IProps, InputHTMLAttributes<HTMLInputElemen
 
 interface ISelectProps extends IProps, SelectHTMLAttributes<HTMLSelectElement> {
     // The ref pass through to the select
-    inputRef?: RefObject<HTMLSelectElement> | RefCallback<HTMLSelectElement>;
+    inputRef?: Ref<HTMLSelectElement>;
     // To define options for a select, use <Field><option ... /></Field>
     element: "select";
     // The select's value. This is a controlled component, so the value is required.
@@ -95,7 +96,7 @@ interface ISelectProps extends IProps, SelectHTMLAttributes<HTMLSelectElement> {
 
 interface ITextareaProps extends IProps, TextareaHTMLAttributes<HTMLTextAreaElement> {
     // The ref pass through to the textarea
-    inputRef?: RefObject<HTMLTextAreaElement> | RefCallback<HTMLTextAreaElement>;
+    inputRef?: Ref<HTMLTextAreaElement>;
     element: "textarea";
     // The textarea's value. This is a controlled component, so the value is required.
     value: string;
@@ -103,7 +104,7 @@ interface ITextareaProps extends IProps, TextareaHTMLAttributes<HTMLTextAreaElem
 
 export interface INativeOnChangeInputProps extends IProps, InputHTMLAttributes<HTMLInputElement> {
     // The ref pass through to the input
-    inputRef?: RefObject<HTMLInputElement> | RefCallback<HTMLInputElement>;
+    inputRef?: Ref<HTMLInputElement>;
     element: "input";
     // The input's value. This is a controlled component, so the value is required.
     value: string;
diff --git a/src/components/views/elements/StyledCheckbox.tsx b/src/components/views/elements/StyledCheckbox.tsx
index d2ea5ccc87..83409b8f68 100644
--- a/src/components/views/elements/StyledCheckbox.tsx
+++ b/src/components/views/elements/StyledCheckbox.tsx
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { RefCallback } from "react";
+import React, { Ref } from "react";
 import { randomString } from "matrix-js-sdk/src/randomstring";
 import classnames from "classnames";
 
@@ -16,7 +16,7 @@ export enum CheckboxStyle {
 }
 
 interface IProps extends React.InputHTMLAttributes<HTMLInputElement> {
-    inputRef?: RefCallback<HTMLInputElement>;
+    inputRef?: Ref<HTMLInputElement>;
     kind?: CheckboxStyle;
     id?: string;
 }
diff --git a/src/components/views/elements/StyledRadioButton.tsx b/src/components/views/elements/StyledRadioButton.tsx
index 26dcd50624..01c30c837b 100644
--- a/src/components/views/elements/StyledRadioButton.tsx
+++ b/src/components/views/elements/StyledRadioButton.tsx
@@ -6,11 +6,11 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { RefCallback } from "react";
+import React, { Ref } from "react";
 import classnames from "classnames";
 
 interface IProps extends React.InputHTMLAttributes<HTMLInputElement> {
-    inputRef?: RefCallback<HTMLInputElement>;
+    inputRef?: Ref<HTMLInputElement>;
     outlined?: boolean;
     // If true (default), the children will be contained within a <label> element
     // If false, they'll be in a div. Putting interactive components that have labels