v-ons-input inside v-ons-alert-dialog losing focus after entering a single text

  • I’m trying to create a login dialog with v-ons-alert-dialog and v-ons-input.
    However, v-ons-input loses its focus whenever I enter a single text. I have no idea of what’s wrong.
    I’d like to just create a login dialog so if you think I’m going the wrong way, any suggestions are appreciated.

    Frameworks: Onsen UI 2 + Vue.js 2

    Here is my tested code:
    (The code is originally coming from https://onsen.io/v2/docs/vue/v-ons-dialog.html )

      :title="'Please login'"
        Login: () => alertDialog2Visible = false
      @update="alertDialog2Visible = $event"
     <v-ons-input float type="text" maxlength="20"
      placeholder="username" v-ons-model="username"
     <v-ons-input float type="password" maxlength="20"
      placeholder="password" v-ons-model="password"
    new Vue({
      el: '#app',
      template: '#main',
      data() {
        return {
          alertDialog2Visible: false

  • Onsen UI

    @dbaba can you replicate that in the tutorial app you got the code from? It’s working fine for me.

  • @misterjunio Thank you for the reply. I tried again there but the input boxes still lost the focus after entering a single character.
    For instance, when I tried to enter “abcd” to the username input text, the text box just accept only the first char ‘a’. In order to share the behavior, I’ve created a codepen snip. could you please have a look at this? and try to enter 2 or more length text to username or password boxes.


    I’m using Chrome, Safari and Firefox on macOS Sierra.

  • Onsen UI

    @dbaba The issue is related to a new feature in beta.2. You can continue with beta.1 for now and we will try to release beta.3 with this fixed asap.

  • Onsen UI

    I fixed this in gh#1972. I’ll release beta.3 tomorrow including this fix :thumbsup:

    frandiox created this issue in OnsenUI/OnsenUI

    closed fix(vue): Dialog Portal. #1972

  • @Fran-Diox Thanks! Let me check after the release.

  • Onsen UI

    @dbaba Released! Your codepen now works if you load beta.3 (make sure your browser is not caching beta.2).

  • @Fran-Diox Great! I will close the thread. Thank you!

Log in to reply