👁️
make quantity edit properly
+25
-9
+25
-9
src/components/deck/CardModal.tsx
+25
-9
src/components/deck/CardModal.tsx
···
31
31
readOnly = false,
32
32
allTags = [],
33
33
}: CardModalProps) {
34
-
const [quantity, setQuantity] = useState(card.quantity);
34
+
const [quantity, setQuantity] = useState<number | string>(card.quantity);
35
35
const [tags, setTags] = useState<string[]>(card.tags ?? []);
36
36
37
37
const titleId = useId();
···
77
77
78
78
if (!isOpen) return null;
79
79
80
+
const numericQuantity =
81
+
typeof quantity === "number" ? quantity : card.quantity;
82
+
80
83
const handleQuantityChange = (newQuantity: number) => {
81
84
if (newQuantity >= 1) {
82
85
setQuantity(newQuantity);
83
86
onUpdateQuantity(newQuantity);
87
+
}
88
+
};
89
+
90
+
const handleQuantityBlur = () => {
91
+
if (typeof quantity !== "number" || quantity < 1) {
92
+
setQuantity(card.quantity);
84
93
}
85
94
};
86
95
···
188
197
<div className="flex items-center gap-3">
189
198
<button
190
199
type="button"
191
-
onClick={() => handleQuantityChange(quantity - 1)}
192
-
disabled={readOnly || quantity <= 1}
200
+
onClick={() => handleQuantityChange(numericQuantity - 1)}
201
+
disabled={readOnly || numericQuantity <= 1}
193
202
className="p-2 rounded-lg bg-gray-100 dark:bg-zinc-800 hover:bg-gray-200 dark:hover:bg-zinc-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
194
203
>
195
204
<Minus className="w-4 h-4 text-gray-700 dark:text-zinc-300" />
···
198
207
type="number"
199
208
min="1"
200
209
value={quantity}
201
-
onChange={(e) =>
202
-
handleQuantityChange(
203
-
Number.parseInt(e.target.value, 10) || 1,
204
-
)
205
-
}
210
+
onChange={(e) => {
211
+
const val = e.target.value;
212
+
if (val === "") {
213
+
setQuantity("");
214
+
} else {
215
+
const num = Number.parseInt(val, 10);
216
+
if (num >= 1) {
217
+
handleQuantityChange(num);
218
+
}
219
+
}
220
+
}}
221
+
onBlur={handleQuantityBlur}
206
222
disabled={readOnly}
207
223
className="w-20 px-3 py-2 text-center bg-gray-100 dark:bg-zinc-800 border border-gray-300 dark:border-zinc-600 rounded-lg text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-cyan-500 disabled:opacity-50 disabled:cursor-not-allowed"
208
224
/>
209
225
<button
210
226
type="button"
211
-
onClick={() => handleQuantityChange(quantity + 1)}
227
+
onClick={() => handleQuantityChange(numericQuantity + 1)}
212
228
disabled={readOnly}
213
229
className="p-2 rounded-lg bg-gray-100 dark:bg-zinc-800 hover:bg-gray-200 dark:hover:bg-zinc-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
214
230
>