Nativescript-vue Set the cursor at end of TextInput RTL

Question

I'm trying to programmaticly set the cursor at the end of my text field, to simulate a RTL text input.

My TextField component:

<TextField ref="value_field" v-model="value" class="input input-border" keyboardType="number" />

I've setted a watch that does the "mask" magic:

value(val){
    let v = parseFloat(val.replace("R$ ", '').replace(/\./g, '').replace(',', '.'));
    this.value_to_btc = (v / parseFloat(appSettings.getString('ticker'))).formatMoney('BTC ',6,'.',',',0);
    if (val && this.check_value) {
        let value = val;

        value = value.replace(/\D/g, '');

        if (value.length === 3) {
            value = value.replace(/(\d{1})(\d{2})/, '$1,$2');
        } else if (value.length === 4) {
            value = value.replace(/(\d{2})(\d{2})/, '$1,$2');
        } else if (value.length === 5) {
            value = value.replace(/(\d{3})(\d{2})/, '$1,$2');
        } else if (value.length === 6) {
            value = value.replace(/(\d{1})(\d{3})(\d{2})/, '$1.$2,$3');
        } else if (value.length === 7) {
            value = value.replace(/(\d{2})(\d{3})(\d{2})/, '$1.$2,$3');
        } else if (value.length === 8) {
            value = value.replace(/(\d{3})(\d{3})(\d{2})/, '$1.$2,$3');
        } else if (value.length === 9) {
            value = value.replace(/(\d{1})(\d{3})(\d{3})(\d{2})/, '$1.$2.$3,$4');
        } else if (value.length === 10) {
            value = value.replace(/(\d{2})(\d{3})(\d{3})(\d{2})/, '$1.$2.$3,$4');
        } else if (value.length === 11) {
            value = value.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, '$1.$2.$3,$4');
        } else if (value.length === 12) {
            value = value.replace(/(\d{1})(\d{3})(\d{3})(\d{3})(\d{2})/, '$1.$2.$3.$4,$5');
        } else {
            value = value.replace(/(\d{10,})(\d{2})/, '$1.$2');
        }

        this.value = "R$ " + value;
    }
    this.check_value = !this.check_value; // This is to prevent the watch callback
    if (isAndroid) {
        console.log(this.value.length - 1);
        this.$refs.value_field.nativeView.android.setSelection(this.value.length - 1)
    }
}

The problem should be in this block:

if (isAndroid) {
    console.log(this.value.length - 1);
    this.$refs.value_field.nativeView.android.setSelection(this.value.length - 1)
}

this.value.length returns the integer value greater or equal to 0. But the next line (this.$refs.value_field.nativeView.android.setSelection(this.value.length - 1)) that should set the cursor to the especific index which is the size of my input - 1.

But it always goes to the 0 position of my TextField. Whats am I missing?

Which device you are testing it with? Can you share a Playground sample where the issue can be reproduced? — Manoj

Fábio Araújo Fábio Araújo · Accepted Answer · 2019-11-05T13:58:05

Well, found the solution. Did 2 tricks.

Move out from watch and set to the @textChange event
Add a whitespace after the end of input just to can set the cursor behind the last number

My TextField component:

<TextField ref="value_field" v-model="value" class="input input-border" keyboardType="number" @textChange="setToEnd($event)" />

My new method setToEnd method:

setToEnd: function(event){
    let v = parseFloat(this.value.replace("R$ ", '').replace(/\./g, '').replace(',', '.'));
    this.value_to_btc = (v / parseFloat(appSettings.getString('ticker'))).formatMoney('BTC ',6,'.',',',0);
    let value = this.value;

    value = value.replace(/\D/g, '');
    if (value.length === 3) {
        value = value.replace(/(\d{1})(\d{2})/, '$1,$2');
    } else if (value.length === 4) {
        value = value.replace(/(\d{2})(\d{2})/, '$1,$2');
    } else if (value.length === 5) {
        value = value.replace(/(\d{3})(\d{2})/, '$1,$2');
    } else if (value.length === 6) {
        value = value.replace(/(\d{1})(\d{3})(\d{2})/, '$1.$2,$3');
    } else if (value.length === 7) {
        value = value.replace(/(\d{2})(\d{3})(\d{2})/, '$1.$2,$3');
    } else if (value.length === 8) {
        value = value.replace(/(\d{3})(\d{3})(\d{2})/, '$1.$2,$3');
    } else if (value.length === 9) {
        value = value.replace(/(\d{1})(\d{3})(\d{3})(\d{2})/, '$1.$2.$3,$4');
    } else if (value.length === 10) {
        value = value.replace(/(\d{2})(\d{3})(\d{3})(\d{2})/, '$1.$2.$3,$4');
    } else if (value.length === 11) {
        value = value.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, '$1.$2.$3,$4');
    } else if (value.length === 12) {
        value = value.replace(/(\d{1})(\d{3})(\d{3})(\d{3})(\d{2})/, '$1.$2.$3.$4,$5');
    } else {
        value = value.replace(/(\d{10,})(\d{2})/, '$1.$2');
    }

    this.value = "R$ " + value + " " ;
    if (isAndroid) {
        this.$refs.value_field.nativeView.android.setSelection(this.value.length - 1);   
    }
}

These two changes did the trick. Hope it helps someone.

Nativescript-vue Set the cursor at end of TextInput RTL

1 Answers