3 files changed, 16 insertions, 5 deletions
diff --git a/gui/src/renderer/components/Switch.tsx b/gui/src/renderer/components/Switch.tsx
index f04ac91d39..0f90a4e7e1 100644
--- a/gui/src/renderer/components/Switch.tsx
+++ b/gui/src/renderer/components/Switch.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { colors } from '../../config.json';
+import { assignToRef } from '../lib/utilityHooks';
 
 interface IProps {
   id?: string;
@@ -10,6 +11,7 @@ interface IProps {
   onChange?: (isOn: boolean) => void;
   className?: string;
   disabled?: boolean;
+  forwardedRef?: React.Ref<HTMLDivElement>;
 }
 
 interface IState {
@@ -75,15 +77,16 @@ export default class Switch extends React.PureComponent<IProps, IState> {
   public render() {
     return (
       <SwitchContainer
+        ref={this.refCallback}
         id={this.props.id}
         role="checkbox"
         aria-labelledby={this.props['aria-labelledby']}
         aria-describedby={this.props['aria-describedby']}
         aria-checked={this.props.isOn}
-        ref={this.containerRef}
         onClick={this.handleClick}
         disabled={this.props.disabled ?? false}
         aria-disabled={this.props.disabled ?? false}
+        tabIndex={-1}
         className={this.props.className}>
         <Knob
           disabled={this.props.disabled ?? false}
@@ -95,6 +98,11 @@ export default class Switch extends React.PureComponent<IProps, IState> {
     );
   }
 
+  private refCallback = (element: HTMLDivElement | null) => {
+    assignToRef(element, this.containerRef);
+    assignToRef(element, this.props.forwardedRef);
+  };
+
   private handleClick = () => {
     if (this.props.disabled) {
       return;
diff --git a/gui/src/renderer/components/cell/Input.tsx b/gui/src/renderer/components/cell/Input.tsx
index 4a11791136..bfa47b6687 100644
--- a/gui/src/renderer/components/cell/Input.tsx
+++ b/gui/src/renderer/components/cell/Input.tsx
@@ -5,10 +5,13 @@ import { mediumText } from '../common-styles';
 import { CellDisabledContext } from './Container';
 import StandaloneSwitch from '../Switch';
 
-export function Switch(props: StandaloneSwitch['props']) {
+export const Switch = React.forwardRef(function SwitchT(
+  props: StandaloneSwitch['props'],
+  ref: React.Ref<HTMLDivElement>,
+) {
   const disabled = useContext(CellDisabledContext);
-  return <StandaloneSwitch disabled={disabled} {...props} />;
-}
+  return <StandaloneSwitch forwardedRef={ref} disabled={disabled} {...props} />;
+});
 
 export const InputFrame = styled.div({
   flexGrow: 0,
diff --git a/gui/src/renderer/lib/utilityHooks.ts b/gui/src/renderer/lib/utilityHooks.ts
index 4156c546ea..ee3f191593 100644
--- a/gui/src/renderer/lib/utilityHooks.ts
+++ b/gui/src/renderer/lib/utilityHooks.ts
@@ -18,7 +18,7 @@ export function useCombinedRefs<T>(...refs: (React.Ref<T> | undefined)[]): React
   return useCallback((element: T | null) => refs.forEach((ref) => assignToRef(element, ref)), []);
 }
 
-function assignToRef<T>(element: T | null, ref?: React.Ref<T>) {
+export function assignToRef<T>(element: T | null, ref?: React.Ref<T>) {
   if (typeof ref === 'function') {
     ref(element);
   } else if (ref && element) {