diff --git a/src/app/features/common-settings/general/RoomProfile.tsx b/src/app/features/common-settings/general/RoomProfile.tsx index 71cd53827..96dcb8157 100644 --- a/src/app/features/common-settings/general/RoomProfile.tsx +++ b/src/app/features/common-settings/general/RoomProfile.tsx @@ -122,7 +122,9 @@ export function RoomProfileEdit({ const [emojiAnchor, setEmojiAnchor] = useState(); const handleEmojiSelect = useCallback((unicode: string) => { - setNameValue((prev) => unicode + prev); + // Clamp to the same cap as the input's maxLength — programmatic setState isn't + // constrained by the DOM maxLength, so the picker could otherwise exceed it. + setNameValue((prev) => (unicode + prev).slice(0, 255)); setEmojiAnchor(undefined); }, []); @@ -309,6 +311,7 @@ export function RoomProfileEdit({ onChange={(e: React.ChangeEvent) => setNameValue(e.target.value)} variant="Secondary" radii="300" + maxLength={255} readOnly={!canEditName || submitting} style={{ width: '100%' }} /> diff --git a/src/app/features/create-room/CreateRoom.tsx b/src/app/features/create-room/CreateRoom.tsx index f844ae799..82340f4d2 100644 --- a/src/app/features/create-room/CreateRoom.tsx +++ b/src/app/features/create-room/CreateRoom.tsx @@ -102,7 +102,9 @@ export function CreateRoomForm({ const [emojiAnchor, setEmojiAnchor] = useState(); const handleEmojiSelect = useCallback((unicode: string) => { - setNameValue((prev) => unicode + prev); + // Clamp to the same cap as the input's maxLength — programmatic setState isn't + // constrained by the DOM maxLength, so the picker could otherwise exceed it. + setNameValue((prev) => (unicode + prev).slice(0, 255)); setEmojiAnchor(undefined); }, []); @@ -240,6 +242,7 @@ export function CreateRoomForm({ disabled={disabled} value={nameValue} onChange={(e: React.ChangeEvent) => setNameValue(e.target.value)} + maxLength={255} style={{ width: '100%' }} /> diff --git a/src/app/features/settings/account/Profile.tsx b/src/app/features/settings/account/Profile.tsx index a72b22154..c6ce2c0ff 100644 --- a/src/app/features/settings/account/Profile.tsx +++ b/src/app/features/settings/account/Profile.tsx @@ -285,6 +285,7 @@ function ProfileDisplayName({ profile, userId }: ProfileProps) { onChange={handleChange} variant="Secondary" radii="300" + maxLength={255} style={{ paddingRight: config.space.S200 }} readOnly={changingDisplayName || disableSetDisplayname} after={