bug:

[acarlstein]

Describe the Bug

modalController instead of opening the modal, like would happen when you press the open button, it opens a black modal that covers all the screen

Expected Behavior

Open the modal in the same way it would open when pressing the button.

Steps to Reproduce

Use any example in here https://ionicframework.com/docs/api/modal and convert it to use Composite API of Vue3.

As in the examples, I have my modal inside the same page as the rest of the code.

I will pick one random:

<template>
  <ion-header>
    <ion-toolbar>
      <ion-title>Inline Modal</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content class="ion-padding">
    <ion-button id="open-modal" expand="block">Open</ion-button>
    <p>{{ message }}</p>
    <ion-modal ref="modal" trigger="open-modal" @willDismiss="onWillDismiss">
      <ion-header>
        <ion-toolbar>
          <ion-buttons slot="start">
            <ion-button @click="cancel()">Cancel</ion-button>
          </ion-buttons>
          <ion-title>Welcome</ion-title>
          <ion-buttons slot="end">
            <ion-button :strong="true" @click="confirm()">Confirm</ion-button>
          </ion-buttons>
        </ion-toolbar>
      </ion-header>
      <ion-content class="ion-padding">
        <ion-item>
          <ion-label position="stacked">Enter your name</ion-label>
          <ion-input ref="input" type="text" placeholder="Your name"></ion-input>
        </ion-item>
      </ion-content>
    </ion-modal>
  </ion-content>
</template>

I do not want to move this modal into its own component.
I want it on the same page as the rest of the code, like in your examples.

If I press the button to open, it opens!!! but if I do something like this:

const openEditPanel = async () => {
  console.log("openEditPanel()")
  const myModal = await modalController.create({
    component: IonModal, //Modal is name of the component to render inside ionic modal
  });
  myModal.present();
})

It shows a black empty modal.

So, the question is... how do I trigger programmatically the modal to show up like I would do with the button, without having to move the modal into its own component?

Screenshots

Here is the black screen I'm talking about:

Here it shows that intead of affecting IonModal I have in the page, it creates an empty modal instead:

Operating System

No response

Browser

No response

Version

No response

Additional Information

Thank you for your time.

[averyjohnston]

Thank you for the issue. The inline modal pattern and modal controller are not meant to be used with the same modal. The two are entirely separate. It sounds like you want to stick with the inline modal pattern, since you mentioned not wanting to have the modal in its own component. The easiest ways to accomplish this are either the trigger or isOpen properties. You can see example usages of both in the docs: https://ionicframework.com/docs/api/modal#inline-modals-recommended

Could you give one of those usages a try and let me know if it resolves your issue?

[ionitron-bot]

Thanks for the issue! This issue is being closed due to the lack of a reply. If this is still an issue, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!