Add possibility to change switch value

3 files changed, 9 insertions, 5 deletions

diff --git a/gui/src/renderer/components/CustomDnsSettings.tsx b/gui/src/renderer/components/CustomDnsSettings.tsx
index c0d1a66f5c..d70b9d0eba 100644
--- a/gui/src/renderer/components/CustomDnsSettings.tsx
+++ b/gui/src/renderer/components/CustomDnsSettings.tsx
@@ -194,7 +194,7 @@ export default function CustomDnsSettings() {
           </AriaLabel>
           <AriaInput>
             <Cell.Switch
-              ref={switchRef}
+              innerRef={switchRef}
               isOn={dns.state === 'custom' || inputVisible}
               onChange={setCustomDnsEnabled}
             />
diff --git a/gui/src/renderer/components/Switch.tsx b/gui/src/renderer/components/Switch.tsx
index e3b722c721..c6464510f1 100644
--- a/gui/src/renderer/components/Switch.tsx
+++ b/gui/src/renderer/components/Switch.tsx
@@ -11,7 +11,7 @@ interface IProps {
   onChange?: (isOn: boolean) => void;
   className?: string;
   disabled?: boolean;
-  forwardedRef?: React.Ref<HTMLDivElement>;
+  innerRef?: React.Ref<HTMLDivElement>;
 }
 
 interface IState {
@@ -103,9 +103,13 @@ export default class Switch extends React.PureComponent<IProps, IState> {
     );
   }
 
+  public setOn(isOn: boolean) {
+    this.setState({ isOn });
+  }
+
   private refCallback = (element: HTMLDivElement | null) => {
     assignToRef(element, this.containerRef);
-    assignToRef(element, this.props.forwardedRef);
+    assignToRef(element, this.props.innerRef);
   };
 
   private onTransitionEnd = (event: React.TransitionEvent) => {
diff --git a/gui/src/renderer/components/cell/Input.tsx b/gui/src/renderer/components/cell/Input.tsx
index 1dd240b3ce..c57d552866 100644
--- a/gui/src/renderer/components/cell/Input.tsx
+++ b/gui/src/renderer/components/cell/Input.tsx
@@ -8,10 +8,10 @@ import ImageView from '../ImageView';
 
 export const Switch = React.forwardRef(function SwitchT(
   props: StandaloneSwitch['props'],
-  ref: React.Ref<HTMLDivElement>,
+  ref: React.Ref<StandaloneSwitch>,
 ) {
   const disabled = useContext(CellDisabledContext);
-  return <StandaloneSwitch forwardedRef={ref} disabled={disabled} {...props} />;
+  return <StandaloneSwitch ref={ref} disabled={disabled} {...props} />;
 });
 
 export const InputFrame = styled.div({