|
1 |
| -import React, { MutableRefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react'; |
| 1 | +import React, { MutableRefObject, useCallback, useEffect, useRef, useState } from 'react'; |
2 | 2 |
|
3 | 3 | import './index.scss';
|
4 | 4 | import { MessageInputKeys, NodeTypes } from './const';
|
@@ -28,6 +28,7 @@ import { UserMessage } from '@sendbird/chat/message';
|
28 | 28 |
|
29 | 29 | const TEXT_FIELD_ID = 'sendbird-message-input-text-field';
|
30 | 30 | const LINE_HEIGHT = 76;
|
| 31 | +const DEFAULT_CHAT_VIEW_HEIGHT = 600; |
31 | 32 | const noop = () => {
|
32 | 33 | return null;
|
33 | 34 | };
|
@@ -140,12 +141,15 @@ const MessageInput = React.forwardRef<HTMLInputElement, MessageInputProps>((prop
|
140 | 141 | const [isInput, setIsInput] = useState(false);
|
141 | 142 | const [mentionedUserIds, setMentionedUserIds] = useState<string[]>([]);
|
142 | 143 | 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 | + |
145 | 149 | 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) { |
149 | 153 | if (MAX_HEIGHT < elem.scrollHeight) {
|
150 | 154 | elem.style.height = 'auto';
|
151 | 155 | elem.style.height = `${MAX_HEIGHT}px`;
|
|
0 commit comments