fix(NavigationMenu): arrow position conflict

[vachmara]

🔗 Linked issue

Resolves #4073

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

The main issue lies in NavigationMenu specifically in how the default value is set when rendering NavigationMenuItem.

In reka-ui, the library uses the default item value as reference to find the active element:

activeTrigger.value = items.find(item =>
    item.id.includes(modelValue.value),
)

However, this can lead to incorrect matches due to the way IDs are generated. If we inspect the ID generation logic the ID often includes an index, for example: reka-navigation-menu-v-10-trigger-0

In this case, if we hover the second tab, modelValue.value will be equal to 1. The includes check will mistakenly match this ID (because 1 is included in 10), returning the wrong element, typically the first item instead of the second here.

This issue becomes more likely when item values are simple strings like numeric indices ("0", "1", etc.). A more robust comparison would avoid this kind of false-positive match.

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[pkg-pr-new]

npm i https://pkg.pr.new/@nuxt/ui@4137

commit: 430986e

[benjamincanac]

Thanks for digging this out! 😊