mirror of
https://github.com/penpot/penpot.git
synced 2026-06-15 20:02:17 +00:00
🐛 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:
parent
b03537fa68
commit
8b1845366a
@ -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)}]
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user