listView's `on:itemTap` gets overriden by `on:longPress` event on Teamplate's root container

[lucasrhode95]

I'm trying to create a listView in which the user can either tap and item to navigate to one page, or long press the item to open a context menu.

However, if I try to use the <listView on:itemTap={onItemTap}>...</listView> together with the on:longPress={onLongPress}, only one of them work. I tested different scenarios, some of which only the on:itemTap worked, and in other only the on:longPress worked, but never both.

Here's a code example, based off the documentation

<script lang="ts">
  import { Template } from "svelte-native/components";

  const onItemTap = e => {
    console.log("ITEM TAP"); // this is only executed if you tap the white area
  }
  const onLongPress = e => {
    console.log("LONG PRESS"); // this is only executed if you long-press the gray area
  }
  const firstRow  = { id: 1, name: "john"};
  const secondRow = { id: 2, name: "marie"};
  const theItems  = [firstRow, secondRow];
</script>

<page>
  <listView items={theItems} on:itemTap={onItemTap}>
    <Template let:item>
      <flexboxLayout on:longPress={onLongPress} style="background-color: #CCC;">
        <label text={item.id}/>
        <label text={item.name} />
      </flexboxLayout>
    </Template>
  </listView>
</page>

I figure it might be a rendering/layering problem, because:

• if you tap the white area, the onItemTap handler is executed
• if you tap the gray area, nothing happens
• if you long-press the gray area, the onLongPress handler is executed
• if you long-press the white area, nothing happens

[vallemar]

@lucasrhode95 try add event tap and longPress in the root flexboxLayout of template and remove itemTap

[lucasrhode95]

@vallemar yup, that was exactly my workaround. Is it the expected behavior then?

[vallemar]

@lucasrhode95 not sure, I always use this approach 🙂

[lucasrhode95]

alright, thanks for the replies @vallemar !