Nativescript: [Feature request] Add return Press event for the TextView component.

[tsonevn]

_From @bachras on May 4, 2017 14:1_

Hi,

I am trying to implement TexView and submit it by pressing return button. However instead of submitting cursor goes to new line and doesn't do anything else. I have tried all examples i could found online, i also install this examples app and noticed that it is the same behaviour.

I added alert() :
````
submit(args) {
alert("Submit Text: " + this.tvtext);
let textview: TextView = args.object;
if (isAndroid) {
textview.android.clearFocus();
}
}
`````
But nothing is alerted after return(Send) button is clicked. Does anyone have idea what could be wrong? Thank you in advance.

_Copied from original issue: NativeScript/nativescript-sdk-examples-ng#183_

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[tsonevn]

Hi @bachras,
This is something expected while pressing the return button for the TextView. This component does not have exposed returnPressEvent as you can see in the documentation here.
Instead of using TextView you could use TextField, where this event is available. For example:
HTML

<GridLayout rows="" columns="">
    <TextField hint="Enter text" text="" returnKeyType="done" (returnPress)="submit()"></TextField>

</GridLayout>

TypeScript

submit(){
        console.log("on submit tap ");
    }

[tsonevn]

_From @sitefinitysteve on June 23, 2017 17:1_

Can we not make this a FR to ADD that event to TextView?

Its available to NG2? https://docs.nativescript.org/angular/code-samples/ui/text-view.html

[tsonevn]

_From @bradmartin on July 27, 2017 3:1_

I don't think it actually works with Angular @sitefinitysteve - just tried, no go. Was running into this myself. Gonna switch to a textfield and call it a day 👍 If it does work then that doc might need some TLC.

[tsonevn]

_From @hairen on September 22, 2017 7:11_

@tsonevn Why was this issue closed? It would be great to have returnPressEvent in TextView!

[tsonevn]

Hi @bachras, @sitefinitysteve, @bradmartin, @hairen,
I changed the label of the issue as a new feature request. If there is an interest in similar functionality, this feature would be available for some of the next NativeScript versions

[TheOnlyMatt]

Yes for sure, this feature would be so convenient !

[nmongiya]

In ios, there is no way to go out once you click the TextView as there is no event on returnPress.

[kilka]

For anyone looking for a work around you can add a (textChange) event function to check the char code and call your submit function if it matches the return key char code.

`

onChange(e)
{

    let value = e.value;
    let length = value.length
    let code = value.charCodeAt(length-1);

    if(code === 10){
    this.chat(value);
    }
}

`

[rchisholm]

if there is not returnPress available on TextView, you might want to update this page which shows a demo using returnPress on a TextView

[ronaiza-cardoso]

@rchisholm I'm traing to use this method but is not working like expected

[rchisholm]

@ronaiza-cardoso I agree, I’m sorry if I wasn’t clear... I mean that the NativeScript team should edit that page because it is misleading. That method wasn’t working for me either. I am now using @kilka ‘s workaround and it is working well for me. (Thanks, @kilka)

[ronaiza-cardoso]

I'm using this too

[Fusty]

There's also documentation for NativeScript-Vue that advertises a returnPress event.

https://nativescript-vue.org/en/docs/elements/components/text-view/#events

Why was this removed? Less features kinda stinks.

[KarineLiuti]

You can use v-on (with @) on the returnPress event.
Like this:

<GridLayout rows="" columns="">
    <TextField hint="Enter text" text="" returnKeyType="done" @returnPress="submit()"></TextField>  
</GridLayout>

[b02505048]

Hello @KarineLiuti, are you sure it works?
Because we tried this lot of time and still not working...

<TextField hint="Feedback" text="" returnKeyType="done" @returnPress="submit()" />

[KarineLiuti]

Hello @KarineLiuti, are you sure it works?
Because we tried this lot of time and still not working...

<TextField hint="Feedback" text="" returnKeyType="done" @returnPress="submit()" />

Yes. I did this in my code. Look the opa() method:

<template>
  <Page class="page">
    <ActionBar title="Home" class="action-bar" />
    <ScrollView>
      <StackLayout class="home-panel">
        <!--Add your page content here-->
        <Label v-if="amountValue" textWrap="true" :text="amountValue" class="h2 description-label" />
        <Label textWrap="true" text="Qual foi o valor da venda?" class="h2 description-label" />
        <TextField v-model="textFieldValue" keyboardType="number"
          returnKeyType="done" @returnPress="opa()"
          hint="Digite o valor da venda..." />
        <Button class="btn btn-primary" text="Bora lá" @tap="opa"></Button>
      </StackLayout>
    </ScrollView>
  </Page>
</template>

<script>
import RegisterCommission from './RegisterCommission'
export default {
  props: {
    amountValue: ''
  },
  data () {
    return {
      textFieldValue: ''
    };
  },
  methods: {
    onButtonTap() {
      console.log("Button was pressed");
    },
    opa() {
      this.isTyped = true;
      this.$navigateTo(RegisterCommission, {
        clearHistory: false,
        props: {
          valueSelled: this.textFieldValue
        }
      });
    }
  }
}
</script>

<style scoped>
.home-panel {
    vertical-align: center;
    font-size: 20;
    margin: 15;
}
.description-label {
    margin-bottom: 15;
}
</style>

[gustavost26]

The solution is to use this nativescript-iqkeyboardmanager plugin that solves this keyboard problem in ios: https://www.nativescript.org/blog/customizing-the-ios-keyboard-in-your-nativescript-apps