refactor: set molecular formula modal

cheminfo · Mar 26, 2024 · c7bdaac · c7bdaac
1 parent ed82531
commit c7bdaac
Show file tree

Hide file tree

Showing 5 changed files with 170 additions and 240 deletions.
diff --git a/src/component/elements/MolecularFormulaInput.tsx b/src/component/elements/MolecularFormulaInput.tsx
diff --git a/src/component/elements/formik/FormikError.tsx b/src/component/elements/formik/FormikError.tsx
@@ -4,7 +4,6 @@ import { CSSProperties, ReactNode } from 'react';
 
 const styles: Record<'container' | 'text', CSSProperties> = {
   container: {
-    padding: '0.4rem',
     display: 'flex',
     flexDirection: 'column',
   },
@@ -22,15 +21,13 @@ export interface FormikErrorProps {
 }
 
 function FormikError({ style, name, children }: FormikErrorProps) {
-  const { errors, isValid, dirty, touched } = useFormikContext();
+  const { errors, isValid, dirty } = useFormikContext();
 
   const errorText = lodashGet(errors, name);
-  const isTouched = lodashGet(touched, name);
-
   return (
     <div style={{ ...styles.container, ...style?.container }}>
       {children}
-      {!isValid && dirty && isTouched && (
+      {!isValid && dirty && (
         <span style={{ ...styles.text, ...style?.text }}>{errorText}</span>
       )}
     </div>

diff --git a/src/component/elements/formik/FormikInput.tsx b/src/component/elements/formik/FormikInput.tsx
@@ -26,7 +26,7 @@ function FormikInput(props: FormikInputProps & InputProps) {
     ...resProps
   } = props;
 
-  const { values, handleChange, errors, touched, setFieldValue } =
+  const { values, handleChange, errors, touched, setFieldValue, handleBlur } =
     useFormikContext();
 
   function changeHandler(e) {
@@ -51,6 +51,7 @@ function FormikInput(props: FormikInputProps & InputProps) {
       name={name}
       value={val}
       onChange={changeHandler}
+      onBlur={handleBlur}
       type={type}
       style={{
         ...style,