Nativescript-vue: Cursor back to initial in TextField

[MatheusPimentel]

Version

2.0.0

Reproduction link

https://play.nativescript.org/?template=play-vue&id=WlJneO

Platform and OS info

NativeScript-vue 2.0, android 8.1

Steps to reproduce

I created a component to mask some characteres (type number). When the watcher is activated and add a character in this data, the cursor pointer back to initial. hope I been clear, I'm not so good in english

What is expected?

1. (Cursor pointer here)

What is actually happening?

(Cursor pointer here) 123.

---

code here:

<template>
  <TextField ref="cpfField" v-model="text" :hint="hint" class="form-input" keyboardType="number" maxLength="14"/>
</template>

<script>
  export default {
    name: "InputMask",
    props: {
      hint: {
        default: ''
      },
      value: {
        default: ''
      }
    },
    data: () => ({
      text: ''
    }),
    methods: {
      formatCpf(text, idx, rem, str) {
        return text.slice(0, idx) + str + text.slice(idx + Math.abs(rem));
      }
    },
    watch: {
      text(text) {
        this.$emit('emit', this.text);
        if (text.length === 3) {
          this.text = text + '.';
        } else if (text.length === 7) {
          this.text = text + '.';
        } else if (text.length === 11) {
          this.text = text + '-';
        }
        this.$emit('emit', this.text);
        debugger;
        this.$refs.cpfField.nativeView.focus();
      },
      value(value) {
        this.text = value;
      }
    }
  }
</script>

<style scoped>

</style>

[francelys04]

I'm having the same issue. I'm trying to create a mask for currencies and everytime the watcher adds a character, the pointer goes back to the beginning of the input.

Any solutions so far?

[tralves]

I had a similar issue where I had a text field with autocomplete. I ended up creating a function that puts the cursor where I wanted, using the native APIs:

        setCursorPosition(position) {
            const nativeView = this.$refs.textInput.nativeView;
            if (isIOS) {
                try {
                    const beginOfDoc = nativeView.ios.beginningOfDocument;
                    const textPosition = nativeView.ios.positionFromPositionOffset(beginOfDoc, position);
                    nativeView.ios.selectedTextRange = nativeView.ios.textRangeFromPositionToPosition(
                        textPosition,
                        textPosition
                    );
                } catch (e) {
                    console.log(e);
                }
            }
            try {
                nativeView.android.setSelection(position);
            } catch (e) {}
        },

You have to do the math to see where you want to place the cursor. I hope this helps!

[francelys04]

I had a similar issue where I had a text field with autocomplete. I ended up creating a function that puts the cursor where I wanted, using the native APIs:

        setCursorPosition(position) {
            const nativeView = this.$refs.textInput.nativeView;
            if (isIOS) {
                try {
                    const beginOfDoc = nativeView.ios.beginningOfDocument;
                    const textPosition = nativeView.ios.positionFromPositionOffset(beginOfDoc, position);
                    nativeView.ios.selectedTextRange = nativeView.ios.textRangeFromPositionToPosition(
                        textPosition,
                        textPosition
                    );
                } catch (e) {
                    console.log(e);
                }
            }
            try {
                nativeView.android.setSelection(position);
            } catch (e) {}
        },

You have to do the math to see where you want to place the cursor. I hope this helps!

This worked as a charm, thanks 👍

[rigor789]

While this is definitely not a desired behavior, there is nothing in NativeScript-Vue that affects this behavior.

Glad to see the workaround by @tralves is working!

[nativescript-vue-bot]

We are locking this issue because it has been closed for more than 14 days.

If the issue comes up again please open a new issue with additional details.