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

dbaba

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
    };
  }
});

misterjunio

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

dbaba

@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.

Fran Diox

@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.

Fran Diox

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

dbaba

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

Fran Diox

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

dbaba

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