fix: emoji selection appends correctly to status input

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>
This commit is contained in:
2026-05-27 13:41:48 -04:00
parent 01a61e3ec2
commit 90cb70c128
+4 -22
View File
@@ -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}