4aiman/baldav
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix all querySelector('.modal-overlay') to grab last (topmost) overlay

Browse source 
When a sub-modal opens over a parent modal, querySelector returns the
FIRST (parent) overlay, not the new one. Compare items, recipe buttons,
goal markers — none of them got onclick bindings because they searched
in the wrong overlay.

All 11 occurrences replaced with [...querySelectorAll(...)].pop() to
always get the topmost (most recently added) modal overlay.
This commit is contained in:
4aiman 2026-05-29 10:41:10 +03:00
commit 03358964e2
1 changed files with 11 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

22
frontend/js/main.js
View file

@ -919,7 +919,7 @@ function showFoodModal() {
}
});
const overlay = document.querySelector(".modal-overlay");
const overlay = [...document.querySelectorAll(".modal-overlay")].pop();
const selectedEl = overlay.querySelector("#m-selected");
const manualFields = overlay.querySelector("#m-manual-fields");
const unitChipsEl = overlay.querySelector("#m-unit-chips");
@ -1040,7 +1040,7 @@ function showEditFoodModal(entry) {
}
});
const overlay = document.querySelector(".modal-overlay");
const overlay = [...document.querySelectorAll(".modal-overlay")].pop();
const currentEl = overlay.querySelector("#m-current");
const searchBlock = overlay.querySelector("#m-search-block");
@ -1395,7 +1395,7 @@ async function showRecipeDetailModal(recipeId) {
`, () => {});
// Wire up buttons after DOM is ready
const overlay = document.querySelector(".modal-overlay");
const overlay = [...document.querySelectorAll(".modal-overlay")].pop();
const logBtn = overlay.querySelector("#rd-log");
const editBtn = overlay.querySelector("#rd-edit");
const delBtn = overlay.querySelector("#rd-delete");
@ -1564,7 +1564,7 @@ async function showRecipeEditorModal(recipeId) {
});
// Set initial method value
const overlay = document.querySelector(".modal-overlay");
const overlay = [...document.querySelectorAll(".modal-overlay")].pop();
if (recipe.cooking_method_id) {
overlay.querySelector("#re-method").value = recipe.cooking_method_id;
}
@ -1716,7 +1716,7 @@ function showFoodFromRecipeModal() {
});
// Load recipes into the list
const overlay = document.querySelector(".modal-overlay");
const overlay = [...document.querySelectorAll(".modal-overlay")].pop();
const listEl = overlay.querySelector("#rfr-list");
(async () => {
@ -1924,7 +1924,7 @@ async function showGoalMarkersModal() {
// Hide save/cancel since this is a management modal
setTimeout(() => {
const overlay = document.querySelector(".modal-overlay");
const overlay = [...document.querySelectorAll(".modal-overlay")].pop();
if (!overlay) return;
const btns = overlay.querySelector(".modal-btns");
if (btns) btns.style.display = "none";
@ -2326,7 +2326,7 @@ function showMapDownloadModal() {
okBtn.disabled = false;
});
const overlay = document.querySelector(".modal-overlay");
const overlay = [...document.querySelectorAll(".modal-overlay")].pop();
const countEl = overlay.querySelector("#m-tile-count");
// Selection
@ -3016,7 +3016,7 @@ async function showCompareModal(sessionId, currentSession, currentPoints) {
</div>`, () => {});
setTimeout(() => {
const overlay = document.querySelector(".modal-overlay");
const overlay = [...document.querySelectorAll(".modal-overlay")].pop();
if (!overlay) return;
// Hide save/cancel buttons — this is a selection modal
const btns = overlay.querySelector(".modal-btns");
@ -3201,7 +3201,7 @@ async function showLogSupplementModal() {
await DB.logSupplement(state.date, time, sid, qty);
});
const overlay = document.querySelector(".modal-overlay");
const overlay = [...document.querySelectorAll(".modal-overlay")].pop();
overlay.querySelectorAll(".supp-pick-item").forEach(item => {
item.onclick = () => {
overlay.querySelectorAll(".supp-pick-item").forEach(i => i.classList.remove("selected"));
@ -3626,7 +3626,7 @@ function showProfileModal() {
// Sex chip handler inside modal
setTimeout(() => {
const overlay = document.querySelector(".modal-overlay");
const overlay = [...document.querySelectorAll(".modal-overlay")].pop();
if (!overlay) return;
overlay.querySelectorAll("[data-sex]").forEach(btn => {
btn.onclick = () => {
@ -3730,7 +3730,7 @@ async function showBikeModal(bikeId) {
// Active toggle chips
setTimeout(() => {
const overlay = document.querySelector(".modal-overlay");
const overlay = [...document.querySelectorAll(".modal-overlay")].pop();
if (!overlay) return;
overlay.querySelectorAll("#m-bike-active-yes, #m-bike-active-no").forEach(btn => {
btn.onclick = (e) => {