Ensure stable identity for pricing tiers in forms

Adds a tempId to new pricing tiers for stable mapping before backend _id assignment. Updates mapping logic in pricing-tiers form to use tempId or _id for reliable event handling and rendering.
This commit is contained in:
NotII
2025-10-16 12:12:22 +01:00
parent 577c93d62b
commit 03a2e37502
3 changed files with 19 additions and 9 deletions

View File

@@ -76,14 +76,12 @@ export const PricingTiers = ({
.sort((a, b) => (a?.minQuantity || 0) - (b?.minQuantity || 0)) .sort((a, b) => (a?.minQuantity || 0) - (b?.minQuantity || 0))
.map((tier, sortedIndex) => { .map((tier, sortedIndex) => {
if (!tier) return null; if (!tier) return null;
// Prefer stable identifiers for mapping back to the original array
// Find the original index for proper event handling const keyId = tier._id || tier.tempId;
const originalIndex = pricing.findIndex(p => const originalIndex = pricing.findIndex((p) => (p?._id || p?.tempId) === keyId);
p === tier || (p?.minQuantity === tier?.minQuantity && p?.pricePerUnit === tier?.pricePerUnit)
);
return ( return (
<div <div
key={tier._id || originalIndex} key={keyId || originalIndex}
className="grid grid-cols-[1fr_1fr_1fr_auto] gap-2 mt-2" className="grid grid-cols-[1fr_1fr_1fr_auto] gap-2 mt-2"
> >
<Input <Input

View File

@@ -98,7 +98,19 @@ export const ProductModal: React.FC<ProductModalProps> = ({
const handleAddTier = () => { const handleAddTier = () => {
setProductData((prev) => ({ setProductData((prev) => ({
...prev, ...prev,
pricing: [...prev.pricing, { minQuantity: 0, pricePerUnit: 0 }], pricing: [
...prev.pricing,
{
minQuantity: 0,
pricePerUnit: 0,
// tempId ensures stable identity before backend assigns _id
// Using crypto.randomUUID if available, otherwise a timestamp fallback
tempId:
(typeof crypto !== "undefined" && (crypto as any).randomUUID
? (crypto as any).randomUUID()
: `${Date.now()}-${Math.random()}`),
},
],
})); }));
}; };

View File

@@ -1,4 +1,4 @@
{ {
"commitHash": "72821e5", "commitHash": "577c93d",
"buildTime": "2025-10-15T16:14:23.964Z" "buildTime": "2025-10-16T11:12:16.746Z"
} }