nalalangan/grocery-app
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

fix: adjust buy quantities with arrow keys

Browse Source
This commit is contained in:
Nico 2026-06-16 00:52:26 -07:00
parent 37614ea499
commit 1c081038dd
2 changed files with 31 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/src/components/modals/ConfirmBuyModal.jsx
View File

@ -31,17 +31,17 @@ export default function ConfirmBuyModal({
const hasPrev = currentIndex > 0; const hasPrev = currentIndex > 0;
const hasNext = currentIndex < allItems.length - 1; const hasNext = currentIndex < allItems.length - 1;
const handleIncrement = () => { const handleIncrement = useCallback(() => {
if (!isSubmitting && quantity < maxQuantity) { if (isSubmitting) return;
setQuantity((prev) => prev + 1);
}
};
const handleDecrement = () => { setQuantity((prev) => Math.min(maxQuantity, prev + 1));
if (!isSubmitting && quantity > 1) { }, [isSubmitting, maxQuantity]);
setQuantity((prev) => prev - 1);
} const handleDecrement = useCallback(() => {
}; if (isSubmitting) return;
setQuantity((prev) => Math.max(1, prev - 1));
}, [isSubmitting]);
const handleConfirm = async () => { const handleConfirm = async () => {
if (isSubmitting) return; if (isSubmitting) return;
@ -88,12 +88,24 @@ export default function ConfirmBuyModal({
if (event.key === "ArrowRight") { if (event.key === "ArrowRight") {
event.preventDefault(); event.preventDefault();
handleNext(); handleNext();
return;
}
if (event.key === "ArrowUp") {
event.preventDefault();
handleIncrement();
return;
}
if (event.key === "ArrowDown") {
event.preventDefault();
handleDecrement();
} }
}; };
window.addEventListener("keydown", handleKeyDown); window.addEventListener("keydown", handleKeyDown);
return () => window.removeEventListener("keydown", handleKeyDown); return () => window.removeEventListener("keydown", handleKeyDown);
}, [handleNext, handlePrev, isSubmitting, onCancel]); }, [handleDecrement, handleIncrement, handleNext, handlePrev, isSubmitting, onCancel]);
const imageUrl = item.item_image && item.image_mime_type const imageUrl = item.item_image && item.image_mime_type
? `data:${item.image_mime_type};base64,${item.item_image}` ? `data:${item.image_mime_type};base64,${item.item_image}`

11
frontend/tests/location-map-manager.spec.ts
View File

@ -3846,9 +3846,14 @@ test("viewer advances map buy modal after partial quantity buys", async ({ page
await page.getByRole("button", { name: "Mark flour bought" }).click(); await page.getByRole("button", { name: "Mark flour bought" }).click();
await expect(page.locator(".confirm-buy-item-name")).toHaveText("flour"); await expect(page.locator(".confirm-buy-item-name")).toHaveText("flour");
await page.getByRole("button", { name: "Decrease quantity" }).click(); const quantityInput = page.getByRole("spinbutton", { name: "Quantity to mark bought" });
await page.getByRole("button", { name: "Decrease quantity" }).click(); await page.keyboard.press("ArrowDown");
await expect(page.getByRole("spinbutton", { name: "Quantity to mark bought" })).toHaveValue("1"); await page.keyboard.press("ArrowDown");
await expect(quantityInput).toHaveValue("1");
await page.keyboard.press("ArrowUp");
await expect(quantityInput).toHaveValue("2");
await page.keyboard.press("ArrowDown");
await expect(quantityInput).toHaveValue("1");
await page.getByRole("button", { name: "Mark as Bought" }).click(); await page.getByRole("button", { name: "Mark as Bought" }).click();
await expect.poll(() => boughtPayloads.length).toBe(1); await expect.poll(() => boughtPayloads.length).toBe(1);