Listener added for a synchronous 'DOMNodeInserted' DOM Mutation Event deprecated

[jalil2024]

Listener added for a synchronous 'DOMNodeInserted' DOM Mutation Event. This event type is deprecated (https://w3c.github.io/uievents/#legacy-event-types) and work is underway to remove it from browsers. Usage of this event listener will cause performance issues today, and represents a risk of future incompatibility. Consider using MutationObserver instead.

[ptrba]

Possibly related to this: In Firefox found warning "Use of Mutation Events is deprecated. Use MutationObserver instead". It points to datepicker-widget.js:46

    document.addEventListener('DOMNodeInserted', function (event) {

[martins232]

This event (DOMNodeInserted) which of the Mutation Events is used to detect changes in the DOM tree but most browsers are of the motion that it slows down performance hence the use of it is discourage. Chrome for instance has stated that it would be disabling these event feature in June. It was suggested that MutationObserver be used instead

[christianwgd]

Seems like this is a duplicate of #115 and was already fixed. For Google Chrome the removal of those mutation events is announced for July 2024, so the end is near ;-). Will we have a new release before? Thanks

[nicholas-ewing]

Resurfacing this because it has just hit me on my projects and the datepicker works on none of them now that the DOMNodeInserted event is deprecated; I'm currently looking for a workaround to hold things temporarily. The fix is already in place, we just need a new version of this package to be published.

[nicholas-ewing]

Update for anyone needing a temporary fix:

I was able to add the following to my BOOTSTRAP_DATEPICKER_PLUS setting in settings.py:

BOOTSTRAP_DATEPICKER_PLUS = {
    ...,
    "app_static_url": f"http{'s' if not DEBUG else ''}://{DOMAIN}{':8000' if DEBUG else ''}/static/bootstrap_datepicker_plus/",
}

You can slim this down, but I wanted to account for debug and production modes.
Theoretical slimmed version: "app_static_url": "http://localhost:8000/static/bootstrap_datepicker_plus/"

I also have an environment variable DOMAIN that gets loaded into my settings.py file, but you could hardcode a localhost and production domain if you need to.


I also had to copy the datepicker-widget.css and datepicker-widget.js files to my static files in the following directory structure so that they could override the out-of-date ones in the django_bootstrap_datepicker_plus package directory:

static
└ ── bootstrap_datepicker_plus
    ├── css
    │   └ datepicker-widget.css
    └── js
        └ datepicker-widget.js

Now the widget loads the local (and up-to-date) datepicker-widget.js file which includes the fix for DOMNodeInserted being deprecated.