0

In a react project, when using formik and @shopify/polaris, when I use a TextField; My TextField is not typeable. That is, the user cannot enter a value in it or change its value. Dear friends, I would be grateful if you could help me.

my code:

import React from 'react';
import { Formik, Form, Field } from 'formik';
import * as Yup from 'yup';
import { useMutation } from '@apollo/client';
import { LOGIN_USER } from './graphql/usersQueries';
import { useNavigate } from 'react-router-dom';
import { useLocation } from 'react-router-dom';
import { TextField } from '@shopify/polaris';
import './styles.css';

function Login(){
  const navigate = useNavigate();
  const [loginUser, { loading, error }] = useMutation(LOGIN_USER);

  const location = useLocation();

  const initialValues = {
    email: location.state && location.state.email ? location.state.email : '',
    password: location.state && location.state.password ? location.state.password : '',
  }

  return (
    <Formik
      initialValues={initialValues}
      validationSchema={validationSchema}
      onSubmit={async (values, { setSubmitting, resetForm, setError, setErrors }) => {
        ...
      }}
    >
      {({ values, errors, touched, handleChange, handleBlur, handleSubmit, isSubmitting }) => (
        <div align="center" className="divContainer" style={{ height: '300px' }}>
          <Form onSubmit={handleSubmit}>
            <div>
              <div align="right" style={{ width: '300px' }}>
                <TextField
                  label="Email"
                  id="txtEmail"
                  name="email"
                  value={values.email}
                  onChange={handleChange}
                  onBlur={handleBlur}
                />
              </div>
              ...
            </div>
          </Form>
        </div>
      )}
    </Formik>
  );
}
 
export default Login;

And the question is whether this problem is related to Formic or is it a Polaris problem? And is this related to the Polaris version? I would be really grateful if you could help me.

MEHDIRA
  • 83
  • 6
  • It is not Polaris. It is all Formik. You have to understand how Formik works to drop it into a project and use it. I once used Formik with Polaris fields, and while it did not work out of the box, I did figure it out. They can work together. But React was such garbage to me, I quickly abandoned it and use View Components instead. Much nicer. – David Lazar Apr 17 '23 at 00:58

0 Answers0