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 )

    <v-ons-alert-dialog 
      :title="'Please login'"
      :footer="{
        Login: () => alertDialog2Visible = false
      }"
      :visible="alertDialog2Visible"
      @update="alertDialog2Visible = $event"
    >
     <v-ons-input float type="text" maxlength="20"
      placeholder="username" v-ons-model="username"
      ></v-ons-input>
     <v-ons-input float type="password" maxlength="20"
      placeholder="password" v-ons-model="password"
      ></v-ons-input>
    </v-ons-alert-dialog>
    
    new Vue({
      el: '#app',
      template: '#main',
      data() {
        return {
          username:'',
          password:'',
          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.

    https://codepen.io/anon/pen/XRjXvY?&editors=101

    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