fix(striker-ui): remove disableAutocomplete from formik utils

striker-ui/components/ManageMailServer/AddMailServerForm.tsx

@@ -26,78 +26,73 @@ const AddMailServerForm: FC<AddMailServerFormProps> = (props) => {
     [mailServerUuid],
   );
 
-  const {
+  const { disabledSubmit, formik, formikErrors, handleChange } =
-    disableAutocomplete,
+    useFormikUtils<MailServerFormikValues>({
-    disabledSubmit,
+      initialValues: previousFormikValues ?? {
-    formik,
+        [msUuid]: {
-    formikErrors,
+          address: '',
-    handleChange,
+          authentication: 'none',
-  } = useFormikUtils<MailServerFormikValues>({
+          heloDomain: localhostDomain,
-    initialValues: previousFormikValues ?? {
+          port: 587,
-      [msUuid]: {
+          security: 'none',
-        address: '',
+          uuid: msUuid,
-        authentication: 'none',
+        },
-        heloDomain: localhostDomain,
-        port: 587,
-        security: 'none',
-        uuid: msUuid,
       },
-    },
+      onSubmit: (values, { setSubmitting }) => {
-    onSubmit: (values, { setSubmitting }) => {
+        const { [msUuid]: mailServer } = values;
-      const { [msUuid]: mailServer } = values;
 
-      let actionProceedText: string = 'Add';
+        let actionProceedText: string = 'Add';
-      let errorMessage: ReactNode = <>Failed to add mail server.</>;
+        let errorMessage: ReactNode = <>Failed to add mail server.</>;
-      let method: 'post' | 'put' = 'post';
+        let method: 'post' | 'put' = 'post';
-      let successMessage = <>Mail server added.</>;
+        let successMessage = <>Mail server added.</>;
-      let titleText: string = 'Add mail server with the following?';
+        let titleText: string = 'Add mail server with the following?';
-      let url = '/mail-server';
+        let url = '/mail-server';
 
-      if (previousFormikValues) {
+        if (previousFormikValues) {
-        actionProceedText = 'Update';
+          actionProceedText = 'Update';
-        errorMessage = <>Failed to update mail server.</>;
+          errorMessage = <>Failed to update mail server.</>;
-        method = 'put';
+          method = 'put';
-        successMessage = <>Mail server updated.</>;
+          successMessage = <>Mail server updated.</>;
-        titleText = `Update ${mailServer.address}:${mailServer.port} with the following?`;
+          titleText = `Update ${mailServer.address}:${mailServer.port} with the following?`;
-        url += `/${msUuid}`;
+          url += `/${msUuid}`;
-      }
+        }
 
-      const { confirmPassword, uuid, ...rest } = mailServer;
+        const { confirmPassword, uuid, ...rest } = mailServer;
 
-      tools.confirm.prepare({
+        tools.confirm.prepare({
-        actionProceedText,
+          actionProceedText,
-        content: <FormSummary entries={rest} />,
+          content: <FormSummary entries={rest} />,
-        onCancelAppend: () => setSubmitting(false),
+          onCancelAppend: () => setSubmitting(false),
-        onProceedAppend: () => {
+          onProceedAppend: () => {
-          tools.confirm.loading(true);
+            tools.confirm.loading(true);
 
-          api[method](url, mailServer)
+            api[method](url, mailServer)
-            .then(() => {
+              .then(() => {
-              tools.confirm.finish('Success', { children: successMessage });
+                tools.confirm.finish('Success', { children: successMessage });
 
-              tools[method === 'post' ? 'add' : 'edit'].open(false);
+                tools[method === 'post' ? 'add' : 'edit'].open(false);
-            })
+              })
-            .catch((error) => {
+              .catch((error) => {
-              const emsg = handleAPIError(error);
+                const emsg = handleAPIError(error);
 
-              emsg.children = (
+                emsg.children = (
-                <>
+                  <>
-                  {errorMessage} {emsg.children}
+                    {errorMessage} {emsg.children}
-                </>
+                  </>
-              );
+                );
 
-              tools.confirm.finish('Error', emsg);
+                tools.confirm.finish('Error', emsg);
 
-              setSubmitting(false);
+                setSubmitting(false);
-            });
+              });
-        },
+          },
-        titleText,
+          titleText,
-      });
+        });
 
-      tools.confirm.open(true);
+        tools.confirm.open(true);
-    },
+      },
-    validationSchema: mailServerListSchema,
+      validationSchema: mailServerListSchema,
-  });
+    });
 
   const addressChain = useMemo<string>(() => `${msUuid}.address`, [msUuid]);
   const authenticationChain = useMemo<string>(
@@ -206,8 +201,8 @@ const AddMailServerForm: FC<AddMailServerFormProps> = (props) => {
         <UncontrolledInput
           input={
             <OutlinedInputWithLabel
+              disableAutofill
               id={usernameChain}
-              inputProps={disableAutocomplete()}
               label="Server username"
               name={usernameChain}
               onChange={handleChange}
@@ -220,8 +215,8 @@ const AddMailServerForm: FC<AddMailServerFormProps> = (props) => {
         <UncontrolledInput
           input={
             <OutlinedInputWithLabel
+              disableAutofill
               id={passwordChain}
-              inputProps={disableAutocomplete()}
               label="Server password"
               name={passwordChain}
               onChange={handleChange}
@@ -236,8 +231,8 @@ const AddMailServerForm: FC<AddMailServerFormProps> = (props) => {
         <UncontrolledInput
           input={
             <OutlinedInputWithLabel
+              disableAutofill
               id={confirmPasswordChain}
-              inputProps={disableAutocomplete()}
               label="Confirm password"
               name={confirmPasswordChain}
               onChange={handleChange}

striker-ui/hooks/useFormikUtils.ts

@@ -1,4 +1,3 @@
-import { OutlinedInputProps } from '@mui/material';
 import { FormikConfig, FormikValues, useFormik } from 'formik';
 import { isEqual, isObject } from 'lodash';
 import { useCallback, useMemo } from 'react';
@@ -41,17 +40,6 @@ const useFormikUtils = <Values extends FormikValues = FormikValues>(
     [formik.initialValues, formik.values],
   );
 
-  const disableAutocomplete = useCallback(
-    (overwrite?: Partial<OutlinedInputProps>): OutlinedInputProps => ({
-      readOnly: true,
-      onFocus: (event) => {
-        event.target.readOnly = false;
-      },
-      ...overwrite,
-    }),
-    [],
-  );
-
   const debounceHandleChange = useMemo(
     () => debounce(formik.handleChange),
     [formik.handleChange],
@@ -75,7 +63,6 @@ const useFormikUtils = <Values extends FormikValues = FormikValues>(
   );
 
   return {
-    disableAutocomplete,
     disabledSubmit,
     formik,
     formikErrors,

striker-ui/types/FormikUtils.d.ts

@@ -12,11 +12,6 @@ type FormikSubmitHandler<Values extends FormikValues> =
   import('formik').FormikConfig<Values>['onSubmit'];
 
 type FormikUtils<Values extends FormikValues> = {
-  disableAutocomplete: (
-    overwrite?: Partial<
-      import('../components/OutlinedInput').OutlinedInputProps
-    >,
-  ) => import('../components/OutlinedInput').OutlinedInputProps;
   disabledSubmit: boolean;
   formik: Formik<Values>;
   formikErrors: Messages;