Topic: Datepicker throws JavaScript error
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">— Please select —</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>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Open
- User: Free
- Premium support: No
- Technology: MDB Standard
- MDB Version: MDB5 3.9.0
- Device: Laptop
- Browser: Chrome / Firefox
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes
Dawid Wajszczuk staff commented 3 years ago
Hi. The problem is related to something else, probably some JS code in your project. Datepicker with Stepper works fine. You can see this in this snippet https://mdbootstrap.com/snippets/standard/d-wajszczuk/3390503. There is no such error. Do you use JS code to these components?