Skip to content

Commit 6bd3822

Browse files
authored
fix: add default chat view height to calculate input max height (#1001)
- When `body.offsetHeight` is 0, the height of the input is not accurately calculated. from: https://sendbird.slack.com/archives/C0585965FFA/p1709545490650569
1 parent 1712de6 commit 6bd3822

File tree

1 file changed

+10
-6
lines changed

1 file changed

+10
-6
lines changed

src/ui/MessageInput/index.tsx

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { MutableRefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react';
1+
import React, { MutableRefObject, useCallback, useEffect, useRef, useState } from 'react';
22

33
import './index.scss';
44
import { MessageInputKeys, NodeTypes } from './const';
@@ -28,6 +28,7 @@ import { UserMessage } from '@sendbird/chat/message';
2828

2929
const TEXT_FIELD_ID = 'sendbird-message-input-text-field';
3030
const LINE_HEIGHT = 76;
31+
const DEFAULT_CHAT_VIEW_HEIGHT = 600;
3132
const noop = () => {
3233
return null;
3334
};
@@ -140,12 +141,15 @@ const MessageInput = React.forwardRef<HTMLInputElement, MessageInputProps>((prop
140141
const [isInput, setIsInput] = useState(false);
141142
const [mentionedUserIds, setMentionedUserIds] = useState<string[]>([]);
142143
const [targetStringInfo, setTargetStringInfo] = useState({ ...initialTargetStringInfo });
143-
const setHeight = useMemo(
144-
() => () => {
144+
const setHeight = useCallback(
145+
() => {
146+
const elem = internalRef?.current;
147+
if (!elem) return;
148+
145149
try {
146-
const elem = internalRef?.current;
147-
const MAX_HEIGHT = window.document.body.offsetHeight * 0.6;
148-
if (elem && elem.scrollHeight >= LINE_HEIGHT) {
150+
const estimatedChatViewHeight = window.document.body.offsetHeight || DEFAULT_CHAT_VIEW_HEIGHT;
151+
const MAX_HEIGHT = estimatedChatViewHeight * 0.6;
152+
if (elem.scrollHeight >= LINE_HEIGHT) {
149153
if (MAX_HEIGHT < elem.scrollHeight) {
150154
elem.style.height = 'auto';
151155
elem.style.height = `${MAX_HEIGHT}px`;

0 commit comments

Comments
 (0)