From f634a4a0c0a0c8f8b4dd569bc0910d8beaa6dd55 Mon Sep 17 00:00:00 2001
From: Raj Bhaskar <129203527+QuantumByteMaster@users.noreply.github.com>
Date: Mon, 11 May 2026 23:17:30 +0530
Subject: [PATCH] fix(front-component): preserve caret position on controlled
 input/textarea updates (#20416)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Problem

In the front-component sandbox, typing in the middle of a pre-filled
`<input>` or `<textarea>` caused the caret to jump to the end on every
keystroke. Characters appeared at the correct position, but editing
mid-string was effectively broken.

Root cause: the remote-DOM bridge round-trips every keystroke through
the
worker. By the time the updated `value` prop arrives back at the host,
React applies it by setting `inputElement.value = X` directly, which
browsers always reset the caret to the end.

Typing at the end was unaffected, which is why this went unnoticed in
search fields and similar append-only inputs.

## Fix

For text-like `<input>` types and `<textarea>`, the `value` prop is now
applied imperatively through a ref callback instead of being passed as a
React controlled prop:

- If the DOM value already matches the incoming prop, the assignment is
  skipped entirely.
- If a write is needed and the element is focused, `selectionStart` and
  `selectionEnd` are captured before the assignment and restored
  afterwards with `setSelectionRange`.

Non-text input types (checkbox, radio, file, color, range) and all other
host elements are unaffected.

## Testing

Drop the repro from the issue into any front-component, click between
two
characters in the pre-filled value, and type — the caret should now stay
at the insertion point.

Fixes #20409

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
---
 .../build-source-examples.ts                  |   1 +
 .../__stories__/EventForwarding.stories.tsx   | 101 +++++++++
 .../caret-preservation.front-component.tsx    |  98 ++++++++
 .../src/host/utils/createHtmlHostWrapper.ts   | 209 ++++++++++++------
 4 files changed, 336 insertions(+), 73 deletions(-)
 create mode 100644 packages/twenty-front-component-renderer/src/__stories__/example-sources/caret-preservation.front-component.tsx

diff --git a/packages/twenty-front-component-renderer/scripts/front-component-stories/build-source-examples.ts b/packages/twenty-front-component-renderer/scripts/front-component-stories/build-source-examples.ts
index cd1e3a7db0..551f07a6a4 100644
--- a/packages/twenty-front-component-renderer/scripts/front-component-stories/build-source-examples.ts
+++ b/packages/twenty-front-component-renderer/scripts/front-component-stories/build-source-examples.ts
@@ -86,6 +86,7 @@ const STORY_COMPONENTS = [
   'form-events.front-component',
   'keyboard-events.front-component',
   'host-api-calls.front-component',
+  'caret-preservation.front-component',
 ];
 
 const resolveEntryPoints = (): Record<string, string> => {
diff --git a/packages/twenty-front-component-renderer/src/__stories__/EventForwarding.stories.tsx b/packages/twenty-front-component-renderer/src/__stories__/EventForwarding.stories.tsx
index 4a508c2e96..d3e28f02af 100644
--- a/packages/twenty-front-component-renderer/src/__stories__/EventForwarding.stories.tsx
+++ b/packages/twenty-front-component-renderer/src/__stories__/EventForwarding.stories.tsx
@@ -317,6 +317,107 @@ export const HostApiProgress: Story = createHostApiStory(
   },
 );
 
+const TYPING_TIMEOUT = 10000;
+
+const expectCaretAt = async (
+  element: HTMLInputElement | HTMLTextAreaElement,
+  position: number,
+): Promise<void> => {
+  await waitFor(
+    () => {
+      expect(element.selectionStart).toBe(position);
+      expect(element.selectionEnd).toBe(position);
+    },
+    { timeout: TYPING_TIMEOUT },
+  );
+};
+
+export const InputCaretPreservedMidString: Story = createComponentStory(
+  'caret-preservation',
+  {
+    play: async ({ canvasElement }) => {
+      const canvas = within(canvasElement);
+
+      await canvas.findByTestId(
+        'caret-preservation-component',
+        {},
+        { timeout: MOUNT_TIMEOUT },
+      );
+
+      const input = (await canvas.findByTestId(
+        'caret-text-input',
+      )) as HTMLInputElement;
+
+      await waitFor(
+        () => {
+          expect(input.value).toBe('Hello world');
+        },
+        { timeout: INTERACTION_TIMEOUT },
+      );
+
+      input.focus();
+      input.setSelectionRange(4, 4);
+
+      await userEvent.keyboard('X');
+
+      await waitFor(
+        () => {
+          expect(input.value).toBe('HellXo world');
+          expect(canvas.getByTestId('caret-text-value').textContent).toBe(
+            'HellXo world',
+          );
+        },
+        { timeout: TYPING_TIMEOUT },
+      );
+
+      await expectCaretAt(input, 5);
+    },
+  },
+);
+
+export const TextareaCaretPreservedMidString: Story = createComponentStory(
+  'caret-preservation',
+  {
+    play: async ({ canvasElement }) => {
+      const canvas = within(canvasElement);
+
+      await canvas.findByTestId(
+        'caret-preservation-component',
+        {},
+        { timeout: MOUNT_TIMEOUT },
+      );
+
+      const textarea = (await canvas.findByTestId(
+        'caret-textarea-input',
+      )) as HTMLTextAreaElement;
+
+      await waitFor(
+        () => {
+          expect(textarea.value).toBe('Hello world');
+        },
+        { timeout: INTERACTION_TIMEOUT },
+      );
+
+      textarea.focus();
+      textarea.setSelectionRange(4, 4);
+
+      await userEvent.keyboard('X');
+
+      await waitFor(
+        () => {
+          expect(textarea.value).toBe('HellXo world');
+          expect(canvas.getByTestId('caret-textarea-value').textContent).toBe(
+            'HellXo world',
+          );
+        },
+        { timeout: TYPING_TIMEOUT },
+      );
+
+      await expectCaretAt(textarea, 5);
+    },
+  },
+);
+
 export const HostApiClosePanel: Story = createHostApiStory(
   async ({ canvasElement, args }) => {
     const canvas = within(canvasElement);
diff --git a/packages/twenty-front-component-renderer/src/__stories__/example-sources/caret-preservation.front-component.tsx b/packages/twenty-front-component-renderer/src/__stories__/example-sources/caret-preservation.front-component.tsx
new file mode 100644
index 0000000000..9a9ae6b910
--- /dev/null
+++ b/packages/twenty-front-component-renderer/src/__stories__/example-sources/caret-preservation.front-component.tsx
@@ -0,0 +1,98 @@
+import { defineFrontComponent } from 'twenty-sdk/define';
+import { type ChangeEvent, useState } from 'react';
+
+const CARD_STYLE = {
+  padding: 24,
+  backgroundColor: '#eff6ff',
+  border: '2px solid #3b82f6',
+  borderRadius: 12,
+  fontFamily: 'system-ui, sans-serif',
+  display: 'flex',
+  flexDirection: 'column' as const,
+  gap: 16,
+  maxWidth: 400,
+};
+
+const HEADING_STYLE = {
+  color: '#1e3a8a',
+  fontWeight: 700,
+  fontSize: 18,
+  margin: 0,
+};
+
+const LABEL_STYLE = {
+  fontSize: 13,
+  fontWeight: 600,
+  color: '#374151',
+};
+
+const HINT_STYLE = {
+  fontSize: 13,
+  color: '#6b7280',
+  fontFamily: 'monospace',
+};
+
+const INPUT_STYLE = {
+  padding: '8px 12px',
+  border: '1px solid #d1d5db',
+  borderRadius: 6,
+  fontSize: 14,
+  fontFamily: 'monospace',
+};
+
+const INITIAL_VALUE = 'Hello world';
+
+const CaretPreservationComponent = () => {
+  const [text, setText] = useState(INITIAL_VALUE);
+  const [textareaText, setTextareaText] = useState(INITIAL_VALUE);
+
+  return (
+    <div data-testid="caret-preservation-component" style={CARD_STYLE}>
+      <h2 style={HEADING_STYLE}>Caret Preservation</h2>
+
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+        <label style={LABEL_STYLE}>Text input (pre-filled)</label>
+        <input
+          data-testid="caret-text-input"
+          type="text"
+          value={text}
+          onChange={(event: ChangeEvent<HTMLInputElement>) => {
+            const detail = (event as unknown as { detail: { value?: string } })
+              .detail;
+            setText(detail?.value ?? '');
+          }}
+          style={INPUT_STYLE}
+        />
+        <span data-testid="caret-text-value" style={HINT_STYLE}>
+          {text}
+        </span>
+      </div>
+
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+        <label style={LABEL_STYLE}>Textarea (pre-filled)</label>
+        <textarea
+          data-testid="caret-textarea-input"
+          value={textareaText}
+          onChange={(event: ChangeEvent<HTMLTextAreaElement>) => {
+            const detail = (event as unknown as { detail: { value?: string } })
+              .detail;
+            setTextareaText(detail?.value ?? '');
+          }}
+          style={INPUT_STYLE}
+          rows={3}
+        />
+        <span data-testid="caret-textarea-value" style={HINT_STYLE}>
+          {textareaText}
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default defineFrontComponent({
+  universalIdentifier: 'test-caret-00000000-0000-0000-0000-000000000021',
+  name: 'caret-preservation-component',
+  description:
+    'Component verifying caret position is preserved during mid-string editing of <input>/<textarea>',
+  component: CaretPreservationComponent,
+});
diff --git a/packages/twenty-front-component-renderer/src/host/utils/createHtmlHostWrapper.ts b/packages/twenty-front-component-renderer/src/host/utils/createHtmlHostWrapper.ts
index 80e5c68b1b..3ef140463d 100644
--- a/packages/twenty-front-component-renderer/src/host/utils/createHtmlHostWrapper.ts
+++ b/packages/twenty-front-component-renderer/src/host/utils/createHtmlHostWrapper.ts
@@ -1,4 +1,14 @@
+import {
+  isBoolean,
+  isFunction,
+  isNonEmptyString,
+  isNumber,
+  isObject,
+  isString,
+  isUndefined,
+} from '@sniptt/guards';
 import React from 'react';
+import { isDefined } from 'twenty-shared/utils';
 
 import { EVENT_TO_REACT } from '@/constants/EventToReact';
 import { type SerializedEventData } from '@/constants/SerializedEventData';
@@ -31,7 +41,7 @@ const VOID_ELEMENTS = new Set([
 const parseCssString = (
   styleString: string | undefined,
 ): React.CSSProperties | undefined => {
-  if (!styleString || typeof styleString !== 'string') {
+  if (!isNonEmptyString(styleString)) {
     return styleString as React.CSSProperties | undefined;
   }
 
@@ -60,81 +70,62 @@ const parseCssString = (
 };
 
 const serializeEvent = (event: unknown): SerializedEventData => {
-  if (!event || typeof event !== 'object') {
+  if (!isObject(event)) {
     return { type: 'unknown' };
   }
 
   const domEvent = event as Record<string, unknown>;
   const serialized: SerializedEventData = {
-    type: typeof domEvent.type === 'string' ? domEvent.type : 'unknown',
+    type: isString(domEvent.type) ? domEvent.type : 'unknown',
   };
 
-  if ('altKey' in domEvent) serialized.altKey = domEvent.altKey as boolean;
-  if ('ctrlKey' in domEvent) serialized.ctrlKey = domEvent.ctrlKey as boolean;
-  if ('metaKey' in domEvent) serialized.metaKey = domEvent.metaKey as boolean;
-  if ('shiftKey' in domEvent)
-    serialized.shiftKey = domEvent.shiftKey as boolean;
+  if (isBoolean(domEvent.altKey)) serialized.altKey = domEvent.altKey;
+  if (isBoolean(domEvent.ctrlKey)) serialized.ctrlKey = domEvent.ctrlKey;
+  if (isBoolean(domEvent.metaKey)) serialized.metaKey = domEvent.metaKey;
+  if (isBoolean(domEvent.shiftKey)) serialized.shiftKey = domEvent.shiftKey;
 
-  if ('clientX' in domEvent) serialized.clientX = domEvent.clientX as number;
-  if ('clientY' in domEvent) serialized.clientY = domEvent.clientY as number;
-  if ('pageX' in domEvent) serialized.pageX = domEvent.pageX as number;
-  if ('pageY' in domEvent) serialized.pageY = domEvent.pageY as number;
-  if ('screenX' in domEvent) serialized.screenX = domEvent.screenX as number;
-  if ('screenY' in domEvent) serialized.screenY = domEvent.screenY as number;
-  if ('offsetX' in domEvent) serialized.offsetX = domEvent.offsetX as number;
-  if ('offsetY' in domEvent) serialized.offsetY = domEvent.offsetY as number;
-  if ('movementX' in domEvent)
-    serialized.movementX = domEvent.movementX as number;
-  if ('movementY' in domEvent)
-    serialized.movementY = domEvent.movementY as number;
-  if ('button' in domEvent) serialized.button = domEvent.button as number;
-  if ('buttons' in domEvent) serialized.buttons = domEvent.buttons as number;
+  if (isNumber(domEvent.clientX)) serialized.clientX = domEvent.clientX;
+  if (isNumber(domEvent.clientY)) serialized.clientY = domEvent.clientY;
+  if (isNumber(domEvent.pageX)) serialized.pageX = domEvent.pageX;
+  if (isNumber(domEvent.pageY)) serialized.pageY = domEvent.pageY;
+  if (isNumber(domEvent.screenX)) serialized.screenX = domEvent.screenX;
+  if (isNumber(domEvent.screenY)) serialized.screenY = domEvent.screenY;
+  if (isNumber(domEvent.offsetX)) serialized.offsetX = domEvent.offsetX;
+  if (isNumber(domEvent.offsetY)) serialized.offsetY = domEvent.offsetY;
+  if (isNumber(domEvent.movementX)) serialized.movementX = domEvent.movementX;
+  if (isNumber(domEvent.movementY)) serialized.movementY = domEvent.movementY;
+  if (isNumber(domEvent.button)) serialized.button = domEvent.button;
+  if (isNumber(domEvent.buttons)) serialized.buttons = domEvent.buttons;
 
-  if ('key' in domEvent) serialized.key = domEvent.key as string;
-  if ('code' in domEvent) serialized.code = domEvent.code as string;
-  if ('repeat' in domEvent) serialized.repeat = domEvent.repeat as boolean;
+  if (isString(domEvent.key)) serialized.key = domEvent.key;
+  if (isString(domEvent.code)) serialized.code = domEvent.code;
+  if (isBoolean(domEvent.repeat)) serialized.repeat = domEvent.repeat;
 
-  if ('deltaX' in domEvent) serialized.deltaX = domEvent.deltaX as number;
-  if ('deltaY' in domEvent) serialized.deltaY = domEvent.deltaY as number;
-  if ('deltaZ' in domEvent) serialized.deltaZ = domEvent.deltaZ as number;
-  if ('deltaMode' in domEvent)
-    serialized.deltaMode = domEvent.deltaMode as number;
+  if (isNumber(domEvent.deltaX)) serialized.deltaX = domEvent.deltaX;
+  if (isNumber(domEvent.deltaY)) serialized.deltaY = domEvent.deltaY;
+  if (isNumber(domEvent.deltaZ)) serialized.deltaZ = domEvent.deltaZ;
+  if (isNumber(domEvent.deltaMode)) serialized.deltaMode = domEvent.deltaMode;
 
-  const target = domEvent.target as Record<string, unknown> | undefined;
-  if (target && typeof target === 'object') {
-    if ('value' in target && typeof target.value === 'string') {
-      serialized.value = target.value;
-    }
-    if ('checked' in target && typeof target.checked === 'boolean') {
-      serialized.checked = target.checked;
-    }
-    if ('scrollTop' in target && typeof target.scrollTop === 'number') {
-      serialized.scrollTop = target.scrollTop;
-    }
-    if ('scrollLeft' in target && typeof target.scrollLeft === 'number') {
-      serialized.scrollLeft = target.scrollLeft;
-    }
-    if ('currentTime' in target && typeof target.currentTime === 'number') {
-      serialized.currentTime = target.currentTime;
-    }
-    if ('duration' in target && typeof target.duration === 'number') {
-      serialized.duration = target.duration;
-    }
-    if ('paused' in target && typeof target.paused === 'boolean') {
-      serialized.paused = target.paused;
-    }
-    if ('ended' in target && typeof target.ended === 'boolean') {
-      serialized.ended = target.ended;
-    }
-    if ('volume' in target && typeof target.volume === 'number') {
-      serialized.volume = target.volume;
-    }
-    if ('muted' in target && typeof target.muted === 'boolean') {
-      serialized.muted = target.muted;
-    }
-    if ('playbackRate' in target && typeof target.playbackRate === 'number') {
-      serialized.playbackRate = target.playbackRate;
-    }
+  const target = domEvent.target;
+  if (isObject(target)) {
+    const targetRecord = target as Record<string, unknown>;
+    if (isString(targetRecord.value)) serialized.value = targetRecord.value;
+    if (isBoolean(targetRecord.checked))
+      serialized.checked = targetRecord.checked;
+    if (isNumber(targetRecord.scrollTop))
+      serialized.scrollTop = targetRecord.scrollTop;
+    if (isNumber(targetRecord.scrollLeft))
+      serialized.scrollLeft = targetRecord.scrollLeft;
+    if (isNumber(targetRecord.currentTime))
+      serialized.currentTime = targetRecord.currentTime;
+    if (isNumber(targetRecord.duration))
+      serialized.duration = targetRecord.duration;
+    if (isBoolean(targetRecord.paused)) serialized.paused = targetRecord.paused;
+    if (isBoolean(targetRecord.ended)) serialized.ended = targetRecord.ended;
+    if (isNumber(targetRecord.volume)) serialized.volume = targetRecord.volume;
+    if (isBoolean(targetRecord.muted)) serialized.muted = targetRecord.muted;
+    if (isNumber(targetRecord.playbackRate))
+      serialized.playbackRate = targetRecord.playbackRate;
   }
 
   return serialized;
@@ -150,14 +141,14 @@ const filterProps = <T extends object>(props: T): T => {
   const filtered: Record<string, unknown> = {};
 
   for (const [key, value] of Object.entries(props)) {
-    if (INTERNAL_PROPS.has(key) || value === undefined) continue;
+    if (INTERNAL_PROPS.has(key) || isUndefined(value)) continue;
 
     if (key === 'style') {
       filtered.style = parseCssString(value as string | undefined);
     } else {
       const normalizedKey = EVENT_NAME_MAP[key.toLowerCase()] || key;
 
-      if (normalizedKey.startsWith('on') && typeof value === 'function') {
+      if (normalizedKey.startsWith('on') && isFunction(value)) {
         filtered[normalizedKey] = wrapEventHandler(
           value as (detail: SerializedEventData) => void,
         );
@@ -176,14 +167,86 @@ const FORCED_PROPS_BY_TAG: Record<string, Record<string, unknown>> = {
   iframe: { sandbox: '' },
 };
 
-export const createHtmlHostWrapper = (htmlTag: string) => {
-  const isVoid = VOID_ELEMENTS.has(htmlTag);
-  const forcedProps = FORCED_PROPS_BY_TAG[htmlTag];
+const TEXT_LIKE_INPUT_TYPES = new Set([
+  'text',
+  'search',
+  'url',
+  'tel',
+  'password',
+  'email',
+  'number',
+  '',
+]);
 
-  return ({ children, ...props }: WrapperProps) =>
-    React.createElement(
+const isTextLikeInputType = (type: unknown): boolean => {
+  const inputType = isString(type) ? type.toLowerCase() : '';
+  return TEXT_LIKE_INPUT_TYPES.has(inputType);
+};
+
+type CaretPreservingElement = HTMLInputElement | HTMLTextAreaElement;
+
+const syncValuePreservingCaret = (
+  element: CaretPreservingElement,
+  nextValue: string,
+): void => {
+  if (element.value === nextValue) return;
+
+  const isFocused = document.activeElement === element;
+  const start = isFocused ? element.selectionStart : null;
+  const end = isFocused ? element.selectionEnd : null;
+
+  element.value = nextValue;
+
+  if (isFocused && isDefined(start) && isDefined(end)) {
+    try {
+      element.setSelectionRange(start, end);
+    } catch {}
+  }
+};
+
+const createCaretPreservingElement = (
+  htmlTag: 'input' | 'textarea',
+  reactProps: Record<string, unknown>,
+  forcedProps: Record<string, unknown> | undefined,
+) => {
+  const { value, defaultValue, ...rest } = reactProps;
+  const initialValue = isNonEmptyString(defaultValue)
+    ? defaultValue
+    : isNonEmptyString(value)
+      ? value
+      : undefined;
+
+  return React.createElement(htmlTag, {
+    ...rest,
+    ...forcedProps,
+    defaultValue: initialValue,
+    ref: (node: CaretPreservingElement | null) => {
+      if (!isDefined(node)) return;
+      if (isNonEmptyString(value)) {
+        syncValuePreservingCaret(node, value);
+      }
+    },
+  });
+};
+
+export const createHtmlHostWrapper = (htmlTag: string) => {
+  const forcedProps = FORCED_PROPS_BY_TAG[htmlTag];
+  const isVoid = VOID_ELEMENTS.has(htmlTag);
+
+  return ({ children, ...props }: WrapperProps) => {
+    const reactProps = filterProps(props);
+
+    if (
+      htmlTag === 'textarea' ||
+      (htmlTag === 'input' && isTextLikeInputType(reactProps.type))
+    ) {
+      return createCaretPreservingElement(htmlTag, reactProps, forcedProps);
+    }
+
+    return React.createElement(
       htmlTag,
-      { ...filterProps(props), ...forcedProps },
+      { ...reactProps, ...forcedProps },
       isVoid ? undefined : children,
     );
+  };
 };