Use native JS events to trigger 'formset:added'/'formset:removed'

[Claude Paroz]

The 'formset:added'/'formset:removed' events trigger in admin inlines.js are currently using jQuery trigger functionality, hence the events can not be catched by pure JS code.

I suggest to trigger those events with native JS events instead, so custom libs are not forced to use jQuery to catch those events. We've also been blocked by this on #30049.

However, the difference in passing complementary event data might make this move backwards incompatible. I'm not sure there is a clean migration path.

[Carlton Gibson]

This is in line with the previous moves away from the jQuery dependency, so +1.

However, the difference in passing complementary event data might make this move backwards incompatible. I'm not sure there is a clean migration path.

Just imagining, one could listen for the native event and then dispatch a jQuery equivalent in the handler I would think. 🤔
Something to consider on review for the release notes.

[SwastikTripathi]

I'll work on this. Converting jquery functions into plain javascript should be fun

[Claude Paroz]

Compatibility issues are not always fun :-)

[SwastikTripathi]

Replying to Claude Paroz:

Compatibility issues are not always fun :-)

Started working on it today, and I can say, you're right : )

[SwastikTripathi]

I'm currently working in admin/static/js/inline.js. Should I also change formset:added and formset:removed in admin/javascript.txt, admin/inline.test.js, admin/static/js/autocomplete.js?

[Claude Paroz]

It is difficult to answer your question without knowing your strategy here (maybe show some preliminary code or PR?).

[SwastikTripathi]

Oh, of course😄. Here's the PR ​https://github.com/django/django/pull/15181

[SwastikTripathi]

I'm really sorry for not communicating. Actually I've caught a cold, and require rest. So I don't think I'll be able to work on this now.

[Claude Paroz]

​PR

[LB (Ben Johnston)]

Hi. Not sure if this is helpful but here is a library that allows for jQuery events to be converted to standard DOM events and visa versa.

​https://leastbad.com/jquery-events-to-dom-events
​https://www.npmjs.com/package/jquery-events-to-dom-events

I am sure there are others out there but this may be a good reference for a generic solution that still keeps the jQuery events present for backwards compatibility.

[Claude Paroz]

Thanks for the suggestion. I'm not sure that it's worth the complication as only one event is concerned. If someone wants to try, why not? As for me, I'd rather switch "brutally" and document the backwards incompatibility.

[GitHub <noreply@…>]

In eabc22f9:

Fixed #33328 -- Transformed formset:added/removed to native JS events.

[Carlton Gibson <carlton@…>]

In 981615c:

Refs #33328 -- Added some advice regarding handling formset:added/removed in 3rd party libraries

[GitHub <noreply@…>]

In fe7cb345:

Refs #33328 -- Corrected JS check for event.detail presence in docs.