get Maximum call stack size exceeded on ios

platform

• iOS - emulator

version

{
  ...
  "dependencies": {
    "@nativescript-community/ui-popover": "^0.1.15",
    "@nativescript/core": "~8.6.2",
    "nativescript-vue": "3.0.0-beta.11"
  },
  "devDependencies": {
    "@nativescript/android": "8.6.2",
    "@nativescript/ios": "8.6.3",
    "@nativescript/tailwind": "~2.0.1",
    "@nativescript/types": "~8.6.1",
    "@nativescript/webpack": "~5.0.0",
    "@types/node": "~17.0.21",
    "tailwindcss": "^3.1.8",
    "typescript": "^5.2.2"
  }
}

how to recreate the issue

<template>
    <Frame>
        <Page actionBarHidden="true">
            <ListView ref="collection" height="100%" width="100%" separatorColor="transparent" :items="itemList"
                colWidth="50%" rowHeight="100">
                <template #default="{ item }">
                    <StackLayout :backgroundColor="item.color" height="100" @tap="show">
                        <Label :text="item.name" />
                    </StackLayout>
                </template>
            </ListView>
        </Page>
    </Frame>
</template>

<script lang="ts" setup>

import { ref } from 'nativescript-vue'
import { EventData, StackLayout } from "@nativescript/core"
// import { usePopover } from "../utils/popover"
import { usePopover } from '@nativescript-community/ui-popover/vue3'
import ColorHelp from '../components/ColorHelp.vue'
const { showPopover }=usePopover()

interface Card {
    name: string
    color: string
}
const itemList = ref<Card[]>([
    { name: 'TURQUOISE', color: '#1abc9c' },
    { name: 'EMERALD', color: '#2ecc71' },
    { name: 'PETER RIVER', color: '#3498db' },
    { name: 'AMETHYST', color: '#9b59b6' },
    { name: 'WET ASPHALT', color: '#34495e' },
    { name: 'GREEN SEA', color: '#16a085' },
    { name: 'NEPHRITIS', color: '#27ae60' },
    { name: 'BELIZE HOLE', color: '#2980b9' },
    { name: 'WISTERIA', color: '#8e44ad' },
    { name: 'MIDNIGHT BLUE', color: '#2c3e50' },
    { name: 'SUN FLOWER', color: '#f1c40f' },
    { name: 'CARROT', color: '#e67e22' },
    { name: 'ALIZARIN', color: '#e74c3c' },
    { name: 'CLOUDS', color: '#ecf0f1' },
    { name: 'CONCRETE', color: '#95a5a6' },
    { name: 'ORANGE', color: '#f39c12' },
    { name: 'PUMPKIN', color: '#d35400' },
    { name: 'POMEGRANATE', color: '#c0392b' },
    { name: 'SILVER', color: '#bdc3c7' },
    { name: 'ASBESTOS', color: '#7f8c8d' }
]);

async function show(evt: EventData) {
    let anchor = evt.object as StackLayout
    let color = anchor.backgroundColor
    try {
        await showPopover(ColorHelp, { anchor: anchor, props: { "color": color } })
    } catch (error) {
        console.log(`get error ${error.message}`)
    }
}
</script>

phenomenon

click the StackLayout will get error Maximum call stack size exceeded on ios. but on android every thing works.

Start with the provided TypeScript/Vue reproduction on an iOS emulator and trace the @nativescript-community/ui-popover/vue3 usePopover and showPopover path. Confirm where clicking the StackLayout produces the stack overflow, then verify that the behavior works without the error on iOS while remaining functional on Android.