From cf32c4f82a9781aa7991d1fb3ad96520ccc0c3b7 Mon Sep 17 00:00:00 2001
From: Alice Hernandez <hola@puercito.net>
Date: Mon, 15 Jun 2026 22:39:24 +1000
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix=20genre=20comma=20separation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/renderer/components/MarketsView/MarketsView.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/MarketsView/MarketsView.tsx b/src/renderer/components/MarketsView/MarketsView.tsx
index f33b892..9da8356 100644
--- a/src/renderer/components/MarketsView/MarketsView.tsx
+++ b/src/renderer/components/MarketsView/MarketsView.tsx
@@ -28,6 +28,7 @@ interface MarketFormProps {
 
 function MarketForm({ market, isNew, onSave, onCancel, onDelete }: MarketFormProps): JSX.Element {
   const [form, setForm] = useState<Market>({ ...market })
+  const [genresRaw, setGenresRaw] = useState<string>(market.genres.join(', '))
   const update = <K extends keyof Market>(key: K, value: Market[K]): void => setForm((f) => ({ ...f, [key]: value }))
 
   const handleSave = (): void => {
@@ -72,7 +73,12 @@ function MarketForm({ market, isNew, onSave, onCancel, onDelete }: MarketFormPro
       </div>
       <div className="form-field">
         <label className="form-label">Genres (comma-separated)</label>
-        <input value={form.genres.join(', ')} onChange={(e) => update('genres', e.target.value.split(',').map((g) => g.trim()).filter(Boolean))} placeholder="flash, micro, speculative" />
+        <input
+          value={genresRaw}
+          onChange={(e) => setGenresRaw(e.target.value)}
+          onBlur={(e) => update('genres', e.target.value.split(',').map((g) => g.trim()).filter(Boolean))}
+          placeholder="flash, micro, speculative"
+        />
       </div>
       <div className="form-field">
         <label className="form-label">Notes / editor preferences</label>