From 9a72a34cef51b7105ebd0e7ea9da875991a7a939 Mon Sep 17 00:00:00 2001
From: Wang Sijie <wangsijie@silverhand.io>
Date: Fri, 24 Jun 2022 18:23:48 +0800
Subject: [PATCH] fix(console): change checkbox to controlled comp (#1235)

---
 .../console/src/components/Checkbox/index.tsx | 23 +++++++++++++++----
 .../components/SignInMethodsForm.tsx          | 15 ++++++++----
 2 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/packages/console/src/components/Checkbox/index.tsx b/packages/console/src/components/Checkbox/index.tsx
index 74e66983f..55d15d094 100644
--- a/packages/console/src/components/Checkbox/index.tsx
+++ b/packages/console/src/components/Checkbox/index.tsx
@@ -1,23 +1,36 @@
 import { nanoid } from 'nanoid';
-import React, { forwardRef, InputHTMLAttributes, ReactNode, Ref, useState } from 'react';
+import React, { ReactNode, useState } from 'react';
 
 import Icon from './Icon';
 import * as styles from './index.module.scss';
 
-type Props = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> & {
+type Props = {
+  // eslint-disable-next-line react/boolean-prop-naming
+  value: boolean;
+  onChange: (value: boolean) => void;
   label?: ReactNode;
+  // eslint-disable-next-line react/boolean-prop-naming
+  disabled: boolean;
 };
 
-const Checkbox = ({ label, disabled, ...rest }: Props, ref: Ref<HTMLInputElement>) => {
+const Checkbox = ({ value, onChange, label, disabled }: Props) => {
   const [id] = useState(nanoid());
 
   return (
     <div className={styles.checkbox}>
-      <input id={id} type="checkbox" disabled={disabled} {...rest} ref={ref} />
+      <input
+        id={id}
+        type="checkbox"
+        checked={value}
+        disabled={disabled}
+        onChange={(event) => {
+          onChange(event.target.checked);
+        }}
+      />
       <Icon className={styles.icon} />
       {label && <label htmlFor={id}>{label}</label>}
     </div>
   );
 };
 
-export default forwardRef<HTMLInputElement, Props>(Checkbox);
+export default Checkbox;
diff --git a/packages/console/src/pages/SignInExperience/components/SignInMethodsForm.tsx b/packages/console/src/pages/SignInExperience/components/SignInMethodsForm.tsx
index fb95f30e2..9a562d720 100644
--- a/packages/console/src/pages/SignInExperience/components/SignInMethodsForm.tsx
+++ b/packages/console/src/pages/SignInExperience/components/SignInMethodsForm.tsx
@@ -60,10 +60,17 @@ const SignInMethodsForm = () => {
 
         return (
           <div key={method} className={styles.method}>
-            <Checkbox
-              label={label}
-              disabled={primaryMethod === method}
-              {...register(`signInMethods.${method}`)}
+            <Controller
+              name={`signInMethods.${method}`}
+              control={control}
+              render={({ field: { value, onChange } }) => (
+                <Checkbox
+                  label={label}
+                  disabled={primaryMethod === method}
+                  value={value}
+                  onChange={onChange}
+                />
+              )}
             />
             {enabled && <ConnectorSetupWarning method={method} />}
           </div>