ionBreakpointDidChange not firing event

Ionic Framework Ionic Vue
1

I’m on Ionic Vue 6.2.4 and I’m not able to listen to events from the sheet modal.
This is my code, but the event is not outputting the console log.

onMounted(async () => {
    const sheetModal = await modalController.create({
        component: ListModal,
        breakpoints: [0.1, 0.5, 1],
        initialBreakpoint: 0.1,
        backdropDismiss: false,
        cssClass: "list-modal",
        backdropBreakpoint: 0.1,
        componentProps: {
        
        }
    });
    
    sheetModal.addEventListener('ionBreakpointDidChange', ev => {
        console.log('breakpoint changed', ev);
    });
    
    // Append it to ion-content so sheet modal does not overlap tab bar.
    const content = document.getElementById('ion-content');
    if (content) content.appendChild(sheetModal);
    
    await sheetModal.present();
});
1 Like
2

Same issue happens in Angular with latest version of ionic

3

This seems to be a bug of ionic/vue and ionic/react. I was able to reproduce this behavior.
On ionic/angular it works as expected.

Vue

React

Angular

Please create an issue, so it can be addressed!

4

progress on issue can be found here

1 Like