Web: chat list scrolls in the wrong direction with the mouse wheel (inverted FlashList)
Summary
On the web client the chat list scrolls in the wrong direction with the mouse wheel: wheel down scrolls the conversation up, wheel up scrolls it down. Trackpad two-finger scroll is affected the same way.
Environment
- Web build (React Native Web / Expo), desktop Chrome.
- Native mobile is unaffected.
Root cause
ChatList renders a FlashList with the inverted prop. On web, inverted is implemented with transform: scaleY(-1) on the content wrapper and each cell — but not on the scroll node itself. The browser's native wheel handling therefore drives scrollTop along the visually-flipped axis, so every vertical wheel gesture moves the list the wrong way.
This is a known, unfixed FlashList issue, and inverted is deprecated in FlashList v2:
- Shopify/flash-list#558
- Shopify/flash-list#1351
- Shopify/flash-list#1511
Likely the same web-inversion family as #1416 (keyboard nav inverted on web) and #793 (inverted list layout issues on web).
Steps to reproduce
- Open the web client, open any session with enough messages to scroll.
- Scroll the mouse wheel down.
- The conversation scrolls up (toward older messages) instead of down.
Expected
Wheel down moves toward the newest messages (bottom); wheel up moves toward older (top) — as in any chat.
Fix
PR #1767 extends ChatList's existing web wheel listener: for vertical-dominant wheels it preventDefault()s and drives node.scrollTop -= e.deltaY (the exact inverse of the wrong native default). Horizontal-dominant gestures (code blocks, tables) are left to the browser.
A fuller fix would migrate off the deprecated inverted prop to maintainVisibleContentPosition={{ startRenderingFromBottom: true }}, but that flips the whole coordinate system of the list and is a much larger change.
Source: slopus/happy