From 70c6f04b53331bac0e2c4f5c6e89465e1ea38989 Mon Sep 17 00:00:00 2001 From: Vlad Temian Date: Fri, 9 Jan 2026 15:18:48 +0200 Subject: [PATCH] fix(ui): add timeout cleanup in TextField copy handler Use reactive effect pattern to handle copy feedback timeout. The effect auto-cleans up on re-run (rapid clicks) and component unmount, preventing state updates on unmounted components. --- packages/ui/src/components/text-field.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/ui/src/components/text-field.tsx b/packages/ui/src/components/text-field.tsx index ed3d13fe355..f3923efe130 100644 --- a/packages/ui/src/components/text-field.tsx +++ b/packages/ui/src/components/text-field.tsx @@ -1,5 +1,5 @@ import { TextField as Kobalte } from "@kobalte/core/text-field" -import { createSignal, Show, splitProps } from "solid-js" +import { createEffect, createSignal, onCleanup, Show, splitProps } from "solid-js" import type { ComponentProps } from "solid-js" import { IconButton } from "./icon-button" import { Tooltip } from "./tooltip" @@ -51,11 +51,16 @@ export function TextField(props: TextFieldProps) { ]) const [copied, setCopied] = createSignal(false) + createEffect(() => { + if (!copied()) return + const timeout = setTimeout(() => setCopied(false), 2000) + onCleanup(() => clearTimeout(timeout)) + }) + async function handleCopy() { const value = local.value ?? local.defaultValue ?? "" await navigator.clipboard.writeText(value) setCopied(true) - setTimeout(() => setCopied(false), 2000) } function handleClick() {