Typescript with Modals

[3baaady07]

I'm trying to create a Varying modal content using typescript. But the following code keeps failing with the error

Argument of type '"show.bs.modal"' is not assignable to parameter of type 'keyof HTMLElementEventMap'.

// javascript
const exampleModal = document.getElementById('exampleModal')
if (exampleModal) {
  exampleModal.addEventListener('show.bs.modal', event => {
    // Button that triggered the modal
    const button = event.relatedTarget
    // Extract info from data-bs-* attributes
    const recipient = button.getAttribute('data-bs-whatever')
    // If necessary, you could initiate an Ajax request here
    // and then do the updating in a callback.

    // Update the modal's content.
    const modalTitle = exampleModal.querySelector('.modal-title')
    const modalBodyInput = exampleModal.querySelector('.modal-body input')

    modalTitle.textContent = `New message to ${recipient}`
    modalBodyInput.value = recipient
  })
}

I've been looking for a fix to this for quite sometime now...

Cheers,

[julien-deramond]

Hey @3baaady07, could you please create a reproducible test case using StackBlitz or any other relevant tools? Ensuring we're on the same page with the configuration and tools will greatly assist in finding a solution together.

[3baaady07]

Funny that your request urged me to to isolate the issue and, as a result, find a solution 😁

Here's the StackBlitz solution.

Initially, I had the following code to handle varying modal content.

interface HTMLElementEventMap
{
   ["show.bs.modal"]: MouseEvent
}

modal.addEventListener("show.bs.modal", (e: HTMLElementEventMap["show.bs.modal"]) => {
   const invoker = e.relatedTarget as HTMLButtonElement // <-- didn't work
   // rest of the code ...
})

It turns out, I didn't need to enforce a type on the e argument as it is, by default, an Event type. Then within the handler block, e should be "type-casted" (is that a word?) to MouseEvent.

The fix is...

modal.addEventListener("show.bs.modal", (e) => {
   const event = e as MouseEvent;
   const invoker = event.relatedTarget as HTMLButtonElement
   // rest of the code ...
})

Anyways, it's solved now.

Thanks @julien-deramond 👍

[julien-deramond]

Thanks @3baaady07!
Appreciate your dedication in providing a StackBlitz reproducible environment along with a thorough analysis. This contribution will prove invaluable for folks encountering similar issues in the future!

[3baaady07]

My pleasure. I appreciate the work you do on this project. I'll gladly help in anyway I can.

Cheers,