Ion-modal not emitting onDidPresent event

Hi, I don’t know if it’s a bug but I can’t use @onDidPresent event on ion-modal. I’m using vue-cropperjs to crop images and it needs to initialize after the modal shows up.

// Modal.vue
<template>
  <ion-modal @onDidDismiss="action" @onDidPresent="onPresent" ref="modal">
    <slot name="title"></slot>
    <slot name="default"></slot> // here vue-cropper is injected
  </ion-modal>
</template>
// Cropper.vue
<template>
  <Modal>
    <template #title>Crop picture</template>
    <template #default>
      <vue-cropper ... />
    </template>
  </Modal>
</template>

I tried alternatives by catching the element by ref and then adding addEventListener but it didn’t work either:

// Modal.vue
setup(){

  const modal = ref<{ $el: HTMLIonModalElement } | null>(null)

  onMounted(() => {

    if(!modal.value) return;
    modal.value.$el.addEventListener('ionModalDidPresent', (e: any) => {
      alert("Presented!") // Doesn't work
      // Inform vue-cropper to init itself
    })
  
  })

  return { modal }

}

I know that in modalController I can use present() and dismiss() but I can’t use this method in my case as I need to preserve component slots <slot></slot> in the component.

Do you have any idea how to inform vue-cropper when ion-modal did present itself?

Not responding out of vue knowledge but I think/suspect that the ionic onView etc hooks fire as part of the router not a modal present (not being a router event).

So, if there is a component create ñifecycle hook in Vue, maybe that is the place?

Tom
(Angular guy)

I actually think this is a bug… I was just testing even the code directly from the documentation and it doesn’t appear to be working… had to go back to version 5.4.4 to get it to work

I also noticed the documentation has named the events differently from those in the sample provided. Some say ionModalDidPresent, while the sample says onDidPresent

cc @ldebeasi

2 Likes

Vue 3.0.6 fixed some issues with event bindings on web components. I applied a patch to account for these changes, but it looks like I missed overlays. In short, events that were once bound as ionmodaldidpresent are now bound as ion-modal-did-present. Can you give this dev build a try and let me know if it fixes the issue?

npm install @ionic/vue@5.7.0-dev.202103242349.14c999d @ionic/vue-router@5.7.0-dev.202103242349.14c999d

If that dev build works for you, I can cut a release next week. Until then feel free to keep using the dev build or roll back to Vue 3.0.5. Either way, once the fix ships I recommend updating to the latest version of Ionic Framework.

I also noticed the documentation has named the events differently from those in the sample provided. Some say ionModalDidPresent , while the sample says onDidPresent

The web component event is ionModalDidPresent, but we use onDidPresent as a shorthand in Vue/React so developers don’t need to keep writing ionModal.

2 Likes

works like a charm!! Thanks

cc: @JoJk0

2 Likes

Apologies for the delay - our releases got shuffled around a bit. This fix is now available as part of Ionic Vue v5.6.4:

npm install @ionic/vue@5.6.4 @ionic/vue-router@5.6.4