From 0ed3c0a3844403c63fab0ae08a9da60d67d7bb01 Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Wed, 27 May 2026 13:41:48 -0400
Subject: [PATCH] fix: emoji selection appends correctly to status input
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When focus moves to the emoji picker the input loses focus, making
selectionStart/selectionEnd unreliable. Replace the cursor-tracking
insertion with a simple functional state updater that always appends
the emoji to the end — reliable and appropriate for a short status field.

Also removes the now-unused inputRef and useRef import.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/app/features/settings/account/Profile.tsx | 26 +++----------------
 1 file changed, 4 insertions(+), 22 deletions(-)

diff --git a/src/app/features/settings/account/Profile.tsx b/src/app/features/settings/account/Profile.tsx
index 5ff63c7c1..2cf6d501f 100644
--- a/src/app/features/settings/account/Profile.tsx
+++ b/src/app/features/settings/account/Profile.tsx
@@ -5,7 +5,6 @@ import React, {
   useCallback,
   useEffect,
   useMemo,
-  useRef,
   useState,
 } from 'react';
 import {
@@ -350,7 +349,6 @@ function ProfileStatus() {
   const [statusMsg, setStatusMsg] = useState<string>(presence?.status ?? '');
   const [clearAfter, setClearAfter] = useState('0');
   const [emojiAnchor, setEmojiAnchor] = useState<RectCords>();
-  const inputRef = useRef<HTMLInputElement>(null);
 
   // Initialise expiry from localStorage so timer survives page reload
   const [expiryTs, setExpiryTs] = useState<number>(() => {
@@ -393,25 +391,10 @@ function ProfileStatus() {
   );
   const saving = saveState.status === AsyncStatus.Loading;
 
-  const handleEmojiSelect = useCallback(
-    (unicode: string) => {
-      const input = inputRef.current;
-      if (input) {
-        const start = input.selectionStart ?? statusMsg.length;
-        const end = input.selectionEnd ?? statusMsg.length;
-        const next = statusMsg.slice(0, start) + unicode + statusMsg.slice(end);
-        setStatusMsg(next);
-        requestAnimationFrame(() => {
-          input.focus();
-          input.setSelectionRange(start + unicode.length, start + unicode.length);
-        });
-      } else {
-        setStatusMsg((prev) => prev + unicode);
-      }
-      setEmojiAnchor(undefined);
-    },
-    [statusMsg],
-  );
+  const handleEmojiSelect = useCallback((unicode: string) => {
+    setStatusMsg((prev) => prev + unicode);
+    setEmojiAnchor(undefined);
+  }, []);
 
   const handleChange: ChangeEventHandler<HTMLInputElement> = (evt) => {
     setStatusMsg(evt.currentTarget.value);
@@ -460,7 +443,6 @@ function ProfileStatus() {
         <Box as="form" onSubmit={handleSubmit} gap="200" aria-disabled={saving}>
           <Box grow="Yes" direction="Column">
             <Input
-              ref={inputRef}
               name="statusMsgInput"
               aria-label="Status message"
               value={statusMsg}