🐛 Allow pasting comma-separated emails in multi-input (#10186)

The multi-input component did not handle paste events for
comma-separated values. When users pasted emails like
'qa@example.com, test@example.com', the entire string was
inserted as-is, triggering validation errors.

The on-key-down handler already split text on commas/spaces
when typing, but paste events bypassed this logic.

Added an on-paste handler that:
- Detects if pasted text contains commas or whitespace
- Splits the text by commas and/or whitespace
- Validates each part individually
- Adds valid items to the items list
- Prevents default paste behavior
- Resets input state after processing

Signed-off-by: Andrey Antukh <niwi@niwi.nz>
This commit is contained in:
Andrey Antukh 2026-06-15 17:50:59 +02:00 committed by GitHub
parent b03537fa68
commit 8b1845366a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -557,6 +557,32 @@
(dom/stop-propagation event)
(swap! items (fn [items] (if (c/empty? items) items (pop items)))))))))
on-paste
(mf/use-fn
(fn [event]
(let [paste-data (-> event .-clipboardData (.getData "text"))]
(when (and (string? paste-data)
(re-find #"[,\s]" paste-data))
(dom/prevent-default event)
(dom/stop-propagation event)
;; Mark as touched
(swap! form assoc-in [:touched input-name] true)
;; Split pasted text by commas and/or whitespace, add each valid part
(let [parts (->> (str/split paste-data #",|\s+")
(map str/trim)
(remove str/empty?))]
(doseq [part parts]
(when (valid-item-fn part)
(swap! items conj-dedup {:text part
:valid true
:caution (caution-item-fn part)})))
;; Reset input value and mark as untouched after successful paste
(reset! value "")
(swap! form assoc-in [:touched input-name] false))))))
on-blur
(mf/use-fn
(fn [_]
@ -590,6 +616,7 @@
:on-focus on-focus
:on-blur on-blur
:on-key-down on-key-down
:on-paste on-paste
:value @value
:on-change on-change
:placeholder (when empty? label)}]