Ionic/React - Long press and click events conflict

Viewed 629

In a Ionic/React project, I am rendering a list of note items that, when clicked, go to that specific note's details, but when long pressed, get selected and enter "select mode".

For the long press event, I am using: this hook

My issue is that whenever I long press, the item gets selected and I am now in "select mode", however, letting go of the click is the counted as a click event and I enter into the details of the note. Long pressing the note should only select it, but a quick click should enter the details.

In case this matters, here is the code for the individual note component:

<IonCard key={note.id} {...selectable}>
      <IonItem color={color} button routerLink={`/notes/${note.id}`}>
        <IonLabel>{note.content}</IonLabel>
      </IonItem>
</IonCard>

What is the simplest way to prevent this from happening? Any ideas are much appreciated.

0 Answers
Related