Device enter key detector

Ionic Framework Ionic React
1

Hello.

What I’m looking for is to run the Search function when the device’s enter key is pressed but I can’t do it. If with onIonChange I can filter the words

What event is necessary to use to detect the enter on the device?

const Search = () =>{
  //do something
   }   
const Words = (value:any) =>{
  //do something
   }   
     return(
    <>
      <IonSearchbar debounce={500} type="text" onIonChange={e => {Words(e.detail.value!)}} onIonInput={ Search} ></IonSearchbar>
    </>
     )
   };
2

I don’t know React, but I’ve done it in Angular by wrapping the input in a form tag and setting the form submit to the function to call:

<form (submit)="switchUser()">
    <ion-item>
      <ion-label>PIN:</ion-label>
      <ion-input type="password" inputmode="tel" #pinInput [(ngModel)]="enteredPin" name="enteredPin"></ion-input>
    </ion-item>
  </form>
1 Like
3

In Angular it’s way more easier by just using (keyup.enter)="...".

I found this Thread for React: javascript - How to handle the `onKeyPress` event in ReactJS? - Stack Overflow

1 Like
4

I found the solution in ReactJS

const SearchBar= ( ) =>{
  
//SomeCode
  const SearchF= (value:any) =>{
    if(value == "Enter"){
    //  console.log("Enter key pressed")
    //SomeCode
    }
  }
  return(
 <>
    <IonGrid>
     <IonRow>
      <IonSearchbar placeholder={txt} onKeyPress={e=> SearchF(e.key)} onIonChange={e => { {Words(e.detail.value!)})}}  ></IonSearchbar>
      </IonRow>
    </IonGrid>
</>
    )
  };