diff --git a/src/components/structures/SpaceHierarchy.tsx b/src/components/structures/SpaceHierarchy.tsx
index d12f66e9c7..80193fd338 100644
--- a/src/components/structures/SpaceHierarchy.tsx
+++ b/src/components/structures/SpaceHierarchy.tsx
@@ -114,7 +114,7 @@ const Tile: React.FC<ITileProps> = ({
         (room.room_type === RoomType.Space ? _t("common|unnamed_space") : _t("common|unnamed_room"));
 
     const [showChildren, toggleShowChildren] = useStateToggle(true);
-    const [onFocus, isActive, ref] = useRovingTabIndex();
+    const [onFocus, isActive, ref, nodeRef] = useRovingTabIndex();
     const [busy, setBusy] = useState(false);
 
     const onPreviewClick = (ev: ButtonEvent): void => {
@@ -288,7 +288,7 @@ const Tile: React.FC<ITileProps> = ({
                     case KeyBindingAction.ArrowLeft:
                         e.preventDefault();
                         e.stopPropagation();
-                        ref.current?.focus();
+                        nodeRef.current?.focus();
                         break;
                 }
             };
@@ -315,7 +315,7 @@ const Tile: React.FC<ITileProps> = ({
                 case KeyBindingAction.ArrowRight:
                     handled = true;
                     if (showChildren) {
-                        const childSection = ref.current?.nextElementSibling;
+                        const childSection = nodeRef.current?.nextElementSibling;
                         childSection?.querySelector<HTMLDivElement>(".mx_SpaceHierarchy_roomTile")?.focus();
                     } else {
                         toggleShowChildren();
@@ -790,7 +790,7 @@ const SpaceHierarchy: React.FC<IProps> = ({ space, initialText = "", showRoom, a
     const onKeyDown = (ev: KeyboardEvent, state: IState): void => {
         const action = getKeyBindingsManager().getAccessibilityAction(ev);
         if (action === KeyBindingAction.ArrowDown && ev.currentTarget.classList.contains("mx_SpaceHierarchy_search")) {
-            state.refs[0]?.current?.focus();
+            state.nodes[0]?.focus();
         }
     };
 
diff --git a/src/components/views/dialogs/ForwardDialog.tsx b/src/components/views/dialogs/ForwardDialog.tsx
index 6e9df055cd..0a0a70d1b5 100644
--- a/src/components/views/dialogs/ForwardDialog.tsx
+++ b/src/components/views/dialogs/ForwardDialog.tsx
@@ -294,7 +294,7 @@ const ForwardDialog: React.FC<IProps> = ({ matrixClient: cli, event, permalinkCr
         const action = getKeyBindingsManager().getAccessibilityAction(ev);
         switch (action) {
             case KeyBindingAction.Enter: {
-                state.activeRef?.current?.querySelector<HTMLButtonElement>(".mx_ForwardList_sendButton")?.click();
+                state.activeNode?.querySelector<HTMLButtonElement>(".mx_ForwardList_sendButton")?.click();
                 break;
             }
 
@@ -347,13 +347,13 @@ const ForwardDialog: React.FC<IProps> = ({ matrixClient: cli, event, permalinkCr
                                     onSearch={(query: string): void => {
                                         setQuery(query);
                                         setTimeout(() => {
-                                            const ref = context.state.refs[0];
-                                            if (ref) {
+                                            const node = context.state.nodes[0];
+                                            if (node) {
                                                 context.dispatch({
                                                     type: Type.SetFocus,
-                                                    payload: { ref },
+                                                    payload: { node },
                                                 });
-                                                ref.current?.scrollIntoView?.({
+                                                node?.scrollIntoView?.({
                                                     block: "nearest",
                                                 });
                                             }
@@ -361,7 +361,7 @@ const ForwardDialog: React.FC<IProps> = ({ matrixClient: cli, event, permalinkCr
                                     }}
                                     autoFocus={true}
                                     onKeyDown={onKeyDownHandler}
-                                    aria-activedescendant={context.state.activeRef?.current?.id}
+                                    aria-activedescendant={context.state.activeNode?.id}
                                     aria-owns="mx_ForwardDialog_resultsList"
                                 />
                             )}
diff --git a/src/components/views/dialogs/spotlight/Option.tsx b/src/components/views/dialogs/spotlight/Option.tsx
index 4c7e7ac4f4..6de93d0512 100644
--- a/src/components/views/dialogs/spotlight/Option.tsx
+++ b/src/components/views/dialogs/spotlight/Option.tsx
@@ -7,13 +7,12 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import classNames from "classnames";
-import React, { ReactNode, RefObject } from "react";
+import React, { ReactNode } from "react";
 
 import { useRovingTabIndex } from "../../../../accessibility/RovingTabIndex";
 import AccessibleButton, { ButtonEvent } from "../../elements/AccessibleButton";
 
 interface OptionProps {
-    inputRef?: RefObject<HTMLLIElement>;
     endAdornment?: ReactNode;
     id?: string;
     className?: string;
@@ -21,8 +20,8 @@ interface OptionProps {
     children?: ReactNode;
 }
 
-export const Option: React.FC<OptionProps> = ({ inputRef, children, endAdornment, className, ...props }) => {
-    const [onFocus, isActive, ref] = useRovingTabIndex<HTMLLIElement>(inputRef);
+export const Option: React.FC<OptionProps> = ({ children, endAdornment, className, ...props }) => {
+    const [onFocus, isActive, ref] = useRovingTabIndex<HTMLLIElement>();
     return (
         <AccessibleButton
             {...props}
diff --git a/src/components/views/dialogs/spotlight/SpotlightDialog.tsx b/src/components/views/dialogs/spotlight/SpotlightDialog.tsx
index 5b4e395c9b..20d6825b9b 100644
--- a/src/components/views/dialogs/spotlight/SpotlightDialog.tsx
+++ b/src/components/views/dialogs/spotlight/SpotlightDialog.tsx
@@ -20,7 +20,7 @@ import {
 } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 import { normalize } from "matrix-js-sdk/src/utils";
-import React, { ChangeEvent, RefObject, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import React, { ChangeEvent, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import sanitizeHtml from "sanitize-html";
 
 import { KeyBindingAction } from "../../../../accessibility/KeyboardShortcuts";
@@ -90,8 +90,8 @@ interface IProps {
     onFinished(): void;
 }
 
-function refIsForRecentlyViewed(ref?: RefObject<HTMLElement>): boolean {
-    return ref?.current?.id?.startsWith("mx_SpotlightDialog_button_recentlyViewed_") === true;
+function nodeIsForRecentlyViewed(node?: HTMLElement): boolean {
+    return node?.id?.startsWith("mx_SpotlightDialog_button_recentlyViewed_") === true;
 }
 
 function getRoomTypes(filter: Filter | null): Set<RoomType | null> {
@@ -498,13 +498,13 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
     };
     useEffect(() => {
         setTimeout(() => {
-            const ref = rovingContext.state.refs[0];
-            if (ref) {
+            const node = rovingContext.state.nodes[0];
+            if (node) {
                 rovingContext.dispatch({
                     type: Type.SetFocus,
-                    payload: { ref },
+                    payload: { node },
                 });
-                ref.current?.scrollIntoView?.({
+                node?.scrollIntoView?.({
                     block: "nearest",
                 });
             }
@@ -1128,7 +1128,7 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
                 break;
         }
 
-        let ref: RefObject<HTMLElement> | undefined;
+        let node: HTMLElement | undefined;
         const accessibilityAction = getKeyBindingsManager().getAccessibilityAction(ev);
         switch (accessibilityAction) {
             case KeyBindingAction.Escape:
@@ -1141,20 +1141,20 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
                 ev.stopPropagation();
                 ev.preventDefault();
 
-                if (rovingContext.state.activeRef && rovingContext.state.refs.length > 0) {
-                    let refs = rovingContext.state.refs;
+                if (rovingContext.state.activeNode && rovingContext.state.nodes.length > 0) {
+                    let nodes = rovingContext.state.nodes;
                     if (!query && !filter !== null) {
                         // If the current selection is not in the recently viewed row then only include the
                         // first recently viewed so that is the target when the user is switching into recently viewed.
-                        const keptRecentlyViewedRef = refIsForRecentlyViewed(rovingContext.state.activeRef)
-                            ? rovingContext.state.activeRef
-                            : refs.find(refIsForRecentlyViewed);
+                        const keptRecentlyViewedRef = nodeIsForRecentlyViewed(rovingContext.state.activeNode)
+                            ? rovingContext.state.activeNode
+                            : nodes.find(nodeIsForRecentlyViewed);
                         // exclude all other recently viewed items from the list so up/down arrows skip them
-                        refs = refs.filter((ref) => ref === keptRecentlyViewedRef || !refIsForRecentlyViewed(ref));
+                        nodes = nodes.filter((ref) => ref === keptRecentlyViewedRef || !nodeIsForRecentlyViewed(ref));
                     }
 
-                    const idx = refs.indexOf(rovingContext.state.activeRef);
-                    ref = findSiblingElement(refs, idx + (accessibilityAction === KeyBindingAction.ArrowUp ? -1 : 1));
+                    const idx = nodes.indexOf(rovingContext.state.activeNode);
+                    node = findSiblingElement(nodes, idx + (accessibilityAction === KeyBindingAction.ArrowUp ? -1 : 1));
                 }
                 break;
 
@@ -1164,27 +1164,30 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
                 if (
                     !query &&
                     !filter !== null &&
-                    rovingContext.state.activeRef &&
-                    rovingContext.state.refs.length > 0 &&
-                    refIsForRecentlyViewed(rovingContext.state.activeRef)
+                    rovingContext.state.activeNode &&
+                    rovingContext.state.nodes.length > 0 &&
+                    nodeIsForRecentlyViewed(rovingContext.state.activeNode)
                 ) {
                     // we only intercept left/right arrows when the field is empty, and they'd do nothing anyway
                     ev.stopPropagation();
                     ev.preventDefault();
 
-                    const refs = rovingContext.state.refs.filter(refIsForRecentlyViewed);
-                    const idx = refs.indexOf(rovingContext.state.activeRef);
-                    ref = findSiblingElement(refs, idx + (accessibilityAction === KeyBindingAction.ArrowLeft ? -1 : 1));
+                    const nodes = rovingContext.state.nodes.filter(nodeIsForRecentlyViewed);
+                    const idx = nodes.indexOf(rovingContext.state.activeNode);
+                    node = findSiblingElement(
+                        nodes,
+                        idx + (accessibilityAction === KeyBindingAction.ArrowLeft ? -1 : 1),
+                    );
                 }
                 break;
         }
 
-        if (ref) {
+        if (node) {
             rovingContext.dispatch({
                 type: Type.SetFocus,
-                payload: { ref },
+                payload: { node },
             });
-            ref.current?.scrollIntoView({
+            node?.scrollIntoView({
                 block: "nearest",
             });
         }
@@ -1204,12 +1207,12 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
             case KeyBindingAction.Enter:
                 ev.stopPropagation();
                 ev.preventDefault();
-                rovingContext.state.activeRef?.current?.click();
+                rovingContext.state.activeNode?.click();
                 break;
         }
     };
 
-    const activeDescendant = rovingContext.state.activeRef?.current?.id;
+    const activeDescendant = rovingContext.state.activeNode?.id;
 
     return (
         <>
diff --git a/src/components/views/elements/Field.tsx b/src/components/views/elements/Field.tsx
index 540cf37cbe..cbd1ef2e36 100644
--- a/src/components/views/elements/Field.tsx
+++ b/src/components/views/elements/Field.tsx
@@ -73,9 +73,13 @@ interface IProps {
     // All other props pass through to the <input>.
 }
 
+type RefCallback<T extends HTMLElement> = (node: T | null) => void;
+
 export interface IInputProps extends IProps, InputHTMLAttributes<HTMLInputElement> {
     // The ref pass through to the input
     inputRef?: RefObject<HTMLInputElement>;
+    // Ref callback that will be attached to the input. This takes precedence over inputRef.
+    refCallback?: RefCallback<HTMLInputElement>;
     // The element to create. Defaults to "input".
     element: "input";
     // The input's value. This is a controlled component, so the value is required.
@@ -85,6 +89,8 @@ export interface IInputProps extends IProps, InputHTMLAttributes<HTMLInputElemen
 interface ISelectProps extends IProps, SelectHTMLAttributes<HTMLSelectElement> {
     // The ref pass through to the select
     inputRef?: RefObject<HTMLSelectElement>;
+    // Ref callback that will be attached to the input. This takes precedence over inputRef.
+    refCallback?: RefCallback<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.
@@ -94,6 +100,8 @@ interface ISelectProps extends IProps, SelectHTMLAttributes<HTMLSelectElement> {
 interface ITextareaProps extends IProps, TextareaHTMLAttributes<HTMLTextAreaElement> {
     // The ref pass through to the textarea
     inputRef?: RefObject<HTMLTextAreaElement>;
+    // Ref callback that will be attached to the input. This takes precedence over inputRef.
+    refCallback?: RefCallback<HTMLTextAreaElement>;
     element: "textarea";
     // The textarea's value. This is a controlled component, so the value is required.
     value: string;
@@ -102,6 +110,8 @@ interface ITextareaProps extends IProps, TextareaHTMLAttributes<HTMLTextAreaElem
 export interface INativeOnChangeInputProps extends IProps, InputHTMLAttributes<HTMLInputElement> {
     // The ref pass through to the input
     inputRef?: RefObject<HTMLInputElement>;
+    // Ref callback that will be attached to the input. This takes precedence over inputRef.
+    refCallback?: RefCallback<HTMLInputElement>;
     element: "input";
     // The input's value. This is a controlled component, so the value is required.
     value: string;
@@ -284,7 +294,7 @@ export default class Field extends React.PureComponent<PropShapes, IState> {
         const inputProps_: React.HTMLAttributes<HTMLSelectElement | HTMLInputElement | HTMLTextAreaElement> &
             React.ClassAttributes<HTMLSelectElement | HTMLInputElement | HTMLTextAreaElement> = {
             ...inputProps,
-            ref: this.inputRef,
+            ref: this.props.refCallback ?? this.inputRef,
         };
 
         const fieldInput = React.createElement(this.props.element, inputProps_, children);
diff --git a/src/components/views/elements/StyledCheckbox.tsx b/src/components/views/elements/StyledCheckbox.tsx
index 388c3f0a3c..42a02ea9b7 100644
--- a/src/components/views/elements/StyledCheckbox.tsx
+++ b/src/components/views/elements/StyledCheckbox.tsx
@@ -16,7 +16,7 @@ export enum CheckboxStyle {
 }
 
 interface IProps extends React.InputHTMLAttributes<HTMLInputElement> {
-    inputRef?: React.RefObject<HTMLInputElement>;
+    inputRef?: (node: HTMLInputElement | null) => void;
     kind?: CheckboxStyle;
     id?: string;
 }
diff --git a/src/components/views/elements/StyledRadioButton.tsx b/src/components/views/elements/StyledRadioButton.tsx
index 72cf3645b3..74c9b4a2fc 100644
--- a/src/components/views/elements/StyledRadioButton.tsx
+++ b/src/components/views/elements/StyledRadioButton.tsx
@@ -10,7 +10,7 @@ import React from "react";
 import classnames from "classnames";
 
 interface IProps extends React.InputHTMLAttributes<HTMLInputElement> {
-    inputRef?: React.RefObject<HTMLInputElement>;
+    inputRef?: (node: HTMLInputElement | null) => void;
     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
diff --git a/src/components/views/emojipicker/EmojiPicker.tsx b/src/components/views/emojipicker/EmojiPicker.tsx
index 4806ad4216..de109440d7 100644
--- a/src/components/views/emojipicker/EmojiPicker.tsx
+++ b/src/components/views/emojipicker/EmojiPicker.tsx
@@ -154,22 +154,22 @@ class EmojiPicker extends React.Component<IProps, IState> {
     };
 
     private keyboardNavigation(ev: React.KeyboardEvent, state: RovingState, dispatch: Dispatch<RovingAction>): void {
-        const node = state.activeRef?.current;
+        const node = state.activeNode?.current;
         const parent = node?.parentElement;
-        if (!parent || !state.activeRef) return;
+        if (!parent || !state.activeNode) return;
         const rowIndex = Array.from(parent.children).indexOf(node);
-        const refIndex = state.refs.indexOf(state.activeRef);
+        const refIndex = state.nodes.indexOf(state.activeNode);
 
         let focusRef: Ref | undefined;
         let newParent: HTMLElement | undefined;
         switch (ev.key) {
             case Key.ARROW_LEFT:
-                focusRef = state.refs[refIndex - 1];
+                focusRef = state.nodes[refIndex - 1];
                 newParent = focusRef?.current?.parentElement ?? undefined;
                 break;
 
             case Key.ARROW_RIGHT:
-                focusRef = state.refs[refIndex + 1];
+                focusRef = state.nodes[refIndex + 1];
                 newParent = focusRef?.current?.parentElement ?? undefined;
                 break;
 
@@ -178,11 +178,11 @@ class EmojiPicker extends React.Component<IProps, IState> {
                 // For up/down we find the prev/next parent by inspecting the refs either side of our row
                 const ref =
                     ev.key === Key.ARROW_UP
-                        ? state.refs[refIndex - rowIndex - 1]
-                        : state.refs[refIndex - rowIndex + EMOJIS_PER_ROW];
+                        ? state.nodes[refIndex - rowIndex - 1]
+                        : state.nodes[refIndex - rowIndex + EMOJIS_PER_ROW];
                 newParent = ref?.current?.parentElement ?? undefined;
                 const newTarget = newParent?.children[clamp(rowIndex, 0, newParent.children.length - 1)];
-                focusRef = state.refs.find((r) => r.current === newTarget);
+                focusRef = state.nodes.find((r) => r.current === newTarget);
                 break;
             }
         }
@@ -208,7 +208,7 @@ class EmojiPicker extends React.Component<IProps, IState> {
 
     private onKeyDown = (ev: React.KeyboardEvent, state: RovingState, dispatch: Dispatch<RovingAction>): void => {
         if (
-            state.activeRef?.current &&
+            state.activeNode?.current &&
             [Key.ARROW_DOWN, Key.ARROW_RIGHT, Key.ARROW_LEFT, Key.ARROW_UP].includes(ev.key)
         ) {
             this.keyboardNavigation(ev, state, dispatch);
diff --git a/src/components/views/emojipicker/Search.tsx b/src/components/views/emojipicker/Search.tsx
index 7be3f151b4..87397b6d4b 100644
--- a/src/components/views/emojipicker/Search.tsx
+++ b/src/components/views/emojipicker/Search.tsx
@@ -70,7 +70,7 @@ class Search extends React.PureComponent<IProps> {
                     onChange={(ev) => this.props.onChange(ev.target.value)}
                     onKeyDown={this.onKeyDown}
                     ref={this.inputRef}
-                    aria-activedescendant={this.context.state.activeRef?.current?.id}
+                    aria-activedescendant={this.context.state.activeNode?.id}
                     aria-controls="mx_EmojiPicker_body"
                     aria-haspopup="grid"
                     aria-autocomplete="list"
diff --git a/src/components/views/messages/JumpToDatePicker.tsx b/src/components/views/messages/JumpToDatePicker.tsx
index aecc239df8..a5f2a8d0c4 100644
--- a/src/components/views/messages/JumpToDatePicker.tsx
+++ b/src/components/views/messages/JumpToDatePicker.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, { useState, FormEvent } from "react";
+import React, { useState, FormEvent, RefObject } from "react";
 
 import { _t } from "../../../languageHandler";
 import Field from "../elements/Field";
@@ -23,7 +23,7 @@ const JumpToDatePicker: React.FC<IProps> = ({ ts, onDatePicked }: IProps) => {
     const dateInputDefaultValue = formatDateForInput(date);
 
     const [dateValue, setDateValue] = useState(dateInputDefaultValue);
-    const [onFocus, isActive, ref] = useRovingTabIndex<HTMLInputElement>();
+    const [onFocus, isActive, refCallback, inputRef] = useRovingTabIndex<HTMLInputElement>();
 
     const onDateValueInput = (ev: React.ChangeEvent<HTMLInputElement>): void => setDateValue(ev.target.value);
     const onJumpToDateSubmit = (ev: FormEvent): void => {
@@ -45,7 +45,8 @@ const JumpToDatePicker: React.FC<IProps> = ({ ts, onDatePicked }: IProps) => {
                 className="mx_JumpToDatePicker_datePicker"
                 label={_t("room|jump_to_date_prompt")}
                 onFocus={onFocus}
-                inputRef={ref}
+                inputRef={inputRef as RefObject<HTMLInputElement>}
+                refCallback={refCallback}
                 tabIndex={isActive ? 0 : -1}
             />
             <RovingAccessibleButton