Formik not working in ReactStrap Modal

[quangdv90]

HI, There. Formik seem not working in reactstrap modal. This is my code:

import React, { Component } from "react"; import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Label, FormGroup, } from "reactstrap"; import ReactQuill from "react-quill"; import "react-quill/dist/quill.snow.css"; import DropzoneExample from "../../containers/forms/DropzoneExample"; import { Formik, Form } from "formik"; import { FormikReactSelect } from "../../containers/form-validations/FormikFields";

const ordersData = [ { value: "111", label: "111" }, { value: "222", label: "222" }, { value: "333", label: "333" }, ];

const complaintData = [ { value: "Đặt hàng chậm", label: "Đặt hàng chậm" }, { value: "Tính sai cước cân nặng", label: "Tính sai cước cân nặng" }, { value: "Hàng vỡ hỏng", label: "Hàng vỡ hỏng" }, ];

const quillModules = { toolbar: [ ["bold", "italic", "underline", "strike", "blockquote"], [ { list: "ordered" }, { list: "bullet" }, { indent: "-1" }, { indent: "+1" }, ], ], };

const quillFormats = [ "header", "bold", "italic", "underline", "strike", "blockquote", "list", "bullet", "indent", ];

export default class AddNewComplaintModal extends Component { constructor(props) { super(props); this.handleSubmit = this.handleSubmit.bind(this); }

handleSubmit(values) { console.log(values); }

render() { const { modalOpen, toggleModal } = this.props;

return (
  <Formik onSubmit={this.handleSubmit} initialValues={{}}>
    {({ setFieldValue, setFieldTouched, values }) => (
      <Form autoComplete="off">
        <Modal
          isOpen={modalOpen}
          toggle={toggleModal}
          wrapClassName="modal-right"
          backdrop="static">
          <ModalHeader toggle={toggleModal}>Tạo khiếu nại</ModalHeader>
          <ModalBody>
            <FormGroup>
              <Label>Chọn đơn</Label>
              <FormikReactSelect
                name="orders"
                value={values.orders}
                isMulti={false}
                isSearchable={true}
                options={ordersData}
                onChange={setFieldValue}
                onBlur={setFieldTouched}
              />
            </FormGroup>
            <FormGroup>
              <Label>Loại khiếu nại</Label>
              <FormikReactSelect
                name="complaint"
                value={values.complaint}
                isMulti={false}
                isSearchable={true}
                options={complaintData}
                onChange={setFieldValue}
                onBlur={setFieldTouched}
              />
            </FormGroup>
            <FormGroup>
              <Label>Hình ảnh</Label>
              <DropzoneExample ref={(node) => (this.dropzone = node)} />
            </FormGroup>
            <FormGroup>
              <Label>Nội dung khiếu nại</Label>
              <ReactQuill
                theme="snow"
                value={values.content}
                onChange={(val) => setFieldValue("content", val)}
                modules={quillModules}
                formats={quillFormats}
              />
            </FormGroup>
          </ModalBody>
          <ModalFooter>
            <Button color="secondary" outline onClick={toggleModal}>
              Làm lại
            </Button>
            <Button color="primary" type="submit">
              Gửi đi
            </Button>{" "}
          </ModalFooter>
        </Modal>
      </Form>
    )}
  </Formik>
);

} }

When i click on the Submit. nothing occur.

[vijay40]

I am also facing the similar issue where onSubmit doesn't get triggered inside reactstrap Modal. If I remove the whole form outside of reactstrap Modal, the form works as expected and onSubmit gets triggered.

[leothorp]

I ran into a similar issue using formik in a modal, it turned out that the modal was internally rendering the contents at a different DOM location that was not inside the <form> tag in the output html, and that seemed to make it not pick up the submit event. That might be something to look into, and there might be a way to configure that with your library. you could also try putting Formik and Form inside the modal if that works for your use case

[thaynarsantana]

I went through the same problem and the solution I found was to put the Formik tags inside the Modal tag and pass a style="overflow-y: scroll" into the Form tag. Something like this:

<Modal
        isOpen={modal}
        toggle={toggle}
        centered
        className="modal-dialog"
        scrollable (optional*)
        size="lg"
      >
        <FormikContext.Provider value={methods}>
          <Form className="scrollable">
               <ModalHeader>
                   Your header or title
                </ModalHeader>
                <ModalBody>CONTAINS FORM INPUTS</ModalBody>
                <ModalFooter>
                    <Button type="submit" variant="primary">
                        Save
                    </Button>
                </ModalFooter>
            </Form>
        </FormikContext.Provider>
      </Modal>

into style.css:

.scrollable {
    overflow-y: scroll;
  }

methods is a const with initialValues, schemaValidations and onSubmit

const methods = useFormik({
    validationSchema: mySchema,
    initialValues: {
      name: data?.name || '',
      email: data?.email || '',
    },
    enableReinitialize: true,
    onSubmit: (data) => {
      console.log('data', data);
    },
  });

*scrollable prop is for scroll inside the modal, if you want a full screen scrolling, dont use it