@startsimpli/ui 0.4.144 → 0.4.145

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/ui",
-  "version": "0.4.144",
+  "version": "0.4.145",
   "description": "Shared UI components package for StartSimpli applications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -152,8 +152,8 @@
     "tailwindcss": "^3.4.19",
     "tsup": "^8.5.1",
     "typescript": "^6.0.3",
-    "@startsimpli/realtime": "0.0.2",
-    "@startsimpli/i18n": "0.1.3"
+    "@startsimpli/i18n": "0.1.3",
+    "@startsimpli/realtime": "0.0.2"
   },
   "keywords": [
     "ui",

package/src/components/track-changes/ChangesRail.tsx

@@ -24,7 +24,7 @@
  * Presentational: every write is a callback, so the host decides the
  * precondition (the version an accept asserts) and folds the result.
  */
-import { useId, useMemo, useRef, useState, type KeyboardEvent, type ReactNode } from 'react';
+import { useId, useLayoutEffect, useMemo, useRef, useState, type KeyboardEvent, type ReactNode } from 'react';
 
 import { ActorIdentity, actorKindTitle } from '../ActorIdentity';
 import { describeChange, describeSuggestion, describeThread, quoted, who } from './describe';
@@ -587,6 +587,20 @@ function Composer({
   const [hi, setHi] = useState(0);
   const ref = useRef<HTMLTextAreaElement>(null);
   const listId = `mention-${useId()}`;
+  // Where the caret goes after a picked mention. Applied in a LAYOUT effect,
+  // i.e. synchronously after React writes the new value and before the
+  // browser can deliver another keystroke. A requestAnimationFrame here let a
+  // fast typist's next characters land at the end of the text and then jump
+  // (caught on the deployed gate: "...nly).(sandbox o").
+  const caretRef = useRef<number | null>(null);
+  useLayoutEffect(() => {
+    const at = caretRef.current;
+    const el = ref.current;
+    if (at == null || !el) return;
+    caretRef.current = null;
+    el.focus();
+    el.setSelectionRange(at, at);
+  }, [body]);
 
   const matches = useMemo(() => {
     if (!q) return [];
@@ -603,11 +617,7 @@ function Composer({
     setBody(next);
     setPicked((p) => (p.some((x) => x.sub === m.sub) ? p : [...p, m]));
     setQ(null);
-    requestAnimationFrame(() => {
-      const pos = q.start + tag.length;
-      el?.focus();
-      el?.setSelectionRange(pos, pos);
-    });
+    caretRef.current = q.start + tag.length;
   };
 
   const submit = async () => {

package/src/components/track-changes/__tests__/rails.test.tsx

@@ -373,6 +373,18 @@ describe('ChangesRail', () => {
     await waitFor(() => expect(onComment).toHaveBeenCalledWith('Ask @rita@x.io', ['rita'], selection))
   })
 
+  it('puts the caret right after a picked mention before the next keystroke can land', async () => {
+    render(<ChangesRail {...base} canAccept={false} onComment={jest.fn()} mentionable={[{ sub: 'rita', label: 'rita@x.io' }]} />)
+    const box = screen.getByLabelText('New comment on Blog') as HTMLTextAreaElement
+    fireEvent.change(box, { target: { value: 'Ask @ri and more', selectionStart: 7 } })
+    fireEvent.mouseDown(await screen.findByRole('option', { name: 'rita@x.io' }))
+    // Synchronously, with no animation frame in between: a fast typist's next
+    // character must go after the tag, not wherever the value update left it.
+    expect(box.value).toBe('Ask @rita@x.io  and more')
+    expect(box.selectionStart).toBe('Ask @rita@x.io '.length)
+    expect(document.activeElement).toBe(box)
+  })
+
   it('keeps the typed comment when the write fails', async () => {
     const onComment = jest.fn().mockRejectedValue(new Error('Could not add the comment: no.'))
     render(<ChangesRail {...base} canAccept={false} onComment={onComment} />)