CaWittMN08/custom_ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix datatable menu refs

Browse Source
This commit is contained in:
Casey 2026-01-14 14:33:48 -06:00
parent 01ff96fb74
commit d496f21ab9
1 changed files with 13 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
frontend/src/components/common/DataTable.vue
View File

@ -410,7 +410,7 @@
outlined
/>
<Menu
:ref="defineMenuRef(action.label, slotProps.data.id)"
:ref="(el) => setMenuRef(el, action.label, slotProps.data.id)"
:model="buildMenuItems(action.menuItems || [], slotProps.data)"
:popup="true"
/>
@ -428,6 +428,7 @@ import Column from "primevue/column";
import Tag from "primevue/tag";
import Button from "primevue/button";
import Select from "primevue/select";
import Menu from "primevue/menu";
import InputText from "primevue/inputtext";
import { FilterMatchMode } from "@primevue/core";
import { useFiltersStore } from "../../stores/filters";
@ -441,13 +442,6 @@ const paginationStore = usePaginationStore();
const menuRefs = reactive({});
const activeMenuKey = ref(null);
const defineMenuRef = (label, id) => {
console.log("Defining Menu Refs:", label, id);
const refName = `${label}-${id}`
menuRefs[refName] = ref();
return menuRefs[refName]
}
const props = defineProps({
columns: {
type: Array,
@ -531,6 +525,14 @@ const props = defineProps({
},
});
const setMenuRef = (el, label, id) => {
if (el) {
const refName = `${label}-${id}`;
menuRefs[refName] = el;
console.log("Setting Menu Ref:", refName, el);
}
}
const emit = defineEmits([
"rowClick",
"row-click",
@ -1074,15 +1076,14 @@ const handleActionClick = (action, rowData = null) => {
const toggleMenu = (event, action, rowData) => {
console.log("Menu button toggled");
const menuKey = `${action.label}-${rowData.id}`;
console.log(menuRefs, menuKey);
console.log("Looking for menu:", menuKey, menuRefs);
const menu = menuRefs[menuKey];
console.log(event, action, rowData, menuKey, menu);
if (menu) {
console.log("Menu:", menu);
console.log("Found menu, toggling:", menu);
menu.toggle(event);
activeMenuKey.value = menuKey;
} else {
console.log("Menu undefined.");
console.log("Menu undefined for key:", menuKey);
}
};