I have recently tried to upgrade to MDB5 for React, and found that all buttons are set to "submit" by default.

When included in a form, the DatePicker will submit the form when trying to open the date picker. This comes from the 'btn' element within the MDBInput, which by default is type 'submit'.

Also, when using MDBValidation, the picker opens and closes immediately, as form is submitted.

I was unable to get the code snipped working, I have included a sample below.

    import { MDBBtn, MDBCard, MDBCardBody, MDBCol, MDBDatepicker, MDBIcon, MDBInput, MDBValidation } from 'mdbreact';
    import { FormEvent, useState } from 'react';

    export const TestPage = () => {
      const [formSubmitted, setFormSubmitted] = useState(false);

      const submitHandler = (e: FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        e.stopPropagation();

        setFormSubmitted(true);
      };

      return (
        <MDBCol className="h-100 d-flex flex-column">
          <div className="my-auto">
            <MDBCard>
              <MDBCardBody>
                <MDBBtn className="mb-3" onClick={() => setFormSubmitted(false)} type="button">
                  Reset form
                </MDBBtn>
                <MDBValidation noValidate onSubmit={submitHandler}>
                  {formSubmitted && <p>This form was submitted.</p>}
                  <MDBDatepicker inline />
                  <br />
                  <MDBInput btn={<MDBIcon icon="cog" />} />
                </MDBValidation>
              </MDBCardBody>
            </MDBCard>
          </div>
        </MDBCol>
      );
    };

Form state before pressing datepicker / input button

Form after pressing datepicker button

When using MDBValidation, the picker opens and closes immediately, as form is submitted.