facebook / facebook/astryx

[Bug] Chat composer: ArrowUp/ArrowDown recall message history mid-text, blocking multi-line caret navigation

Open
#4,282 2 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
TypeScript
Stars
13.1k
Forks
1.1k
Avg merge
1d 15h
Merged PRs (30d)
687

Description

### Description

`ChatComposerInput` (the contentEditable chat composer) uses ArrowUp/ArrowDown to navigate message history regardless of the caret's position, calling `preventDefault()` — so in a multi-line message the caret can't move between lines. ArrowUp replaces the current draft with the previous message; ArrowDown steps through recalled history the same way.

**Expected:** when the caret is mid-text, ArrowUp/ArrowDown move it between lines; history is navigated only at the text boundaries — ArrowUp at the very start, ArrowDown at the very end.

**Related:** #2473 (planned composer state-model refactor), #3635 (chat components tracker). Happy to open a PR with a fix + tests if this is confirmed as a bug.

### Reproduction

_Recording (astryx.dev docs playground): multi-line draft — pressing ArrowUp mid-text replaces the draft with the previous message instead of moving the caret up a line._

https://github.com/user-attachments/assets/17bb8491-6028-4f49-8ca5-d169b60b2053

**Steps:**
1. Open the `ChatComposerInput` playground on https://astryx.atmeta.com/components/ChatComposerInput — or Storybook → `Core/ChatComposerInput` → **Message History**.
2. Submit a couple of messages (type + Enter) to build history.
3. Type a multi-line draft: `aaa`, Shift+Enter, `bbb`.
4. Place the caret on the first line (or mid-text) and press ArrowUp.
5. **Expected:** the caret moves up a line. **Actual:** the draft is replaced by the previous message; the caret can't move.

### Astryx Version

@astryxdesign/core@0.1.8

### Environment

Chrome 150.0.7871.130 (official build, arm64), macOS 26.5.1 (Tahoe), Apple M5. Keyboard interaction; not AT-specific.

Contributor guide

Open the contributing guide

Research direction

Start with the ChatComposerInput playground or Storybook → Core/ChatComposerInput → Message History and reproduce ArrowUp/ArrowDown behavior in a multi-line draft. Inspect the ChatComposerInput keyboard handling and add regression tests for navigation at text boundaries versus mid-text. Done means caret movement works within multi-line text while history recall remains available at the start and end.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
68/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.