Problem in vue-native app textinput field cursor placement on editing the text

[dsgrunge1]

I'm very new to mobile app development... I have encountered a problem in vue-native textinput field with "v-model" directive…

I typed the string “ImCoder” in the input field and then tried to edit it. I wanted to make the string “ImCoder” to “ImACoder”. But when i typed the “A” character in the “ImCoder” String by placing the cursor after “m”, the cursor went backwards and stood before the “A” character

Did anyone face similar this problem… Please Help… Thanks in advance…

20210312_135244.mp4

My "package.json" file:

{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"expo": "~40.0.0",
"expo-status-bar": "~1.0.3",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
"react-native-web": "~0.13.12",
"vue-native-core": "0.2.0",
"vue-native-helper": "0.2.0"
},
"devDependencies": {
"@babel/core": "7.0.0",
"vue-native-scripts": "0.2.0"
},
"private": true
}

[RishabhKarnad]

@dsgrunge1 Please share your code or a minimal repository which can reproduce the issue, since it is very difficult to say what is causing this otherwise.

[dsgrunge1]

My App.vue File:

<template>
  <view class="container">
    <text class="text-color-primary">My Vue Native App</text>
    <text-input
        :style="{height: 40, width: 100, borderColor: 'gray', borderWidth: 1}"
        v-model="text"
      />
  </view>
</template>
<script>
    export default {
        data: function() {
            return {
                text: ''
            };
        }
    }
</script>
<style>
.container {
  background-color: white;
  align-items: center;
  justify-content: center;
  flex: 1;
}
.text-color-primary {
  color: blue;
}
</style>


I have only modified this page after a fresh installation copy.  The text-input works fine without v-model.

[RishabhKarnad]

I am able to reproduce this only on Android. TextInputs with v-model as well as value+on-change-text show this issue.

<template>
  <view class="container">
    <text class="text-color-primary">My Vue Native App</text>
    <text-input
      :style="{ height: 40, width: 100, borderColor: 'gray', borderWidth: 1 }"
      :value="text"
      :on-change-text="onChange"
    />
  </view>
</template>
<script>
export default {
  data: function () {
    return {
      text: '',
    };
  },
  methods: {
    onChange(t) {
      this.text = t;
    },
  },
};
</script>
<style>
.container {
  background-color: white;
  align-items: center;
  justify-content: center;
  flex: 1;
}
.text-color-primary {
  color: blue;
}
</style>

I'm not able to reproduce this on React Native though (neither class nor functional components). Marking this as a bug.

[dsgrunge1]

Ok

[gjdipietro]

@dsgrunge1

Noticed this on my project too.
iOS
"vue-native-core": "^0.2.0",
"vue-native-helper": "^0.2.0",
"vue-native-router": "^0.2.1",
"vue-native-scripts": "^0.2.0",
"native-base": "^2.13.8",

Switching from
<nb-input v-model="username" />
to
<nb-input :onChangeText="(text) => (username = text)" />

fixed the issue but doesn't allow me to use v-model.

[RishabhKarnad]

This is caused by an issue in React Native 0.63 and above on Android
facebook/react-native#30503

This cannot be fixed until the TextInput component is fixed in React Native. Please use RN 0.62 for now to avoid the issue. If you are using Expo, you may need to eject or manually switch to RN 0.62 in the package.json