Modal animation issues if keyboard is open (ionic 6/ vue 3)

Ionic Framework Ionic Vue
1

First of all, have 3 bugs if add input in modal (all this bugs you can see in video)
Video with bugs: Ionic modal bugs - YouTube

Bug 1. So to be clear, I added input in modal, also added a ‘autofocus=“true”’ prop, but he doesn’t work in modal. (you can see in video, when I click open, input is not focused and no keboard).

Bug 2. So, when I click to input, appear keyboard and on close modal with an open keyboard, аppear some issues with annimation on the end of modal closing (you can see in video sec: 13 - 22)

Bug 3. And the last bug is when I close the modal with swipe down and the keyboard is open, the flickering vertical line from input stays put (you can see it in video sec: 28 -45)

I think all this bugs can be resolved with sloving input focus, but I couldn’t solve it. If someone can help me. Thank you.

2

video is nice, but sample code in running project is helpful

3

Hello! Thank you for response, it is standard ion-modal with ion-input, here is modal code:

<ion-modal
      :is-open="isOpenModal"
      show-backdrop="false"
      css-class="my-custom-class"
      can-dismiss="true"
      :presenting-element="$parent.$refs.ionRouterOutlet"
      @didDismiss="setOpen(false)"
    >
      <ion-content :scrollY="false" class="bg-slate-900">
        <ion-header>
          <ion-toolbar>
            <ion-buttons slot="end" @click="saveTask()"> Save </ion-buttons>
            <ion-title> Add new task</ion-title>
            <ion-buttons slot="start" @click="isOpenModal = false"> Close </ion-buttons>
          </ion-toolbar>
        </ion-header>
        <ion-card class="bg-transparent">
          <ion-input
            v-model="taskName"
            class="border-0 bg-thunder px-1 ion-padding-start ion-padding-end"
            type="text"
            color="light"
            inputmode="text"
          ></ion-input>
        </ion-card>
      </ion-content>
    </ion-modal>
  </ion-page>
</template>
4

Also you can try, in your project or blank project, add modal with input, and you will see this bugs, like a problem with animation and not working autofocus prop

1 Like
5

@igorcuiumju have the same issue with you, did you find the solution ?