{"action":"created","issue":{"url":"https://api.github.com/repos/jaredpalmer/formik/issues/1395","repository_url":"https://api.github.com/repos/jaredpalmer/formik","labels_url":"https://api.github.com/repos/jaredpalmer/formik/issues/1395/labels{/name}","comments_url":"https://api.github.com/repos/jaredpalmer/formik/issues/1395/comments","events_url":"https://api.github.com/repos/jaredpalmer/formik/issues/1395/events","html_url":"https://github.com/jaredpalmer/formik/issues/1395","id":424982589,"node_id":"MDU6SXNzdWU0MjQ5ODI1ODk=","number":1395,"title":"Internationalization of validationSchema (react-i18next)","user":{"login":"gmorus","id":9554490,"node_id":"MDQ6VXNlcjk1NTQ0OTA=","avatar_url":"https://avatars0.githubusercontent.com/u/9554490?v=4","gravatar_id":"","url":"https://api.github.com/users/gmorus","html_url":"https://github.com/gmorus","followers_url":"https://api.github.com/users/gmorus/followers","following_url":"https://api.github.com/users/gmorus/following{/other_user}","gists_url":"https://api.github.com/users/gmorus/gists{/gist_id}","starred_url":"https://api.github.com/users/gmorus/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gmorus/subscriptions","organizations_url":"https://api.github.com/users/gmorus/orgs","repos_url":"https://api.github.com/users/gmorus/repos","events_url":"https://api.github.com/users/gmorus/events{/privacy}","received_events_url":"https://api.github.com/users/gmorus/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2019-03-25T15:57:59Z","updated_at":"2019-04-02T21:04:45Z","closed_at":null,"author_association":"NONE","body":"Hi,\r\nThis is my first issue here so first of all I would like to thank @jaredpalmer and all Formik contributors for writing this library - good job!\r\n\r\nRecently, I had to face with an internationalization of a React project. Finally i chose [react-i18next](https://react.i18next.com/) library. I implemented i18n via`withTranslation()` HOC and Formik via `withFormik()` HOC. After all I noticed some strange issue:\r\n\r\nWhen I change application language, Formik errors (if exist) are still displayed in previous language. It means that `withFormik()` HOC don't update them when props are changing.\r\n\r\nI made a simple workaround based on [i18next](https://www.i18next.com/) `'changeLanguage'` event by setting touched property to every form field that has an error.\r\n\r\nIs it intentional behaviour or just oversight/bug? Maybe there is a better solution for my purpose?\r\n\r\n```tsx\r\nimport classNames from 'classnames'\r\nimport {\r\n    ErrorMessage,\r\n    Field,\r\n    FormikBag,\r\n    FormikProps,\r\n    withFormik,\r\n} from 'formik'\r\nimport React, { useEffect } from 'react';\r\nimport {\r\n    useTranslation,\r\n    withTranslation,\r\n    WithTranslation,\r\n} from 'react-i18next';\r\nimport { \r\n    Button,\r\n    Container,\r\n    Form,\r\n    FormFeedback,\r\n    FormGroup,\r\n    Label,\r\n } from 'reactstrap';\r\nimport * as yup from 'yup';\r\n\r\n// import i18n from '../middlewares/i18next';\r\n\r\nexport interface IFormValues {\r\n    // fromCurrency: string\r\n    fromQuantity: string\r\n    paymentMethod: 'CASH' | 'BANK_ACCOUNT'\r\n    toCurrency: string\r\n    toQuantity: string\r\n    [key: string]: string\r\n}\r\n\r\ntype CalculatorProps = FormikProps<IFormValues> & WithTranslation;\r\n\r\nconst CalculatorForm: React.FunctionComponent<CalculatorProps> = props => {\r\n\r\n    const {\r\n        errors,\r\n        i18n,\r\n        isSubmitting,\r\n        handleBlur,\r\n        handleSubmit,\r\n        touched,\r\n        values,\r\n        setFieldTouched,\r\n        t,\r\n    } = props;\r\n\r\n    const handleBlurMonetary = (e: React.FocusEvent<HTMLInputElement>) => {\r\n        let nextValue = e.target.value;\r\n\r\n        if (parseFloat(e.target.value)) {\r\n            nextValue = parseFloat(nextValue.replace(',', '.')).toFixed(2);\r\n        }\r\n\r\n        values[e.target.name] = nextValue;\r\n\r\n        handleBlur(e);\r\n    }\r\n\r\n    i18n.on('languageChanged', () => {\r\n        Object.keys(errors).forEach(fieldName => {\r\n            setFieldTouched(fieldName)\r\n        })\r\n    })\r\n\r\n    return (\r\n        <Container fluid={true}>\r\n            <Container>\r\n                <Form onSubmit={handleSubmit}>\r\n                    <FormGroup tag=\"fieldset\">\r\n                        <div className=\"form-check\">\r\n                            <input className=\"form-check-input\" type=\"radio\" name=\"paymentMethod\" id=\"paymentMethodCash\" value=\"CASH\" defaultChecked={true} />\r\n                            <label className=\"form-check-label\" htmlFor=\"paymentMethodCash\">{t('paymentMethodCash')}</label>\r\n                        </div>\r\n                        <div className=\"form-check\">\r\n                            <input className=\"form-check-input\" type=\"radio\" name=\"paymentMethod\" id=\"paymentMethodBankAccount\" value=\"BANK_ACCOUNT\" />\r\n                            <label className=\"form-check-label\" htmlFor=\"paymentMethodBankAccount\">{t('paymentMethodBankAccount')}</label>\r\n                        </div>\r\n                        <ErrorMessage name=\"type\" component={FormFeedback} />\r\n                    </FormGroup>\r\n                    <FormGroup>\r\n                        <Label for=\"name\">{t('youSend')}</Label>\r\n                        <Field \r\n                            component=\"input\"\r\n                            name=\"fromQuantity\"\r\n                            type=\"text\"\r\n                            error={touched.fromQuantity && errors.fromQuantity}\r\n                            onBlur={handleBlurMonetary}\r\n                            className={classNames('form-control', {'is-invalid': (errors && errors.fromQuantity)}, {'is-valid': ((!errors || (errors && !errors.fromQuantity)) && touched.fromQuantity )})}\r\n                        />\r\n                        <ErrorMessage name=\"fromQuantity\" component={FormFeedback} />\r\n                    </FormGroup>\r\n                    <FormGroup>\r\n                        <Label for=\"name\">{t('receiverGets')}</Label>\r\n                        <Field \r\n                            component=\"input\"\r\n                            name=\"toQuantity\"\r\n                            type=\"text\"\r\n                            error={touched.toQuantity && errors.toQuantity}\r\n                            onBlur={handleBlurMonetary}\r\n                            className={classNames('form-control', {'is-invalid': (errors && errors.toQuantity)}, {'is-valid': ((!errors || (errors && !errors.toQuantity)) && touched.toQuantity )})}\r\n                        />\r\n                        <ErrorMessage name=\"toQuantity\" component={FormFeedback} />\r\n                    </FormGroup>\r\n                    <FormGroup>\r\n                        <Field \r\n                            component=\"select\"\r\n                            name=\"toCurrency\"\r\n                            error={touched && touched.toCurrency && errors && errors.toCurrency}\r\n                            className={classNames('form-control', {'is-invalid': (errors && errors.toCurrency)}, {'is-valid': ((!errors || (errors && !errors.toCurrency)) && touched.toCurrency )})}\r\n                        >\r\n                            <option value=\"USD\">USD</option>\r\n                            <option value=\"EUR\">EUR</option>\r\n                        </Field>\r\n                        <ErrorMessage name=\"toCurrency\" component={FormFeedback} />\r\n                    </FormGroup>\r\n                    <Button type=\"submit\" color=\"primary\" block={true} disabled={isSubmitting}>{t('calculatorFormSubmit')}</Button>\r\n                </Form>\r\n            </Container>\r\n            \r\n        </Container>\r\n    );\r\n};\r\n\r\nconst FormikCalculator = withFormik<WithTranslation, IFormValues>({\r\n\r\n    enableReinitialize: true,\r\n\r\n    validationSchema: (props: WithTranslation) => {\r\n        return yup.object().shape({\r\n            fromQuantity: yup\r\n                .string()\r\n                .required(props.t('test'))\r\n                .matches(/^\\d+(?:\\.\\d{0,2})$/, 'Amount to send have to be valid monetary amount'),\r\n            toQuantity: yup\r\n                .string()\r\n                .required(props.t('test'))\r\n                .matches(/^\\d+(?:\\.\\d{0,2})$/, 'Amount to send have to be valid monetary amount'),\r\n        })\r\n    },\r\n\r\n    mapPropsToValues: () => ({\r\n        fromCurrency: 'PLN',\r\n        fromQuantity: '100.00',\r\n        paymentMethod: 'CASH',\r\n        toCurrency: 'USD',\r\n        toQuantity: '',\r\n    }),\r\n\r\n    handleSubmit: (payload, formikBag: FormikBag<{}, IFormValues>) => {},\r\n\r\n    displayName: 'CalculatorForm',\r\n    \r\n})(CalculatorForm);\r\n\r\nconst translatedCalculator = withTranslation()(FormikCalculator)\r\n\r\nexport default translatedCalculator;\r\n```"},"comment":{"url":"https://api.github.com/repos/jaredpalmer/formik/issues/comments/479201780","html_url":"https://github.com/jaredpalmer/formik/issues/1395#issuecomment-479201780","issue_url":"https://api.github.com/repos/jaredpalmer/formik/issues/1395","id":479201780,"node_id":"MDEyOklzc3VlQ29tbWVudDQ3OTIwMTc4MA==","user":{"login":"klis87","id":11601850,"node_id":"MDQ6VXNlcjExNjAxODUw","avatar_url":"https://avatars2.githubusercontent.com/u/11601850?v=4","gravatar_id":"","url":"https://api.github.com/users/klis87","html_url":"https://github.com/klis87","followers_url":"https://api.github.com/users/klis87/followers","following_url":"https://api.github.com/users/klis87/following{/other_user}","gists_url":"https://api.github.com/users/klis87/gists{/gist_id}","starred_url":"https://api.github.com/users/klis87/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/klis87/subscriptions","organizations_url":"https://api.github.com/users/klis87/orgs","repos_url":"https://api.github.com/users/klis87/repos","events_url":"https://api.github.com/users/klis87/events{/privacy}","received_events_url":"https://api.github.com/users/klis87/received_events","type":"User","site_admin":false},"created_at":"2019-04-02T21:04:45Z","updated_at":"2019-04-02T21:04:45Z","author_association":"CONTRIBUTOR","body":"@gmorus I am not sure why you have issues with messages, but you could try to simplify integration with i18next just by having i18next code, not translated message in yup, then i18n doesn't have anything to do with formik or yup anymore, you just use i18next `t` function for translation like with any other message. See examples here - https://github.com/jquense/yup/issues/159"}}
{"actor":{"display_login":"klis87"}}