fix: prevent empty message composer textarea from growing (#3051)

Author: MartinCupela

src/components/MessageComposer/__tests__/MessageInput.test.jsx

@@ -324,6 +324,32 @@ describe(`MessageInputFlat`, () => {
     });
   });
 
+  it('should force single-line placeholder styling while input is empty', async () => {
+    await renderComponent();
+
+    const textarea = await screen.findByPlaceholderText(inputPlaceholder);
+
+    expect(textarea.style.whiteSpace).toBe('nowrap');
+    expect(textarea.style.overflow).toBe('hidden');
+    expect(textarea.style.textOverflow).toBe('ellipsis');
+  });
+
+  it('should remove empty-state single-line styling after user types', async () => {
+    await renderComponent();
+
+    const textarea = await screen.findByPlaceholderText(inputPlaceholder);
+
+    fireEvent.change(textarea, {
+      target: { value: 'hello world' },
+    });
+
+    await waitFor(() => {
+      expect(textarea.style.whiteSpace).toBe('');
+      expect(textarea.style.overflow).toBe('');
+      expect(textarea.style.textOverflow).toBe('');
+    });
+  });
+
   it('should display default value', async () => {
     const defaultValue = nanoid();
     const { customChannel, customClient } = await setup();

src/components/TextareaComposer/TextareaComposer.tsx

@@ -107,6 +107,17 @@ export const TextareaComposer = ({
     textComposer.state,
     textComposerStateSelector,
   );
+  // react-textarea-autosize can measure placeholder content as multi-line in narrow layouts,
+  // producing an inflated initial height (e.g. 2 rows) before the user types.
+  // Clamp to a single row only while empty unless the integrator explicitly set minRows.
+  const autosizeRows = !text && minRows == null ? 1 : undefined;
+  const textareaStyle = text
+    ? undefined
+    : ({
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+      } satisfies React.CSSProperties);
 
   const { enabled } = useStateStore(messageComposer.configState, configStateSelector);
   const { quotedMessage } = useStateStore(
@@ -297,8 +308,8 @@ export const TextareaComposer = ({
         )}
         data-testid='message-input'
         disabled={!enabled || !!cooldownRemaining}
-        maxRows={maxRows}
-        minRows={minRows}
+        maxRows={autosizeRows ?? maxRows}
+        minRows={autosizeRows ?? minRows}
         onBlur={onBlur}
         onChange={changeHandler}
         onCompositionEnd={onCompositionEnd}
@@ -311,6 +322,7 @@ export const TextareaComposer = ({
         ref={(ref) => {
           textareaRef.current = ref;
         }}
+        style={textareaStyle}
       />
       {/* todo: X document the layout change for the accessibility purpose (tabIndex) */}
       {!isComposing && (