Nativescript Vue-键入时，文本字段将焦点更改为另一个字段

我有一个简单的页面，它使用RadListView生成X个文本字段，您可以在其中插入人名

您可以按add按钮（用于在RadListView使用的数组中推送新项）生成新字段，或按delete按钮（用于拼接数组）删除一个字段

问题是，当我按下RadListView生成的一个字段并尝试键入内容时，该字段上的焦点会立即移动到页面顶部的字段上（唯一一个不是RadListView生成的字段）。

请参阅此在emulator上拍摄的gif（但问题是它也在真实设备上）：

完整代码：

<template>
  <Page>  
    <GridLayout columns="*" rows="auto,auto,*,auto,auto">

      <Label row="0" text="total amount"/>
      <TextField row="1" v-model="payment.total" keyboardType="number"/>

      <RadListView row="2" layout="linear" orientation="vertical" for="item in payment.persons">
        <v-template>
          <GridLayout columns="*" rows="*,*,*" class="person">
            <Label row="0" :text="'person name ' + ($index+1)" />
            <TextField row="1" v-model="item.name" />
            <Button row="2" text="Delete person" @tap="deletePerson($index)"/>
          </GridLayout>
        </v-template>
      </RadListView>

      <Button row="3" text="Add person" @tap="addPerson()" />
      <Button row="4" text="Save" @tap="validateForm()" />

    </GridLayout>
  </Page>
</template>

<script>

  export default {
    data() {
      return {
        payment:{
          total:10,
          persons: [{
            name:"test1"
          }]
        }
      }
    },
    methods:{

      addPerson(){
        this.payment.persons.push({
          name:""
        });
      },

      deletePerson(index){
        this.payment.persons.splice(index, 1);
      },

      validateForm(){
        console.log(this.payment.persons);
      }
    }
  }
</script>

<style scoped>
  .person{
    margin-top:50px;
    background-color: rgb(231, 231, 231);
    border-radius: 10px;
    padding: 40px 10px;
    margin-bottom: 50px;
  }
</style>

导出默认值{
数据（）{
返回{
付款：{
总数：10，
人员：[{
名称：“test1”
}]
}
}
},
方法：{
addPerson（）{
这是付款，人，推({
姓名：“
});
},
删除人（索引）{
本.付款.人员.拼接（索引1）；
},
validateForm（）{
console.log（this.payment.persons）；
}
}
}
.人{
边缘顶部：50px；
背景色：rgb（231231231）；
边界半径：10px；
填充：40px 10px；
边缘底部：50px；
}

谢谢你的帮助