Why does bootstrap-datepicker trigger 'show.bs.modal' when it is displayed?

Question

I have a modal, illustrated below,

When I select the input field that contains the date picker, the bootstrap modal event .on('show.bs.modal') gets triggered, which is super problematic because I'm taking all kinds of async action when the modal is legitimately shown. I'm of the opinion that the modal is already shown and this event should not be firing.

I have a listener on the bootstrap event 'show.bs.modal' as referenced below,

  handleModalLaunch: () ->     $(@modalClass).on 'show.bs.modal', (event) =>       return if event.dates       promise = new Promise ( (resolve, reject) =>         @setModalData(event)         if (@interactionData)           resolve(@interactionData)         else           reject(false)       )       promise.then(         (results) =>           @trigger 'setRooms', @callBacks           @trigger 'setStudentInfo', @callBacks         (err) ->           err       ) 

And effectively, the listener is being triggered again which is subsequently calling the promise and associated callbacks, the triggering of the event is problematic because of course, the modal is already show and I don't want these callbacks/promise being run.

I added return if event.dates (event.dates being a property unique to the datepicker event), to basically short circuit this code in the event that the date-picker triggered the modal show event, but of course, this is hacky and I'd like to better understand why the datepicker itself is triggering the show event. Potentially, since my show even listener is tied to the class of the modal, the act of showing the datepicker probably inherits the target of the parent modal and is likely itself a modal, ie, the modal(datepicker) is shown and since the datepicker inherits from the parent modal, the event triggers as though it was the parent modal being 'shown'. Have I utterly confused this? (Actually, it seems clearer to me now, but still need to understand how to fix.)

Answer 1

This is a bug in date picker library. You can track it on github here. There is workaround given there by @kroeder

$("#my-datepicker").datepicker().on('show.bs.modal', function(event) {     // prevent datepicker from firing bootstrap modal "show.bs.modal"     event.stopPropagation();  }); 

Answer 2

Use this

$(date-picker-selector).on("show", function(e){      e.preventDefault();      e.stopPropagation(); }).on("hide", function(e){      e.preventDefault();      e.stopPropagation(); }); 

Answer 3

Try this:

modal.on('show.bs.modal', function(e) {     if (e.namespace === 'bs.modal') {         // Your code here     } });