Hi,

we have problems with the Datepicker. We use the Datepicker in the Stepper component, which is a form. Everytime we try to select a date, the modal doesn't close anymore, no value is inserted into the input and in the browser console we see this error:

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. at https://example.org/wp-content/themes/custom/assets/js/modules/datepicker.min.js:1:92436

We use the example code from here: https://mdbootstrap.com/docs/standard/forms/datepicker/#section-input-toggle

This code we have tested it outside of the Stepper, but we still have the same error.

Here is the used HTML-Code. We use the Datepicker with data attributes.

<section class="py-5 mb-8">
    <div class="container my-5 py-5 ">
        <div class="row justify-content-center">
            <div class="onboarding-box col-xl-5 col-lg-5 col-md-8 p-4 shadow-4 bg-white rounded">

                <h1 class="mb-3 text-left text-muted">Set up your profile</h1>

                <ul class="stepper" id="onboarding" data-mdb-stepper="stepper" data-mdb-stepper-type="vertical" data-mdb-stepper-linear="true">
                    <form class="needs-validation stepper-form">

                        <li class="stepper-step stepper-active">
                            <div class="stepper-head">
                                <span class="stepper-head-icon">1</span>
                                <span class="stepper-head-text">Tell us something about you</span>
                            </div>

                            <div class="stepper-content py-3">
                                <div class="mb-5">
                                    <label class="form-label" for="reg_user_birthday">When were you born?</label>

                                    <div class="form-outline datepicker" data-mdb-toggle-button="false">
                                        <input type="text" class="form-control" id="reg_user_birthday" name="reg_user_birthday" data-mdb-toggle="datepicker">
                                    </div>
                                </div>
                            </div>
                        </li>

                        <li class="stepper-step">
                            <div class="stepper-head">
                                <span class="stepper-head-icon">2</span>
                                <span class="stepper-head-text">Pregnancy information</span>
                            </div>

                            <div class="stepper-content py-3">

                                <div class="mb-4">
                                    <label class="form-label" for="reg_referral_information">How did you hear about us?</label>
                                    <select id="reg_referral_information" name="reg_referral_information" class="select form-control">
                                        <option value="0">&mdash; Please select                                                           &mdash;</option>
                                                                                        <option value="social_media">Social media - e.g. Instagram</option>                                                                                            <option value="recommendation">Personal recommendation</option>                                                                                            <option value="internet_search">Search on the Internet</option>                                                                                            <option value="other">Other</option>                                                                                   </select>
                                </div>

                            </div>
                        </li>
                    </form>
                </ul>

                <div class="d-flex justify-content-center pt-5">
                    <button id="onboarding-prev-step" class="btn btn-link w-100 me-2 invisible">Previous step</button>
                    <button id="onboarding-next-step" class="btn btn-primary w-100">Next step</button>
                    <button id="onboarding-finish-step" class="btn btn-primary w-100 d-none">Finish</button>
                </div>
            </div>
        </div>
    </div>
</section>