Currently, we are in the process of developing an electron-based application with the front end primarily coded using Vue.js and primeVue. As a novice, I am encountering issues with the menubar component from primeVue. The problem is that no matter which item I click on, the first menubar item always remains highlighted as the active one. Upon inspecting devTools, I observed that whenever I click on any item, the class p-focus is consistently applied to the first menubar item. Is there anyone who can provide guidance on where the issue might lie or how to deactivate this persistent p-focus class? Any insights would be greatly appreciated.
Below is the code snippet for reference:
<template>
<Menubar :model="items" class="mymenu">
<template #end>
<Button icon="pi pi-user" class="mr-2" />
<Button @click="$router.go(-1)" label="Back" />
</template>
</Menubar>
</template>
<script>
import Menubar from 'primevue/menubar';
import Button from "primevue/button";
export default {
name:"Menu",
components: {
Menubar,
Button
},
data() {
return {
items: [
{label:'Item 1',to:"/operators"},
{label:'Item 2',to:"/sites"},
{label:'Item 3',to:"/ropes"}
]
};
}
}
</script>
In addition, images detailing the aforementioned issue are provided below:
- Screenshot showing the menubar highlighting the incorrect item
- Screenshot depicting the p-focus class highlighted in devtools
I have attempted various solutions such as defining pseudoclasses like p-menuitem:focus or p-menutitem:active to style the background color but to no avail. Furthermore, trying to style the existing components by creating a custom class for the menu also proved unsuccessful despite increasing specificity with the use of !important.
<style lang="scss" scoped>
::v-deep(.mymenu){
.p-menuitem{
background-color: aqua !important;
}
}
</style>