fix(clerk-js): Sanitize props of inputs

clerk · Oct 31, 2023 · b64e8cf · b64e8cf
1 parent c9aca7a
commit b64e8cf
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 8 deletions.
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/InviteMembersForm.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/InviteMembersForm.tsx
@@ -52,11 +52,11 @@ export const InviteMembersForm = (props: InviteMembersFormProps) => {
 
   const {
     props: {
-      /* eslint-disable @typescript-eslint/no-unused-vars */
       setError,
       setWarning,
       setSuccess,
       setInfo,
+      isFocused,
       validatePassword,
       setHasPassedComplexity,
       hasPassedComplexity,

diff --git a/packages/clerk-js/src/ui/elements/FormControl.tsx b/packages/clerk-js/src/ui/elements/FormControl.tsx
@@ -36,6 +36,7 @@ type FormControlProps = Omit<PropsOfComponent<typeof Input>, 'label' | 'placehol
   id: FieldId;
   isRequired?: boolean;
   isOptional?: boolean;
+  isFocused?: boolean;
   onActionClicked?: React.MouseEventHandler;
   isDisabled?: boolean;
   label?: string | LocalizationKey;
@@ -263,15 +264,15 @@ export const FormFeedback = (props: FormFeedbackProps) => {
 export const FormControl = forwardRef<HTMLInputElement, PropsWithChildren<FormControlProps>>((props, ref) => {
   const { t } = useLocalizations();
   const card = useCardState();
-  const [isFocused, setIsFocused] = useState(false);
+  // const [isFocused, setIsFocused] = useState(false);
   const {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     hasPassedComplexity,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
     infoText,
     id,
     isRequired,
     isOptional,
+    isFocused,
     label,
     actionLabel,
     onActionClicked,
@@ -294,7 +295,6 @@ export const FormControl = forwardRef<HTMLInputElement, PropsWithChildren<FormCo
 
   const isDisabled = props.isDisabled || card.isLoading;
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { validatePassword, ...inputProps } = restInputProps;
 
   const inputElementProps = useMemo(() => {
@@ -405,11 +405,9 @@ export const FormControl = forwardRef<HTMLInputElement, PropsWithChildren<FormCo
       {...inputElementProps}
       onFocus={e => {
         inputElementProps.onFocus?.(e);
-        setIsFocused(true);
       }}
       onBlur={e => {
         inputElementProps.onBlur?.(e);
-        setIsFocused(false);
       }}
       ref={ref}
       placeholder={t(placeholder)}

diff --git a/packages/clerk-js/src/ui/primitives/hooks/useFormControl.tsx b/packages/clerk-js/src/ui/primitives/hooks/useFormControl.tsx
@@ -174,7 +174,6 @@ export const sanitizeInputProps = (
   obj: ReturnType<typeof useFormField>,
   keep?: (keyof ReturnType<typeof useFormField>)[],
 ) => {
-  /* eslint-disable */
   const {
     radioOptions,
     validatePassword,
@@ -190,6 +189,7 @@ export const sanitizeInputProps = (
     errorMessageId,
     fieldId,
     label,
+    clearFeedback,
     ...inputProps
   } = obj;
   /* eslint-enable */