From 3afcad218980b5b9a3c82bc0a4955d97f35fb8cf Mon Sep 17 00:00:00 2001 From: Octopus Date: Wed, 29 Apr 2026 01:57:16 +0800 Subject: [PATCH] fix(short-input): hide selected text to prevent overlay collision (#4318) * v0.6.29: login improvements, posthog telemetry (#4026) * feat(posthog): Add tracking on mothership abort (#4023) Co-authored-by: Theodore Li * fix(login): fix captcha headers for manual login (#4025) * fix(signup): fix turnstile key loading * fix(login): fix captcha header passing * Catch user already exists, remove login form captcha * fix(short-input): hide selected text to prevent overlay collision The ShortInput component uses a transparent input layer beneath a formatted overlay. When users selected text and scrolled horizontally, the browser's ::selection pseudo-element overrode `color: transparent`, making raw unformatted text visible and causing visual collision with the overlay. Adding `selection:text-transparent` keeps the input text invisible under selection, while the overlay continues to display the correctly formatted highlighted text. Fixes #3389 Co-Authored-By: Octopus --------- Co-authored-by: Waleed Co-authored-by: Theodore Li Co-authored-by: Siddharth Ganesan <33737564+Sg312@users.noreply.github.com> Co-authored-by: Vikhyath Mondreti Co-authored-by: Theodore Li Co-authored-by: octo-patch --- .../components/sub-block/components/short-input/short-input.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/short-input/short-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/short-input/short-input.tsx index ba5ff8461b..48cdfa2e41 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/short-input/short-input.tsx +++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/short-input/short-input.tsx @@ -347,7 +347,7 @@ export const ShortInput = memo(function ShortInput({ <> } - className='allow-scroll w-full overflow-auto text-transparent caret-foreground [-ms-overflow-style:none] [scrollbar-width:none] placeholder:text-muted-foreground/50 [&::-webkit-scrollbar]:hidden' + className='allow-scroll w-full overflow-auto text-transparent selection:text-transparent caret-foreground [-ms-overflow-style:none] [scrollbar-width:none] placeholder:text-muted-foreground/50 [&::-webkit-scrollbar]:hidden' readOnly={readOnly} placeholder={placeholder ?? ''} type='text'